Сборка от 17 марта 2017 г

Вложенные деструктуризации

Если объект или массив содержат другие объекты или массивы, и их тоже хочется разбить на переменные – не проблема. Деструктуризации можно как угодно сочетать и вкладывать друг в друга.

В коде ниже options содержит подобъект и подмассив. В деструктуризации ниже сохраняется та же структура:

'use strict';

let options = { size: {

width: 100,
height: 200
},
items: ["Пончик", "Пирожное"]
}

let { title="Меню", size: {width, height}, items: [item1, item2] } = options;

// Меню 100 200 Пончик Пирожное alert(title); // Меню alert(width); // 100

alert(height); // 200 alert(item1); // Пончик alert(item2); // Пирожное

Как видно, весь объект options корректно разбит на переменные.

Итого

• 
  Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.
  

• 
  Синтаксис:
  

let {prop : varName = default, ...} = object

Здесь двоеточие : задаёт отображение свойства prop в переменную varName , а равенство =default задаёт выражение, которое будет использовано, если значение отсутствует (не указано или undefined ).

Для массивов имеет значение порядок, поэтому нельзя использовать : , но значение по умолчанию – можно:

let [var1 = default, var2, ...rest] = array

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

• 
  Вложенные объекты и массивы тоже работают, при деструктуризации нужно лишь сохранить ту же структуру, что и исходный объект/массив.
  

Как мы увидим далее, деструктуризации особенно удобны при чтении объектных параметров функций.