ES6 对象的解构赋值

Posted 2020-11-20 jiqing9006

对象的解构赋值
解构不仅可以用于数组，还可以用于对象。

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

这里的foo，bar一定要对应。

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
    p: [
      'Hello',
      { y: 'World' }
    ]
};

let { p: [x, { y }] } = obj;
console.log(x) // "Hello"
console.log(y) // "World"

对象的解构也可以指定默认值。

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

默认值生效的条件是，对象的属性值严格等于undefined。

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null