JSの分割代入
create: 2019-10-1
JavaScript

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 番目をそれぞれの変数に代入しているだけなんだけど、01もコードにでてこないのがイイ。

もうちょっと深堀り

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

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

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

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

デフォルト値の代入。

undefined のときだけ初期値が使われます。
0falseなどの 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 }