ES6 对象的解构赋值

Posted jiqing9006

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 对象的解构赋值相关的知识,希望对你有一定的参考价值。

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

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

以上是关于ES6 对象的解构赋值的主要内容,如果未能解决你的问题,请参考以下文章

ES6 解构赋值

ES6数组的解构赋值( 下)

ES6学习 第二章 变量的解构赋值

阮一峰老师的ES6入门:变量的解构赋值

es6 解构赋值

ES6新特性3:变量的解构赋值