В текущей версии 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 также позволяет деструктурировать объекты и строки почти таким же образом! Может быть, я расскажу об этом на следующей неделе.
Спасибо за чтение!