Что фигурные скобки внутри списков параметров функций делают в es6?

123

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

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

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

javascript ecmascript-6 Натан
источник
Возможный дубликат синтаксиса параметров объекта для функций javascript?
Берги

Ответы:

118

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

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}
Джеймс Торп
источник
12
Просто чтобы убедиться, что я правильно понимаю, в основном это означает, что объект, содержащий эти свойства, будет передан в функцию, а затем внутри функции свойства могут быть автоматически доступны, просто используя их имя?
Натан
7
@Nathan Да, см. Конкретно раздел о деструктуризации объектов . Обратите внимание, однако, что обновления переменных не изменяют исходные свойства объекта - это не похоже на создание ссылки на исходное значение.
Джеймс Торп
@JamesThorpe, лучше бы ссылку на developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lsborg
11

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

Это в основном сокращение для

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

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

let {param1, param2} = someObject;
Оз Лодригес
источник
3

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

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

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

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

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

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

Для получения дополнительной информации см. Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment.

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

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>
Эндрю Вагнер
источник