JSの分割代入

JavaScript の分割代入を覚えると、お決まりのコードが簡単にかけます。
従来の JavaScript しかしらないとなにしてるかわからないので、しっかり身につける。

配列の分割代入

クエリパラメータの分割など、よくある=で key と value がセットになっている文字列を分解して代入したい。

従来のコード。
代入時に0とか1がでてくるのがなんかかっこ悪い。

const keyValue = "a=b".split("=");  

const key = keyValue[0];  
const value = keyValue[1];  

console.log(key, "=", value); // a = b  

分割代入コード

const [key, value] = "a=b".split("=");  

console.log(key, "=", value); // a = b  

ウルトラスッキリ！
考え方はあいかわらず配列の 0 番目、1 番目をそれぞれの変数に代入しているだけなんだけど、0も1もコードにでてこないのがイイ。

もうちょっと深堀り

他にも便利な記述ができるみたいです。

先頭２つまでとそれ以外にわける

const org = [0, "a", "b", null, 1];  

const [a1, a2, ...a3] = org;  
console.log(a1, a2, a3); // 0 'a' ['b', null, 1]]  

デフォルト値の代入。

undefined のときだけ初期値が使われます。
0やfalseなどの falsy な値ではないこと注意。

const org = [0, false, null, undefined, 1, NaN];  

// デフォルト値を入れておく  
const [  
  b1 = "B1",  
  b2 = "B2",  
  b3 = "B3",  
  b4 = "B4",  
  b5 = "B5",  
  b6 = "B6",  
  b7 = "B7"  
] = org;  

// undefinedの値だけデフォルト値が適用される  
console.log(b1, b2, b3, b4, b5, b6); // 0 false null 'B4' 1 NaN 'B7'  

オブジェクトの分割代入

配列だけではなく、オブジェクトも分割代入できます。
もちろん、デフォルト値も入れられます。

const org = {  
  a: "a",  
  b: 1,  
  c: null,  
  d: { d1: 1, d2: 2 }  
};  

const { a, b = "B", c, d, e = "E", f } = org;  

console.log(a, b, c, d, e, f); // a 1 null { d1: 1, d2: 2 } 'E' undefined  

オブジェクトコピーの作成

const org = {  
  a: "a",  
  b: 1,  
  c: null  
};  

const refObj = org; // ただの参照コピー  
const { ...newObj } = org; // 分割代入で新規オブジェクトを作成  

org.b = 2; // オリジナルのプロパティを書き換え  

// コピーなのでオリジナルの値を書き換えてもnewObjには影響しない  
console.log(newObj); // {a: "a", b: 1, c: null}  

// 参照は当然オリジナルの変更が影響する  
console.log(refObj); // {a: "a", b: 2, c: null}  

特定項目とそれ以外

const org = {  
  a: 1,  
  b: 2,  
  c: 3,  
  d: 4  
};  

const { a, b, ...other } = org;  
console.log(a, b, JSON.stringify(other)); // 1 2 {"c":3,"d":4}  

オブジェクトのマージ

デフォルトオプションと固有オプションをマージしたいときに。
同名プロパティは後勝ちです。

const defaultParam = { a: 1, b: 2 };  
const options = { b: 3, c: 4 };  
const merged = {  
  ...defaultParam,  
  ...options  
};  
console.log(merged); // Object { a: 1, b: 3, c: 4 }