В JavaScript можно деструктурировать не только объекты, но и массивы. Существует формат присвоения, при помощи которого можно создавать имена новых переменных так, чтобы значения в этих переменных подхватывались из значений самого массива.
В данном случае последовательность будет иметь значение. Это накладывает ряд ограничений на использование деструктуризации массива.
let arr = [5, 6, 7]; let [a, b, c] = arr;
Давайте посмотрим на простой результат данной деструктуризации массива. Количество создаваемых новых переменных равно количеству элементов массива.
Теперь у нас есть отдельные переменные с именами «a«, «b» и «c«, в которых лежат числовые значения, как в последовательности элементов массива. Называть переменные можно как угодно в случае с массивом.
Первой в списке была переменная «a«, поэтому ей было присвоено значение 5.
Деструктурирование массива с вычислением дополнительной переменной
В процессе деструктуризации массива в JavaScript можно создавать дополнительные имена переменных, которые будут вычисляться из других создаваемых переменных. Имеется ввиду, что количество создаваемых переменных может быть больше, чем элементов в массиве.
Например.
let arr = [4, 6, 8]; let [a, b, c, f = a + b] = arr;
Давайте посмотрим на результат данной деструктуризации массива с вычислением дополнительной переменной «f«.
В переменной «a» у нас находится число 4. В переменной «b» находится число 6. Тогда в переменной «f» будет лежать число 10. (результат сложения 4 и 6).
Важно отметить, что переменная «f» выпадает из общего количества элементов массива, а значит может быть рассчитана на основе других значений из новых переменных.
Нюансы при деструктуризации массива в JavaScript
Последовательность объявлений переменных в квадратных скобках после оператора «let» имеет значение.
Нельзя присвоить иное вычисляемое значение и получить вычисленный результат, если переменная занимает позицию какого-то элемента в массиве
Например:
let arr = [4, 6, 8]; let [a, b=a+100, c] = arr;
Мы хотим сделать переменную «b» вычисляемой. Вроде «a» у нас уже объявилась, вроде число 100 не должно вызывать никаких проблем так как это примитивное значение, но мы всё равно не получаем итоговое значение в 104. Так происходит потому, что положение переменной «b» актуально для положения элемента в массиве. Число 6 находится на второй позиции и переменная «b» тоже находится на второй позиции. В итоге число 6 просто копируется в «b«.
Нельзя присваивать значение одной переменной до объявления другой переменной
Например:
let arr = [1, 2, 9]; let [a, b, c, f=a+x, x=a+100] = arr;
Мы получим ошибку «Uncaught ReferenceError: x is not defined«. Это справедливо, так как мы пытаемся обратиться к переменной «x» при вычислении значения «f«. В этот момент времени переменной «x» ещё не существует.
Это означает, что деструктуризация массива или объекта подчиняется обычным правилам видимости переменных.
Вычисляемое значение для переменной можно получить только за пределами длины массива, если он полный (если все индексы существуют)
Мы можем создавать любое количество вычисляемых переменных за пределами длины массива.
let arr = [5, 6]; let [a, b, c=a+b, f=a*b, x=c-f] = arr;
Результат присвоения
Для несуществующих индексов массива вычисления становятся возможными в местах «дырок»
Мы можем литерально объявить массив и накидать в него запятых. Это будет символизировать пустоты в индексах.
let arr = [5,,,,6]; let [a, b, c=a+b, f=a*b, x=c-f, y=a+b, z=a+x] = arr;
Результат:
Пустоты в массиве не ассоциируются с занятыми местами, а значит значения в данных переменных могут быть вычисленными.
Поведение при не целочисленных индексах массива
Объявим массив. Затем добавим значений в не целочисленные ключи.
let arr = [5,6]; arr[-2]=77; arr['qwe']=88; let [a, b, c, d] = arr;
Смотрим на результат деструктуризации по массиву с не целочисленными ключами
Информационные ссылки
Стандарт ECMAScript — Раздел «13.15.5 Destructuring Assignment» — https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-destructuring-assignment
