Destructuring assignment
Достаёт значения из массива или объекта в отдельные переменные.
Доступно с: ES2015
Синтаксис
const [a, b] = array / const { a, b } = objectПримеры
Из объекта:
const user = { name: 'Anna', age: 25 };
const { name, age } = user;
console.log(name, age);Результат:
Anna 25Из массива, с пропуском и обменом значений:
const [first, , third] = ['a', 'b', 'c'];
console.log(first, third);
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);Результат:
a c
2 1Переименование, значения по умолчанию и параметры функции:
const { name: userName, role = 'guest' } = { name: 'Oleg' };
console.log(userName, role);
const greet = ({ name, city = 'unknown' }) => `${name} from ${city}`;
console.log(greet({ name: 'Anna' }));Результат:
Oleg guest
Anna from unknownПримечания
Значение по умолчанию подставляется только для undefined, а не для null. Деструктуризация undefined или null вызывает TypeError.
См. также
- Spread syntax — Три точки раскрывают массив или объект на отдельные элементы.
- Rest parameters — Собирает оставшиеся аргументы функции в массив.
- Default parameters — Значение параметра, если аргумент не передан.
- Object.entries — Возвращает массив пар «имя свойства и значение».
Вопросы и ответы по теме
В учебнике
- Деструктуризация — Деструктуризация массивов и объектов в JavaScript — как разложить значения по переменным одной строкой.