Я продолжаю видеть функции, которые выглядят следующим образом в кодовой базе, над которой я работаю:

const func = ({ param1, param2 }) => {
  //do stuff
}

Что именно это делает? Мне трудно найти это в Google, потому что я даже не уверен, как это называется или как описать это в поиске Google.

Nathan

Ответов: 3

Ответы (3)

Это деструктуризация, но содержится в параметрах. Эквивалент без деструктуризации будет:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

Это передача объекта как свойства.

Это сокращение от

let param1 = someObject.param1
let param2 = someObject.param2

Другой способ использования этой техники без параметров заключается в следующем, давайте на секунду рассмотрим, что someObject действительно содержит эти свойства.

let {param1, param2} = someObject;

Это назначение деструктуризации объекта. Как и я, вы, возможно, нашли это удивительным, потому что синтаксис деструктуризации объекта ES6 выглядит, но НЕ ведет себя как построение литерала объекта.

Он поддерживает очень сжатую форму, с которой вы столкнулись, а также переименование полей и аргументов по умолчанию:

По сути, это {oldkeyname: newkeyname = defaultvalue, ...}. ':' НЕ является разделителем ключа / значения; '=' равно.

Некоторым следствием этого дизайнерского решения языка является то, что вам, возможно, придется делать такие вещи, как

; ({a, b} = некоторый_объект);

Дополнительные скобки препятствуют синтаксическому анализу левых фигурных скобок как блока, а начальная точка с запятой предотвращает парсинг скобок как вызова функции в предыдущей строке.

Подробнее см .: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Осторожно, ключевые ошибки при назначении деструктуризации объекта НЕ выдаются; вы просто получаете «неопределенные» значения, будь то ключевая ошибка или какая-то другая ошибка, которая молча передается как «undefined».

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
> 

2022 WebDevInsider