Деструктуризация

1. Деструктуризация объектов

При разработке программ данные приходят, как правило, в виде массивов и объектов. А логика обработки данных написана с помощью локальных переменных. Поэтому необходимо присваивать значения свойств объектов переменным и делать это желательно максимально просто.

Для этого в ES6 введен новый синтаксис — переменным внутри фигурных скобок присваиваются значения объекта. Если имя переменной и ключ объекта совпадают, то происходит присваивание. Если для переменной не нашлось подходящего ключа, то будет присвоен undefined.

const hotel = {
  name: 'Resort Hotel',
  stars: 5,
  capacity: 100,
};

// Объявим переменные и присвоим им значения из объекта
const { name, stars, status } = hotel;

console.log(name, stars, status); // "Resort Hotel", 5, undefined
Copy

Присвоения undefined можно избежать, задав переменным значения по умолчанию, в случае если такого свойства в объекте нет.

const hotel = {
  name: 'Resort Hotel',
  stars: 5,
  capacity: 100,
};

const { name = 'hotel', stars = 3, status = 'empty' } = hotel;

console.log(name, stars, status); // "Resort Hotel", 5, "empty"
Copy

Не всегда удобно создавать имена переменных по ключам, поэтому можно переопределить имена в процессе присвоения. Сначала пишем имя свойства из которого мы хотим получить значение, после чего ставим двоеточие и пишем имя переменной, в которую хотим поместить значение этого свойства.

const hotel = {
  name: 'Resort Hotel',
  stars: 5,
  capacity: 100,
};

const { name: hotelName, stars, status: hotelStatus = 'empty' } = hotel;

console.log(hotelName, stars, hotelStatus);
// "Resort Hotel", 5, "empty"
Copy

Используя операцию ... (rest) можно делать частичную деструктуризацию, взяв из объекта необходимые поля, а остальное собрать в переменную под именем rest (имя переменной произвольное), это будет объект с теми полями, которые мы явно не деструктуризировали в переменные.

const hotel = {
  name: 'Resort Hotel',
  stars: 5,
  capacity: 100,
};

const { name, ...rest } = hotel;

console.log(name); // "Resort Hotel"
console.log(rest); // {stars: 5, capacity: 100}
Copy

2. Деструктуризация массивов

Аналогично делается деструктуризация массивов, но с некоторыми особенностями:

• Вместо {} используются []

• Переменным, указанным в [], будут последовательно присваиваться значения элементов массива

Представьте, что есть массив цветов из которого нужно в отдельные переменные получить значения каждой составляющей цвета. После ключевого слова const или let ставим открывающую и закрывающую квадратные скобки, как при объявлении массива. Внутри скобок, через запятую, указываем имена переменных, в которые будут помещены значения массива.

В результате такой записи будут созданы 3 переменные и в них будут помещены элементы в нумерованном порядке - от 0 и до конца массива.

const rgb = [200, 255, 100];

const [red, green, blue] = rgb;

console.log(`Red: ${red}, Green: ${green}, Blue: ${blue}`);
// Red: 200, Green: 255, Blue: 100
Copy

При деструктуризации массивов переменной может быть присвоено значение отдельно от ее объявления.

const rgb = [200, 255, 100];
let red, green, blue;

[red, green, blue] = rgb;

console.log(`Red: ${red}, Green: ${green}, Blue: ${blue}`);
// Red: 200, Green: 255, Blue: 100
Copy

Если переменных больше, чем элементов массива, им будет присвоено undefined, поэтому можно указывать значения по умолчанию.

const rgb = [200, 100, 255];

const [red, green, blue, alfa = 0.3] = rgb;

console.log(`Red: ${red}, Green: ${green}, Blue: ${blue}, Alfa: ${alfa}`);
// Red: 200, Green: 100, Blue: 255, Alfa: 0.3
Copy

Иногда из массива необходимо деструктуризировать только первые n элементов, а остальные сохранить в одну переменную в виде массива. При деструкции массива можно распаковать и присвоить оставшуюся часть элементов массива переменной, используя операцию ... (rest).

const rgb = [200, 255, 100];

const [red, ...colors] = rgb;

console.log(`Red: ${red}, Colors: ${colors}`);
// Red: 200, Colors: [255, 100]
Copy

Элементы можно пропускать. Допустим, из массива rgb необходимо взять только последнее значение. Используется это крайне редко.

const rgb = [200, 100, 255];

const [, , blue] = rgb;

console.log(`Blue: ${blue}`); // Blue: 255
Copy

3. Дополнительные материалы

• ES6 деструктуризація. Детальна інструкція от Codeguida
• exploring.js - Destructuring