Что такое деструктуризация массива в JavaScript?

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

Синтаксис назначения деструктуризации - это выражение JavaScript, которое стало доступно в ES6.

Как деструктурировать массивы

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

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

Синтаксис деструктуризации массива

let arr = ['Krillin', 'Tien', 'Yamcha', 'Master Roshi']
let [krillin, tien, yamcha, roshi] = arr /* 👈 Destructuring - notice the [] assignment is on the left! */ 

console.info(`${krillin}, ${tien}, ${yamcha}, ${roshi}`)

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

Ниже у нас есть массив, и мы хотим получить 3 элемента и сохранить их как отдельные переменные.

До деструктуризации нам пришлось бы написать следующее:

let arrOfNames = ['Goku', 'Frieza', 'Beerus']
let goku = arrOfNames[0]
let frieza = arrOfNames[1]
let beerus = arrOfNames[2]

console.info(`${goku}, ${frieza}, ${beerus}`)

/* Expected Output: Goku, Frieza, Beerus */

Но с помощью деструктуризации мы можем выполнить эту операцию в сжатом виде, например, так:

let arrOfNames = ['Goku', 'Frieza', 'Beerus']
let [ goku, frieza, beerus ] = arrOfNames

console.info(`${goku}, ${frieza}, ${beerus}`)

/* Expected Output: Goku, Frieza, Beerus */

"Что если мне не нужно конкретное значение массива, которое случайно попало в середину?".

Вы можете легко пропустить значение, записав синтаксис деструктуризации следующим образом:

let arrOfNames = ['Goku', 'Frieza', 'Beerus']
let [ goku, , beerus ] = arrOfNames /* 👈 Notice the empty space between the two commas, this is how we skip the middle element(s) */

console.info(`${goku}, ${beerus}`)

Обратите внимание на пустое пространство между двумя запятыми - так мы пропускаем средний элемент, который нам не нужен.

"А что если массивы вложенные?".

Вы получаете вложенные массивы, используя вложенную деструктуризацию следующим образом:

let arrOfNames = ['Vegeta', ['Piccolo', 'Gohan']]
let [ vegeta, [piccolo, gohan] ] = arrOfNames /* 👈 Notice the nested destructor */

console.info(`${vegeta}, ${piccolo}, ${gohan}`)

/* Expected Output: Vegeta, Piccolo, Gohan */

Обратите внимание на вложенный деструктор, который параллелен вложенному массиву.

Резюме

Вот и все.

Выше мы рассказали об использовании назначения деструктуризации массивов в JavaScript.

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

Это полезно для разбиения массивов и выделения отдельных значений, которые вам нужны, в отдельные переменные.

Дальнейшее чтение

Назначение деструктуризации - JavaScript | MDN

Ссылки

Если у вас есть какие-либо вопросы/предложения, вы можете связаться со мной ниже:

Linkedln

Twitter