
Перед деструктуризацией разберемся со структурой
В информатике типы структур, которые мы регулярно строим и используем, называются структурами данных.
Структура данных – это формат хранения, созданный с целью хранения и организации данных, часто с приоритетом доступности и настройки этих данных. Другими словами:
“Структура данных (англ. data structure) — программная единица, позволяющая хранить и обрабатывать множество однотипных и/или логически связанных данных в вычислительной технике. Для добавления, поиска, изменения и удаления данных структура данных предоставляет некоторый набор функций, составляющих её интерфейс.” – Wikipedia
В JavaScript есть две встроенные структуры данных: массивы (Array) и объекты (Object).
Что значит «деструктурировать» структуру данных?
“Синтаксис деструктурирующего присваивания в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.” – MDN
Это определение MDN. Наиболее полезной частью этого определения является слово «извлекать», помните об этом термине по мере продвижения вперед.
Рассмотрим пример кода.
Деструктуризация массива.
let studentsArr = ['Ana', 'Bianca', 'Charlie'];
let [first, second, third] = studentsArr;
console.log(first); // 'Ana'
console.log(second); // 'Bianca'
console.log(third); // 'Charlie'
В первой строке объявляем новую переменную studentArr
и присваиваем ей значение массива имен учеников. Во второй строке деструктурируем массив.
В строке 2 объявляем три переменные: first
, second
и third
. Объявляя их слева, реализуем деструктурирующее присваивание. Написав синтаксис таким образом, сообщаем JavaScript: “надо извлечь значения из массива и присвоить его элементы переменным, которые перечислены слева”.
Таким образом, мы объявили три новые переменные и присвоили им три разных значения, всё это сделали одной строкой кода. Без деструктурирующего присваивания это заняло бы три строки:
let studentsArr = ['Ana', 'Bianca', 'Charlie'];
let first = studentsArr[0];
let second = studentsArr[1];
let third = studentsArr[2];
Rest-параметр: ‘…’
Если надо присвоить первые несколько значений массива определенным переменным, а ещё захватить остальные значения массива, можно использовать rest-синтаксис:
let studentsArr = ['Ana', 'Bianca', 'Charlie', 'Dave', 'Elena', 'Frank'];
let [first, second, third, ...rest] = studentsArr;
console.log(rest); // ['Dave', 'Elena', 'Frank']
Остальные значения массива присваиваются переменной rest
. Можно использовать любое название переменной, чтобы присвоить оставшиеся значения, если ей предшествует ...
(rest-синтаксис).
Деструктуризация объекта.
Это особенно полезно для извлечения данных из объектов. Допустим, имеется приложение, использующее объекты для описания фильмов, например:
const movie = {
title: 'Star Wars',
releaseDate: 'May 25, 1977',
country: 'United States',
runningTimeMinutes: 121,
language: 'English',
budget: 11000000
};
Если надо извлечь отдельные значения из этого объекта, можно сделать так:
const title = movie.title;
const country = movie.country;
Или, используя синтаксис деструктурирующего присваивания, то же самое можно сделать так:
const {title, country} = movie;
console.log(title, country); // 'Star Wars', 'English'
JavaScript возьмёт переменные, объявленные в левой части, и присвоит им значения, соответствующие ключам объекта с такими же названиями.
Деструктуризация вложенных объектов.
Допустим, есть вложенные данные, которые нужно извлечь с помощью деструктуризации. Это может показаться сложным, но на самом деле всё очень просто!
const movie = {
title: 'Star Wars',
releaseDate: 'May 25, 1977',
country: 'United States',
starring: {
leadActor: 'Mark Hamill',
leadActress: 'Carrie Fisher'
},
runningTimeMinutes: 121,
language: 'English',
budget: 11000000
};
let {leadActor, leadActress} = movie.starring;
console.log(leadActor, leadActress) // 'Mark Hamill', 'Carrie Fisher'
Обратите внимание на простоту этого синтаксиса в отличие от обычной цепочки.
Значения по умолчанию
Деструктуризация может использовать значения по умолчанию. В примере с фильмами, иногда появляются фильмы, которые не раскрывают свой бюджет. Если нужно это учитывать, можно назначить значение по умолчанию:
const movie = {
title: 'Mystery Movie',
releaseDate: 'February 29, 1981',
country: 'Atlantis',
runningTimeMinutes: 180,
language: 'Atlantean',
budget:
};
let {title, country, budget='unknown'} = movie;
console.log(budget) // 'unknown'