Примеры деструктуризации Object или Array в Javascript

деструктуризация Object или Array в Javascript

Перед деструктуризацией разберемся со структурой

В информатике типы структур, которые мы регулярно строим и используем, называются структурами данных.

Структура данных – это формат хранения, созданный с целью хранения и организации данных, часто с приоритетом доступности и настройки этих данных. Другими словами:

Структура данных (англ. 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'