《JavaScript》ES6の分割代入のはじめかた。

分割代入は、配列とオブジェクトを分解して、要素とプロパティ値をひとつひとつの変数に分解するための構文です。

元々の仕様では個々の要素にアクセスし変数に格納する必要がありましたが、ES6の分割代入では記述を簡潔にまとめることができます。

配列の分割代入

代入先の変数を[]で配列のように囲って列挙して記述します。

// 分割代入なし
// - - - - - - - -

var list = [10,20,30,40,50];

var item0 = list[0];
var item1 = list[1];
var item2 = list[2];
var item3 = list[3];
var item4 = list[4];

// 分割代入
// - - - - - - - -

let list = [10,20,30,40,50];
let [item0,item1,item2,item3,item4] = list;

配列の残りをまとめる

...演算子を使うと、個々の変数に割り当てられなかった残りの要素をまとめて配列として切り出すことが可能です。

let list = [10,20,30,40,50];
let [item0,item1,...other] = list;

alert(other); // [30,40,50]

変数の値を入れ替える

分割代入を利用すると、変数の値を入れ替えることができます。

let x = 500;
let y = 1000;

[x,y] = [y,x];

オブジェクトの分割代入

配列で行った分割代入のように、オブジェクトのプロパティを変数に分解することもできます。

オブジェクトの場合は{}で囲った変数名で個々の変数に分解します。

変数の並び順はプロパティの定義順と違っていても、分解しないプロパティがあってもokで、対応するプロパティがない場合は無視されます。
無視された場合のデフォルト値を左辺で指定することができます。

let nami = {
  name: 'Nami',
  age: 20,
  weapon: 'magic tact'
}

let {age, name, dream = 'making world map'} = nami;

dreamにはプロパティが存在しなかったので、デフォルト値がセットされています。

入れ子のオブジェクト

入れ子になったオブジェクトは、オブジェクトとして変数に格納することも、obj: {key}という形で値を抽出することも可能です。

let nami = {
  name: 'Nami',
  age: 20,
  hair: {
    length: 'long',
    color: 'orange'
  }
}

let {hair, hair:{color}} = nami;

console.log(color); // orange

プロパティとは異なる変数へ代入

key: newKeyと記述すると元のプロパティと異なる名前の変数に値を割り当てることが可能です。

let nami = {
  name: 'Nami',
  age: 20,
  weapon: 'magic tact'
}

let {age: namiAge, name: namiName} = nami;

console.log(namiName); // Nami

おわります。