解構不僅可以用於數組,還可以用於對象。

var {foo, bar} = {foo: "aaa", bar: "bbb"};
console.log(foo); //aaa
console.log(bar); //bbb

　對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。

var {bar, foo} = {foo: "aaa", bar: "bbb"};
console.log(foo) // aaa
console.log(bar) // bbb

var {baz} = {foo: "aaa", bar: "bbb"};
console.log(baz); // undefined

以上的代碼中的第一個例子,等號左邊兩個變量的次序與等號右邊兩個同名屬性不一致。但是對取值完全沒有影響。第二個例子中,變量沒有相應的同名屬性,導致取不了值,最後等於undefined.

如果變量名與屬性名不一致,必須寫成下面這樣。

var {foo: baz} = {foo: "aaa", bar: "bbb"};
console.log(baz); // aaa

let obj = {foo: "aaa", bar: "bbb"};
let {foo: f, bar: b} = obj;
console.log(f); // aaa
console.log(l); // bbb

這實際上說明,對象的解構賦值是以形式的簡寫

var {foo: f, bar: b} = {foo: "aaa", bar: "bbb"};

Es6 -- 對象的解構賦值