ES6 分割代入

いずれもIE11は動作しない。
配列の残りの代入(Rest in arrays)のみ、Safari(含むiOS)で動作しないので注意。

配列の分割代入

let ary = [10, 20, 30, 40];

// 宣言と代入をまとめて
let [assigned_1, assigned_2, assigned_3, assigned_4] = ary;

// 宣言した後に代入も可能
let assigned_1, assigned_2, assigned_3, assigned_4;
[assigned_1, assigned_2, assigned_3, assigned_4] = ary;

// 受け取らないことも可能
let [assigned_1, assigned_2] = ary;

// 初期値をセットすることも可能
let [assigned_1 = 100, assigned_2 = 100, assigned_3 = 100, assigned_4 = 100, assigned_5 = 100] = ary;
console.log(assigned_1, assigned_2, assigned_3, assigned_4, assigned_5); // 10, 20, 30, 40, 100

// 配列の残りをまとめて代入※Safari未対応
let [assigned_1, assigned_2, ...other_assined] = ary;
console.log(other_assined); // [30,40]

// 変数の入れ替え
let a = 3;
let b = 5;
[a, b] = [b, a];

オブジェクトの分割代入

let obj = {
 name:'kitamura',
 age:40
};

// 宣言と代入をまとめて
let {name, age} = obj;
console.log(name, age); // 'kitamura', 40

// 宣言した後に代入も可能
let name, age;
({name, age} = obj);
// 前後の () は必須。また前の行の末尾の ; も必要。

// 別の名前の変数に代入
let {name:new_name, age:new_age} = obj;
console.log(new_name, new_age); // 'kitamura', 40
// この場合、 name と age は宣言されてない

// 初期値をセットすることも可能
let {name = 'ななし', age = 20, country = 'japan'} = obj;
console.log(name, age,country); // 'kitamura', 40, 'japan'

// 別の名前の変数に代入でも初期値をセットすることも可能
let {name:new_name = 'ななし', age:new_age = 20, country:new_country = 'japan'} = obj;
console.log(new_name, new_age, new_country); // 'kitamura', 40, 'japan'

// 入れ子になったオブジェクトの分割代入
let obj_nested = {
 name:'kitamura',
 age:40,
 children:[
  {
   name:'taro',
   age:8
  }
 ]
};

let {
 name:new_name,
 children:[
  {
    name:new_child_name
  }
 ]
} = obj_nested;
console.log(new_name, new_child_name); // 'kitamura', 'taro'


分割代入を使った書き方例

// イテレーター
let students = [
 {
   name : 'taro',
   id:1,
   programs:{
     a:'hoge',
     b:'fuga'
   }
 },
 {
   name : 'jiro',
   id:2,
   programs:{
     a:'hoge2',
     b:'fuga2'
   }
 },
];

for(let {name:n, programs:{a:p}} of students){
  console.log(n,p); // 'taro', 'hoge' ⇒ 'jiro', 'hoge2'
}

students.forEach(function({name:n, programs:{a:p}}){
  console.log(n,p); // 'taro', 'hoge' ⇒ 'jiro', 'hoge2'
});

// 引数分割束縛
hogefunc(obj){
  console.log(obj.hoge);
}
// のように、渡されるobjのhogeしか使用しない場合は以下のような書き方をするとシンプルになる
hogefunc({hoge}){
  console.log(hoge);
}