Деструктуризация
Деструктуризация — синтаксис для извлечения значений из массивов и объектов в переменные.
Массивы
const [a, b, c] = [1, 2, 3];
// a = 1, b = 2, c = 3
Пропуск:
const [, second, , fourth] = [1, 2, 3, 4];
// second = 2, fourth = 4
Rest:
const [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]
Значения по умолчанию:
const [a = 10, b = 20] = [1];
// a = 1, b = 20
Объекты
const { name, age } = { name: 'Алиса', age: 25 };
Переименование:
const { name: userName, age: userAge } = user;
Значения по умолчанию:
const { name = 'Гость', age = 0 } = user;
Переименование + дефолт:
const { name: userName = 'Гость' } = user;
Rest:
const { name, ...rest } = user;
// rest = всё кроме name
Вложенная
const user = {
name: 'Алиса',
address: {
city: 'Москва',
zip: '101000',
},
};
const { address: { city, zip } } = user;
С дефолтами:
const { address: { city = 'Неизвестно' } = {} } = user;
В параметрах функций
function print({ name, age }) {
console.log(name, age);
}
print({ name: 'Алиса', age: 25 });
С дефолтами:
function print({ name = 'Гость', age = 0 } = {}) {
console.log(name, age);
}
print(); // Гость 0
print({}); // Гость 0
Массив в параметрах:
function printCoords([x, y]) {
console.log(x, y);
}
В циклах
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}
for (const [index, item] of items.entries()) {
console.log(index, item);
}
Обмен переменных
let a = 1, b = 2;
[a, b] = [b, a];
Возврат из функции
function minMax(arr) {
return [Math.min(...arr), Math.max(...arr)];
}
const [min, max] = minMax([1, 2, 3]);
function getUser() {
return { name: 'Алиса', age: 25 };
}
const { name } = getUser();
Вложенные массивы в объектах
const data = {
users: [
{ name: 'Алиса', age: 25 },
{ name: 'Боб', age: 30 },
],
};
const { users: [firstUser, secondUser] } = data;
// firstUser = { name: 'Алиса', age: 25 }
Деструктуризация без объявления
Нужны скобки:
let name, age;
({ name, age } = user);
Без скобок — синтаксическая ошибка.
Глубокие дефолты
const config = {};
const {
server: { host = 'localhost', port = 3000 } = {},
} = config;
Пропуск в объектах
Нельзя пропустить, как в массивах. Только переименовать:
const { name: _, ...rest } = user;
Итоги
- Массивы:
[a, b], пропуск, rest - Объекты:
{ a, b }, переименование, дефолт - Вложенная работает
- В параметрах функций удобно
- Обмен переменных одной строкой
- Скобки при деструктуризации без объявления