Деструктуризация
Деструктуризация — синтаксис JavaScript, который по шаблону присваивает свойства object или элементы array переменным. Исходные данные не меняются. Используем такой заказ:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Простая деструктуризация object
Имена внутри {} выбирают одноимённые свойства значения справа и создают две константы.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
Сначала выводится lida, затем tea. Это краткая запись чтения order.guest и order.drink; свойства из order не удаляются.
Переименование и значение по умолчанию
Шаблон property: variable задаёт другое имя переменной. Значение после = используется, только если свойство равно undefined.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer получает lida. Свойства size нет, поэтому переменная получает regular. Переменная guest при этом не создаётся.
Вложенное свойство
Вложенный шаблон повторяет форму object. Часть { city } читает city из order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
Результат — rasht; переменная address не создаётся. Если address отсутствует или равен undefined, чтение city может вызвать ошибку. Optional chaining нельзя вставить внутрь такого шаблона: сначала проверьте или нормализуйте значение.
Деструктуризация array
Квадратные скобки [] сопоставляют элементы по позиции. Первая переменная получает индекс 0, вторая — индекс 1.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
Выводятся mint и lemon. Имена выбираете вы, а значение определяет позиция. В order.extras остаются оба элемента.
Деструктуризация параметра функции
Функция может извлечь свойства прямо в списке параметров. Следующей функции нужны только guest и drink.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
Вызов возвращает lida ordered tea. Шаблон применяется при вызове, поэтому null или undefined вызовет ошибку, если функция не обрабатывает такой случай.
Полная демонстрация
Страница сочетает деструктуризацию object, array и параметра и показывает сводку заказа.
<!doctype html>
<html lang="ru">
<head><meta charset="utf-8"><title>Деструктуризация JavaScript</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
На странице показано ровно lida / tea / mint. Функция только читает нужные данные и не изменяет order.
include_try
Переименуйте drink в beverage и задайте значение по умолчанию отсутствующему свойству table. Затем создайте заказ без address и проверьте её перед вложенным шаблоном.
mistakes
Не путайте свойство и переименованную переменную. Значение по умолчанию не заменяет null, а вложенный object может отсутствовать. {} сопоставляет свойства, [] — позиции; источник не меняется. Rest и spread изучаются далее в spread-rest.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху