Javascript ES6の分割代入（destructuring)の使い方まとめ: 配列とオブジェクトそれぞれの場合: Descructuring for Arrays and Objects

2019年08月14日 2019年08月14日

キョウコ

分割代入を使うと配列の値やオブジェクトのプロパティを取り出し、別の変数に代入することができます。スプレッド構文のような配列やオブジェクト自体の完全コピーとは違い、分割代入では配列やオブジェクトの「一部」の値やプロパティにだけアクセスして別の変数に代入することが可能なのが特徴です。

配列に分割代入(destructuring)を使う場合

例その１：返り値の無視

const numbers = [1,2,3];
[num1, ,num3] = numbers;
console.log(num1, num3);　

//1
//3

num1とnum3の間に, ,があり、num2に代入していなく戻り地も無視しているケースです。（Mozillaの説明ページにも似たような例がありました。）

例その２：簡単な使い方

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); //prints 2
console.log(array); //prints [1, 2, 3]

aに1、bに2が代入されています。最後のconsole.log(array)では、元々のarray [1, 2, 3] が結果として表示されるのがポイントですね。

オブジェクトに分割代入(destructuring)を使う場合

const myObj = {
name: 'Max',
age: 28
 }

const {name} = myObj;

ここで、console.log(name); とすると、'Max'とconsoleに表示されます。
console.log(age);では、undefined(またはエラー）となってしまい、何も取り出せません。
console.log(myObj); では、元のmyObjの中身｛name: 'Max', age:28} が表示されます。