Деструктурируйте массив как профессионал

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

Структура может быть массивом или объектом. Оба имеют свои собственные шаблоны деструктурирования

В этой статье я покажу вам деструктирование массива деструктирование, которое немного проще, чем деструктурирование объекта.

Давайте начнем с нескольких простых примеров и перейдем к более сложным вещам. Если вы уже знакомы с основами, пропустите раздел «Простые».

🥱 Простой

Присвойте первые несколько значений из массива переменным a и b

const foo = () => [1, 2, 3]
let a, b
[a, b] = foo()
// a === 1 and b === 2

Присвоить первые несколько значений из массива константам a и b

const foo = () => [1, 2, 3]
const [a, b] = [1, 2, 3]
// a === 1 and b === 2

получить остальные вещи

const [a, b, ...otherStuff] = arr
// a === 1 and b === 2 and otherStuff === [3, 4, [5,6,7], 8, 9]

обмен значениями

[a, b] = [b, a]

😗 Средний

Укажите значения по умолчанию для учета пустых слотов и неопределенных значений.

const [ a, b = 100, c, ...rest ] = [1, undefined, , 4, 5 ]
// a === 1
// b === 100
// c === undefined
// rest === [4, 5]

Деструктурировать и реструктурировать

const obj = {};
[ obj.a, obj.b, obj.c = 200 ] = [1, 2, undefined]
// obj === { a: 1, b: 2, c: 200 }

Добавить резервный массив

Что, если массив, который вы пытаетесь деструктурировать, вовсе не является массивом? что, если это ложное значение, такое как undefined, null? Попытка деструктурировать такие значения вызывает ошибку, чтобы избежать таких ошибок, добавьте резервную структуру.

// foo() might return an array or undefined
const [a, b] = foo() || []
// if the foo returns undefined -> 
// a === undefined, b === undefined
// if the foo returns [1,2,3]
// a === 1, b === 2

🤨 Продвинутый

Многоуровневая деструктуризация массива

const [a, b, [c, d] ] = [ 1 , 2, [3, 4] ]
// a === 1
// b === 2
// c === 3
// d === 4

Многоуровневая деструктуризация массива + значения по умолчанию

const foo = () => [ , 2]
const  [ a = 100, b, [c, d] = [100, 200] ] = foo()
// a === 100
// b === 2
// c === 100
// d === 200

Полное присвоение + деструктуризация

const foo = () => [1,2,3,[4,5,6]]  
const x = [a, b, , ...other] = y = foo()  
// x === [1,2,3,[4,5,6]]
// y === [1,2,3,[4,5,6]]
// a === 1
// b === 2
// other === [ [4,5,6] ]

Множественная деструктуризация

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

const foo = () => [1,2,3,[4,5,6]]  
let a, b, rest  
[ x ,, ...rest ] = [a, b] = foo()
// x === 1
// a === 1
// b === 2
// rest === [ [4,5,6] ]

Подпишитесь на меня в Твиттере, чтобы узнать больше о JS 👏