Что такое деструктуризация и приведите пример?
Деструктуризация — это синтаксическая возможность в JavaScript, позволяющая "распаковывать" значения из массивов или свойства из объектов в отдельные переменные. Она появилась в ES6 и упрощает извлечение данных.
1. Деструктуризация массива
С помощью квадратных скобок [ ] значения элементов массива присваиваются переменным по порядку:
const arr = \[1, 2, 3\];
const \[a, b, c\] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
Можно пропускать элементы:
const \[x, , z\] = \[10, 20, 30\];
console.log(x); // 10
console.log(z); // 30
Можно использовать остаточные параметры:
const \[head, ...rest\] = \[1, 2, 3, 4\];
console.log(head); // 1
console.log(rest); // \[2, 3, 4\]
2. Деструктуризация объекта
С помощью фигурных скобок { } значения свойств объекта присваиваются переменным с соответствующими именами:
const user = {
name: 'Alice',
age: 30,
city: 'Paris'
};
const { name, age } = user;
console.log(name); // Alice
console.log(age); // 30
Если нужно использовать другое имя переменной:
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 30
Если свойства нет — переменная будет undefined:
const { country } = user;
console.log(country); // undefined
3. Значения по умолчанию
Можно задавать значение по умолчанию, если свойство или элемент отсутствует:
const \[a = 1, b = 2\] = \[undefined\];
console.log(a); // 1
console.log(b); // 2
const { title = 'Нет названия' } = {};
console.log(title); // 'Нет названия'
4. Вложенная деструктуризация
Можно деструктурировать вложенные объекты или массивы:
const user = {
name: 'Bob',
address: {
city: 'Berlin',
zip: 10115
}
};
const {
address: { city, zip }
} = user;
console.log(city); // Berlin
console.log(zip); // 10115
5. Деструктуризация в параметрах функции
Можно деструктурировать прямо в списке параметров:
function showUser({ name, age }) {
console.log(name, age);
}
const user = { name: 'Eve', age: 25 };
showUser(user); // Eve 25
Для массивов:
function sum(\[a, b\]) {
return a + b;
}
console.log(sum(\[5, 7\])); // 12
6. Комбинированная деструктуризация
Можно совмещать объекты и массивы:
const data = {
users: \[
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 30 }
\]
};
const {
users: \[firstUser\]
} = data;
console.log(firstUser.name); // Alice
7. Деструктуризация с остаточными свойствами объекта
Можно собрать оставшиеся свойства в переменную:
const { name, ...others } = { name: 'Sam', age: 22, city: 'Rome' };
console.log(name); // Sam
console.log(others); // { age: 22, city: 'Rome' }
8. Обмен значений через деструктуризацию
let a = 1, b = 2;
\[a, b\] = \[b, a\];
console.log(a); // 2
console.log(b); // 1
9. Пропуск значений при деструктуризации массива
const \[first, , third\] = \[10, 20, 30\];
console.log(first); // 10
console.log(third); // 30
10. Применение в циклах
const users = \[
{ id: 1, name: 'Ivan' },
{ id: 2, name: 'Olga' }
\];
for (const { id, name } of users) {
console.log(id, name);
}
11. Деструктуризация в import
Если экспорт именованный:
// файл lib.js
export const a = 1;
export const b = 2;
// импорт
import { a, b } from './lib.js';
12. Ошибки и ограничения
- При деструктуризации undefined или null произойдёт ошибка, если деструктурируется как объект:
const user = null;
const { name } = user; // TypeError: Cannot destructure 'null'
Чтобы избежать ошибки:
const { name } = user || {};
13. Значения по умолчанию в параметрах функции с деструктуризацией
function greet({ name = 'Гость' } = {}) {
console.log(\`Привет, ${name}\`);
}
greet(); // Привет, Гость
14. Пример: получение query-параметров из URL
const query = new URLSearchParams('?page=2&limit=10');
const page = query.get('page');
const limit = query.get('limit');
Можно улучшить:
const getQuery = () => {
const { page = '1', limit = '20' } = Object.fromEntries(new URLSearchParams(location.search));
return { page: +page, limit: +limit };
};
15. Реальный пример: обработка ответа API
const response = {
status: 200,
data: {
user: {
id: 42,
name: 'John Doe'
}
}
};
const {
data: {
user: { id, name }
}
} = response;
console.log(id); // 42
console.log(name); // John Doe