🧊

Object Rest/Spread Propertiesの気になる挙動

Object Rest/Spread Properties

この記事を書いてる時点でStage 2。

// Rest properties
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

// Spread properties
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

スプレッド演算子の挙動がオブジェクトのプロパティでも使える便利なやつ。
ご利用はBabelのプラグインからどうぞ。

babel/packages/babel-plugin-transform-object-rest-spread at master · babel/babel · GitHub


いまBabelでこれを使うときに、「こうするとどうなる？」を試したメモがこの記事です。
決して仕様通りに動かねーじゃねーか！とかそういのではないです。



複数のオブジェクトをRestすると？

let A = { a: 1, b: 2, c: 3, d: 4 };

let { a, ...x, b, ...y } = A;

console.log(x); // {"b":2,"c":3,"d":4}
console.log(y); // {"c":3,"d":4}

受ける変数より先に指定されてたキーを除くオブジェクトが代入されるらしい。

ちなみにコレ、Specでは書かれてないけどBabelだと動く系のやつらしい。
Issueもあった -> https://phabricator.babeljs.io/T7265

thx!

オブジェクトじゃないやつをSpreadしたらどうなる？

let a = 'a', b = 2, c = false, A = { A: 'A' }, B = ['B', 'BB'];

let x = { ...a, ...b, ...c }
let y = { ...a, ...b, ...c, ...A, ...B }

console.log(x); // {"0":"a"}
console.log(y); // {"0":"B","1":"BB","A":"A"}

どうやらItterableなやつなら展開されるがそうでないものは何もしないっぽい。
文字列はItterableなので、一文字ずつ展開されるけど、同名のプロパティを後から指定すると上書きになるらしい。

複数のオブジェクトをSpreadすると？

let a = { a: 1 }, b = { b: 2 };

let x = { ...a, ...b };

console.log(x); // {"a":1,"b":2}

普通にできる便利なやつ。
というかコレただの`Object.assign()`やし。