Деструктуризация — удобный способ извлечения значений из массивов и объектов в JavaScript, позволяющий сократить код и улучшить читаемость. Рассмотрим примеры использования деструктуризации для массивов и объектов.
Деструктуризация массивов
Функция quickValues вычисляет сумму и разность двух чисел:
function quickValues(a, b) {
return [a + b, a - b];
}
Функция возвращает массив, содержащий сумму и разность. Для получения этих значений обычно присваивали бы элементы массива отдельным переменным:
const result = quickValues(42, 10);
const sum = result[0];
const sub = result[1];
console.log(sum, sub); // 52 32
Деструктуризация упрощает этот код:
const [sum, sub] = quickValues(42, 10);
console.log(sum, sub); // 52 32
Переменные sum и sub создаются непосредственно из массива, используя квадратные скобки [].
Пропуск элементов и оператор rest
Расширим функцию quickValues:
function quickValues(a, b) {
return [a + b, a - b, a * b, a / b];
}
Если нужны только сумма и произведение, можно пропустить ненужные элементы:
const [, , mul] = quickValues(42, 10);
console.log(mul); // 420
Или, используя оператор rest (…), собрать оставшиеся элементы в новый массив:
const [sum, , mul, ...rest] = quickValues(42, 10);
console.log(rest); // [4.2]
Значения по умолчанию
Если функция возвращает undefined для какого-либо элемента, можно задать значение по умолчанию:
function quickValues(a, b) {
return [a + b, undefined, a * b, a / b];
}
const [sum, sub = 'Вычитание нет', mul, div] = quickValues(42, 10);
console.log(sum, sub, mul, div); // 52 Вычитание нет 420 4.2
Если sub не определено, используется значение ‘Вычитание нет’. В противном случае, значение по умолчанию игнорируется.
Деструктуризация объектов
Деструктуризация объектов аналогична деструктуризации массивов. Объект person:
const person = {
name: 'Max',
age: 20,
address: {
country: 'Russia',
city: 'Moscow'
}
};
Получим значения полей объекта:
const { name, age } = person;
console.log(name, age); // Max 20
Фигурные скобки {} используются для деструктуризации объекта. Можно задавать другие имена переменных и значения по умолчанию:
const { name: firstName, age, car = 'Машины нет' } = person;
console.log(firstName, age, car); // Max 20 Машины нет
Вложенная деструктуризация объектов:
const { address: { city: homeTown, country } } = person;
console.log(homeTown, country); // Moscow Russia
Оператор rest (…) также применим к объектам:
const { name, ...info } = person;
console.log(name, info); // Max {age: 20, address: {…}}
Применение на практике: React
Деструктуризация часто используется с props в React:
function MyComponent({ name, age }) {
return <div>Имя: {name}, Возраст: {age}</div>;
}
Это позволяет избежать многократного написания props.name и props.age.
Деструктуризация — мощный инструмент для работы с данными в JavaScript, повышающий читаемость и сокращающий код. Она эффективна для массивов и объектов, поддерживая пропуск элементов, значения по умолчанию и оператор rest. Широко применяется в различных фреймворках, таких как React.