ES2015における分割代入の使い方まとめ

ES2015における分割代入の使用例

使う場面：

１．複数の変数の宣言・代入を一つの文の中で行うことができる
２．データの代入元がオブジェクトのプロパティ群、或いは配列となります。

使い方：

１．オブジェクトの分割代入

１．宣言なしで代入のみを行う

• データ元となるオブジェクトのプロパティ名と一致する変数にのみ対して代入を行う。
• {}がブロック構文と解釈されないために、 ()で囲む必要がある。

    const obj1 = {
      a: 1,
      b: 2,
      c: 3
    };

    let b, c;
    ({ b, c } = obj1);
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`c:${c}`);  // 出力結果：c:3

２．宣言と代入を同時に行う

• 変数宣言に使うキーワードconst、letを使うこと
• ()をつける必要がない
• オブジェクトのプロパティ名と一致する変数名が必要

    const obj1 = {
      a: 1,
      b: 2,
      c: 3
    };

    const { b, c } = obj1;
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`c:${c}`);  // 出力結果：c:3

２．配列の分割代入

１．宣言なしで代入のみを行う

• 左辺に並べた変数を[]で囲む
• 右側の配列要素に対応して順番に代入していきます。
• 残りの要素を捕捉して配列型変数に渡せる

    const obj1 = [1, 2, 3, 4];

    let a, b, rest;
    [a, b, ...rest] = obj1;
    console.log(`a:${a}`);  // 出力結果：a:1
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`rest:${rest}`);  // 出力結果：rest:3,4

２．宣言と代入を同時に行う

• 変数宣言に使うキーワードconst、letを使うこと

    const obj1 = [1, 2, 3, 4];

    const [a, b, ...rest] = obj1;
    console.log(`a:${a}`);  // 出力結果：a:1
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`rest:${rest}`);  // 出力結果：rest:3,4

応用

配列分割代入を使うと、変数の値の入れ替えは簡単にできにできます。

let a = 5, b = 10;
[a, b] = [b, a];  // 一時的な変数を使わずに済む
    console.log(`rest:${rest}`);  // 出力結果：rest:3,4