Es6 -- 对象的解构赋值

Posted 2020-11-03 qjuly

解构不仅可以用于数组,还可以用于对象。

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"};