【JavaScript】配列の分割代入 | Arrayから一部の要素を取り出す方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptで配列(Array)から一部の要素(valu)を抽出・取り出す「Arrayの分割代入」について解説します。

前回は、Objectの分割代入を解説しました。

こちらもぜひCheckしてみてください！

【JavaScript】オブジェクトの分割代入 | Objectから一部の要素(key&value)を抽出・取り出す方法

【 Objectの分割代入】

1 配列(Array)の分割代入は、先頭から順番に格納される
2 残り部分をすべて格納するPattern
3 Default値を設定するPattern
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 参考・引用
7 最近の投稿

配列(Array)の分割代入は、先頭から順番に格納される

配列(Array)の分割代入とは、Array から要素を一部だけ取り出して変数に代入することを言います。

Arrayの分割代入では、要素は先頭から順番に格納されます。

また、「,」で取り出す順番をスキップすることができます。

上記のルールを押さえておけば、配列(Array)の分割代入は使えるはずです。

// < 配列の分割代入 >

// 1. 順番に格納するPattern

const robotamaDev = ['ロボ玉試作1号機', 'ロボ玉', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// Arrayの分割代入では、要素は先頭から順番に格納されます。
// 次のように「,」で順番を飛ばすこともできます。

let [ robo1, , robo2, robo3 ] = robotamaDev;
// => 2番目の要素(index-番号: 1)を飛ばす！

console.log({robo1}); // {robo1: 'ロボ玉試作1号機'}

console.log({robo2}); // {robo2: 'ロボ玉試作2号機'}

console.log({robo3}); // {robo3: 'ロボ玉試作3号機'}

残り部分をすべて格納するPattern

// 2. 残り部分をすべて格納するPattern

const robotamaDev2 = ['ロボ玉試作1号機', 'ロボ玉', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

let robo_group1, robo_group2;

// 「...」を利用すると残りの部分をすべて格納することができます。
[robo_group1, ...robo_group2] = robotamaDev2

console.log({robo_group1});
// {robo_group1: 'ロボ玉試作1号機'}

console.log({robo_group2});
// robo_group2: (3) ['ロボ玉', 'ロボ玉試作2号機', 'ロボ玉試作3号機']

Default値を設定するPattern

// 3. Default値を設定するPattern

const cats = ['白桃', 'ももちゃん'];

let hakutou, momo, pom;

// 「 key = value 」の形で Defalut-value を設定できます！
[hakutou, momo, pom='ぽむ'] = cats;

console.log({hakutou}); // {hakutou: '白桃'}
console.log({momo}); // {momo: 'ももちゃん'}
console.log({pom}); //  {pom: 'ぽむ'}

const robotaman = ['ロボ玉', 'ロボ玉試作1号機'];

// Default-value をよりも後から代入される値の方が優先される。
let [robotama, prototypeRobo='ロボ・ボール'] = robotaman;

console.log({robotama}); // {robotama: 'ロボ玉'}
console.log({prototypeRobo}); // {prototypeRobo: 'ロボ玉試作1号機'}