Javascriptのデストラクチャリング(配列)

基本構文

const [変数、変数、変数] = arr

例

このようなフルーツの配列があったとして

const fruits = ["Apple", "Banana", "Orange", "kiwy", "Peach", "pineApple"];

Apple,Banana,Orangeを取得したかったら

const fruits = ["Apple",
"Banana", "Orange", "kiwy", "Peach", "pineApple"];

let fruit1 = fruits[0]; /*Apple*/
let fruit2 = fruits[1]; /*Banana*/
let fruit3 = fruits[2]; /*Orange*/
console.log(fruit1, fruit2, fruit3); /*Apple, Banana, Orange*/

というようにそれぞれに対して変数を宣言し
インデックスを指定した文を書かないといけなかったけど
デストラクチャリングなら

const fruits = ["Apple", "Banana", "Orange", "kiwy", "Peach", "pineApple"];

const [fruit1, fruit2, fruit3] = frutis
console.log(fruit1, fruit2, fruit3); /*Apple, Banana, Orange*/

というふうに
インデックスを指定しなくても[fruit1, fruit2, fruit3] の順に
インデックス0のものから代入できる。

また要素を飛ばして取得したい場合は

const fruits = ["Apple", "Banana", "Orange", "kiwy", "Peach", "pineApple"];

const [fruit1, ,fruit3] = frutis 
console.log(fruit1,fruit3) /*Apple, Orange*/

というようにカンマで区切って要素を飛ばすことができる。

ネストされた配列

const fruits = ["Apple", "Banana", "Orange", ["kiwy", "Peach", "pineApple"]];

const [fruit1, fruit2, fruit3, [fruit4, fruit5, fruit6]] = fruits;
console.log(fruit4, fruit5, fruit6);  /*kiwy Peach pineApple */

宣言するときにネストさせてあげれば代入できる。

次はオブジェクトのデストラクチャリングを学ぶので

次回はそのアウトプットを行おうと思います！