JavaScript: деструктуризация массива (ES6)
Полное руководство по извлечению значений из массивов
Назначение деструктуризации - это функция, представленная в ECMAScript 2015 (ES6), которая позволяет нам получать доступ к значениям массивов или свойствам объектов, а затем легко присваивать их отдельным переменным. Обсуждение возможностей деструктуризации в массивах будет нашей основной целью в этом сообщении в блоге.
Начнем с примера, поясняющего базовое назначение переменных с деструктуризацией массива:
Элементы в массиве colors присвоены трем переменным; color1, color2 и color3 с использованием деструктуризации массива. Обратите внимание, что переменные устанавливаются слева направо, и каждая переменная сопоставляется с соответствующим элементом с тем же индексом в массиве colors.
Значения по умолчанию
Если создано больше переменных, чем значений в массиве, который он распаковывает, каждой лишней переменной будет присвоено значение undefined. Деструктуризация массива позволяет нам присваивать переменным значения по умолчанию, если у них нет соответствующего элемента массива с тем же индексом.
В первой части приведенного ниже примера значение undefined присваивается переменной с именем color3, потому что у нее нет ни соответствующего элемента в массиве colors, ни значения по умолчанию.
После установки значений по умолчанию для переменных во второй части примера, значения переменных color1 и color2 заменяются на red и blue соответственно. Значение color3 изменяется с undefined на yellow, что является назначенным ему значением по умолчанию.
Пропуск некоторых ценностей
Деструктуризация позволяет нам игнорировать определенные возвращаемые значения, которые мы не хотим присваивать переменным, и позволяет нам присваивать только те, которые нам интересны.
Как вы видите в приведенном выше примере, мы можем пропустить второй элемент массива colors, используя разделитель запятой . Переменным присваиваются только значения red и yellow, а для пропущенного значения используется запятая; blue.
Оператор отдыха
Используя arest operator (…), мы можем назначить некоторые элементы массива переменным, а оставшуюся часть - конкретной переменной:
color1 и color2 принимают первые два значения в массиве, а оператор rest помещает остальные элементы массива в переменную colorRest. Оператор rest всегда появляется как последний элемент в массиве деструктуризации.
Обмен переменными
Еще одна полезная функция деструктуризации массива - замена переменных. Раньше создание временной переменной для хранения копии одного из замененных значений было способом изменить порядок двух значений в массиве, которому они назначаются. Теперь две переменные можно легко поменять местами в одном выражении деструктуризации, например:
Деструктуризация с помощью функций
Мы также можем извлечь значения массива, возвращаемые при выполнении функции, чтобы иметь возможность легко получить доступ к ее элементам. Вот краткий пример:
В этом примере показано, как деструктурируется возвращаемый массив из трех цветов из функции colors().
Заключение
Синтаксис деструктуризации массива ES6 помогает нам писать краткий и более читаемый код за счет сокращения строк, используемых для объявления дополнительных переменных, и извлечения только тех значений, которые нам нужны.
Другой мой пост посвящен основам деструктуризации объектов в JavaScript, не стесняйтесь взглянуть:
JavaScript: деструктуризация объектов (ES6)
Спасибо, что прочитали мой пост, и не стесняйтесь проверить Веб-документацию MDN и Разрушение ES6: Полное руководство, если вы хотите узнать больше по этой теме.
