В текущей версии Javascript у нас есть возможность разбирать структуру объектов.

Массивы:

Базовая деструктуризация

const pizzaPrices = [8.90, 13.21, 16.00];
const [low, average, high] = pizzaPrices;
console.log(average); // 13.21

В приведенном выше примере мы деструктурируем pizzaPrices, чтобы присвоить переменные их элементам.

Пропуск элементов и отдых

const pizzaPrices = [8.90, 13.21, 16.00, 17.50, 19.99, 22.00];
const [low, , high, ...diamondsInPizza] = pizzaPrices;
console.log(high); // 16.00
console.log(diamondsInPizza); // [17.5, 19.99, 22]

Теперь мы пропускаем второй элемент, просто не присваивая ему переменную. Затем мы используем синтаксис rest для создания массива оставшихся элементов внутри pizzaPrices..

Значения по умолчанию и вложенные массивы

const pizzaPrices = [8.90, 13.21, 16.00, [17.50, 19.99, 22.00]];
const [, , , [low, average, high], budget = 15] = pizzaPrices;
console.log(low); // 17.50
console.log(budget); // 15

В этом примере мы немного показываем универсальность деструктурирования массива. Сначала мы пропускаем первые три элемента, не назначая им переменные, затем мы получаем доступ к вложенному массиву внутри pizzaPrices с литералом массива внутри нашего синтаксиса деструктурирования, затем мы создаем переменную по умолчанию budget с присвоением 15.

Функции

const pizzaPrices = [8.90, 13.21, 16.00, [17.50, 19.99, 22.00]];

const pizzas =
([low, average], high = 20.00) => {
console.log(low); // 8.90
console.log(average); // 13.21
console.log(high); // 20.00
};

pizzas(pizzaPrices);

Наша функция pizzas имеет два параметра: синтаксис деструктурирования и переменную по умолчанию. Когда мы вызываем pizzas(pizzaPrices), переданный массив будет деструктурирован, присваивая переменные low и average первым двум элементам.

Деструктуризация может быть очень быстрым и простым способом доступа к элементам внутри ваших массивов. Javascript также позволяет деструктурировать объекты и строки почти таким же образом! Может быть, я расскажу об этом на следующей неделе.

Спасибо за чтение!