Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
Синтаксис присваивания деструктурирования — это выражение JavaScript, доступное в ES6.
Как деструктор массивов
Синтаксис присваивания деструктурирования похож на массивы, в которых используются квадратные скобки [].
Но разница в том, что квадратные скобки находятся в левой части присваивания, чтобы определить, какие значения распаковывать из исходного массива.
Синтаксис деструктурирования массива
let arr = ['Krillin', 'Tien', 'Yamcha', 'Master Roshi']
let [krillin, tien, yamcha, roshi] = arr /* 👈 Destructuring - notice the [] assignment is on the left! */
console.log(`${krillin}, ${tien}, ${yamcha}, ${roshi}`)
Пример кода деструктурирования массива
Ниже у нас есть массив, и мы хотим получить 3 элемента и сохранить их как отдельные переменные.
Перед деструктурированием нам нужно было бы написать следующее:
let arrOfNames = ['Goku', 'Frieza', 'Beerus']
let goku = arrOfNames[0]
let frieza = arrOfNames[1]
let beerus = arrOfNames[2]
console.log(`${goku}, ${frieza}, ${beerus}`)
/* Expected Output: Goku, Frieza, Beerus */
Но с присваиванием деструктурирования мы можем выполнить эту операцию в сжатой форме, например так:
let arrOfNames = ['Goku', 'Frieza', 'Beerus']
let [ goku, frieza, beerus ] = arrOfNames
console.log(`${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.log(`${goku}, ${beerus}`)
Обратите внимание на пустое пространство между двумя запятыми, так мы пропускаем средний элемент, который нам не нужен.
"Что делать, если массивы вложены друг в друга?"
Вы получаете вложенные массивы, используя вложенную деструктуризацию следующим образом:
let arrOfNames = ['Vegeta', ['Piccolo', 'Gohan']]
let [ vegeta, [piccolo, gohan] ] = arrOfNames /* 👈 Notice the nested destructor */
console.log(`${vegeta}, ${piccolo}, ${gohan}`)
/* Expected Output: Vegeta, Piccolo, Gohan */
Обратите внимание на вложенный деструктор, который параллелен вложенному массиву.
Краткое содержание
Вот оно.
Выше мы говорили об использовании присваивания деструктуризации массивов в JavaScript.
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
Это полезно для разбивки массивов и выделения отдельных значений, которые вы хотите, в отдельные переменные.
Дальнейшее чтение
Ссылки
Если у вас есть какие-либо вопросы/предложения, вы можете связаться со мной ниже:
Следуйте за мной на Medium: Люк Слоан-Балджер
