Если ты до сих пор пишешь так:
const name = user.name;
const email = user.email;
const age = user.age;
то деструктуризация покажется тебе супер способностью.
ES6 ввел синтаксис деструктурирующего присваивания — лаконичный способ распаковки значений из массивов и объектов в отдельные переменные. Это одна из тех фич, начав использовать которые, ты удивишься, как раньше без нее жил.
Разберем 12 паттернов: от базовых до продвинутых.
Деструктуризация объектов
Паттерн 1. Базовая деструктуризация объекта
const user = {
name: "Ivan",
age: 28,
email: "ivan@proweb63.ru",
role: "developer"
};
// Устаревший подход
const name = user.name;
const age = user.age;
const email = user.email;
// Деструктуризация. Делай так
const { name, age, email } = user;
console.log(name); // "Ivan"
console.log(age); // 28
console.log(email); // "ivan@proweb63.ru"
Паттерн 2. Переименование переменных (aliasing)
Исходное имя свойства не подходит для переменной, или нужно дать более чистое имя:
const apiResponse = {
user_name: "Ivan",
user_age: 28
// ...
};
// Переименовываем user_name → userName
const { user_name: userName, user_age: userAge } = apiResponse;
Паттерн 3. Значения по умолчанию
const config = { theme: "dark" };
const { theme, lang = "ru" } = config;
console.log(lang); // "ru" — значение по умолчанию
Паттерн 4. Деструктуризация во вложенных объектах
const user = {
name: "Ivan",
address: {
city: "Москва",
zip: "000001"
}
};
const { address: { city, zip } } = user;
console.log(city); // "Москва"
Паттерн 5. Деструктуризация параметров функции
// Было
function displayUser(user) {
console.log(`${user.name} (${user.age})`);
}
// Стало
function displayUser({ name, age }) {
console.log(`${name} (${age})`);
}
// Вызов остаётся тем же: displayUser(user)
Деструктуризация массивов
Паттерн 6. Базовая деструктуризация массива
const colors = ["red", "green", "blue"];
const [first, second] = colors;
console.log(first); // "red"
console.log(second); // "green"
Паттерн 7. Пропуск элементов (skip pattern)
const [, second, , fourth] = [1, 2, 3, 4, 5];
console.log(second); // 2
console.log(fourth); // 4
Паттерн 8. Деструктуризация + rest-оператор
const nums = [10, 20, 30, 40, 50];
const [head, ...tail] = nums;
console.log(head); // 10
console.log(tail); // [20, 30, 40, 50]
Паттерн 9. Значения по умолчанию в массивах
const input = ["value1"];
const [a = "defaultA", b = "defaultB"] = input;
console.log(a); // "value1"
console.log(b); // "defaultB"
Продвинутые паттерны (комбинации и частные случаи)
Паттерн 10. Swap (обмен значений) без временной переменной
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1
Паттерн 11. Деструктуризация возвращаемого значения функции
function getCoordinates() {
return { lat: 40.7128, lng: -74.0060 };
}
const { lat, lng } = getCoordinates();
Паттерн 12. Смешанная деструктуризация (объект + массив)
const response = {
status: 200,
data: {
items: [{ id: 1, name: "A" }, { id: 2, name: "B" }]
}
};
const { data: { items: [firstItem, secondItem] } } = response;
console.log(firstItem); // { id: 1, name: "A" }
Ключевые выводы для разработчика
| Что дает использование деструктуризации |
Технический смысл |
| Снижение дублирования кода |
DRY-принцип |
| Улучшение читаемости |
Self-documenting code |
| Меньше промежуточных переменных |
Меньше мусора в лексическом окружении |
| Четкая спецификация зависимостей от структуры данных |
Явное объявление контракта |
| Единый стиль для объекта/массива |
Предиктивность |
Рекомендация: применяй деструктуризацию везде, где ты обращаешься к свойствам объекта более одного раза или хочешь явно показать, какие поля из входящего объекта использует функция. Исключение — когда нужна ссылка на сам родительский объект.
Если вы до сих пор пишете const tmp = obj.prop — этот материал для вас. Переходите на ES6+ и пишите код, который не стыдно показать на код-ревью.
А какие приемы работы с деструктуризацией или другими фичами ES6+ вы используете ежедневно? Возможно, у вас есть кейс, где деструктуризация помогла избежать бага или существенно сократить код? Поделитесь примерами в комментариях — интересно посмотреть на реальный опыт.-Источник
