Понимание деструктуризации массива в JavaScript

Чтобы изучить JavaScript или любой другой язык программирования, мы должны сначала понять основные функции и синтаксис языка. В этой статье мы сосредоточимся на современном JavaScript (ES6+) и углубимся в некоторые наиболее важные операторы, которые необходимо знать любому серьезному разработчику JavaScript.

Что такое деструктировать?

Деструктуризация — это функция ES6, которая по сути является способом распаковки значений из массива или объекта в отдельные переменные; Другими словами, деструктурирование — это разбиение сложной структуры данных на более мелкие структуры данных, такие как переменная. В массиве мы используем деструктурирование для извлечения элементов из массива и сохранения их в переменных.

Давайте сделаем несколько примеров вместе, чтобы полностью изучить концепцию.

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

const a = array[0]  

Мы устанавливаем «a» равным значению, которое находится в нулевой позиции массива.

Теперь давайте посмотрим на деструктуризацию. Чтобы деструктурировать массив, мы используем «[]» в левой части оператора присваивания. Мы объявляем все наши переменные внутри "[]" и устанавливаем их равными нашему массиву. Об остальном позаботится Javascript (посмотрите на пример выше). «a» становится первым элементом массива, «b» — вторым, а «c» — третьим, как мы и хотели.

Деструктуризация не ограничивает .

Деструктуризация не означает, что мы должны удалить все элементы из массива; мы можем взять только один, два или столько элементов, сколько захотим, и пропустить ненужные элементы. Взгляните на код ниже.

Пример 1: нас интересуют только первый и второй элементы массива, поэтому мы не объявляем третий элемент

Пример 2: Нас интересуют только первый и третий элементы массива, и мы пропускаем второй элемент. Как мы прыгаем, спросите вы? Взгляните на желтую записку на картинке; как видите, мы можем пропустить элемент, используя дополнительную запятую "," мы в основном оставляем пустое место для пропущенного элемента. Мы обращаемся только к первому и третьему элементам массива.

Вложенный массив = сложная деструктуризация

Хорошо, позвольте мне быть честным, нет такой вещи, как сложная деструктуризация , это точно то же самое; независимо от того, как выглядит ваша структура данных, у нас может быть массив с массивом (вложенным массивом), и наша простая техника деструктурирования работает отлично . Давайте посмотрим на пример ниже.

Пример: можете ли вы получить все элементы из массива ниже?

const arr = [1, 2, [3, 4]]

Я надеюсь, что вы попытаетесь сделать это сначала самостоятельно, не глядя на ответ ниже, но давайте рассмотрим это вместе.

Чтобы распаковать все элементы в «arr», мы можем использовать то, что мы узнали ( шаг 1 ), и мы замечаем, что «c» становится равным вложенному массиву [3,4], что означает, что нам нужно еще раз деструктурировать, чтобы получить доступ к элементам внутри вложенного массива ( шаг 2 ).

Заключение:

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

Не забудь подписаться на канал @za_frontend и поделится!