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

@leader22 https://t.co/74khHatTOz
このセクションです。ArgumentPropertyList は ArgumentRestProperty を持っておらず、末尾に ArgumentRestProperty が書かれています。

— Toru Nagashima (@mysticatea) 2016年9月5日

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()`やし。