学习ES6对象的解构赋值(上)

跟女同事一起学习,唠嗑了一个小时对象解构赋值.以下是个人的理解.仅供参考~~

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
对象的解构赋值的内部机制，是先找到同名属性，
然后再赋给对应的变量。真正被赋值的是后者，而不是前者

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
复制代码

上面是一碟小菜,下面准备上主菜

阮一峰老师的文章这样写道:

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

let { p: [x, { y }] } = obj;
console.log(x); // "Hello"
console.log(y); // "World"
console.log(p); // p is not defined
注意，这时p是模式，不是变量，因此不会被赋值。
复制代码

那什么是模式呢?

简单理解为,以一个对象的模式.p在上述例子中,属于一个键名.直接输出键名,必然报错.再举个例子

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

let {p: [x, { y:{aa} }],} = obj;

console.log(x); //Hello
console.log(y); //y is not defined,此处的y是键名.不是变量
复制代码

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

let {p: [x, { y }],} = obj; 

console.log(x); //Hello
console.log(y); //{aa: 'World'},此处y是一个变量
console.log(p); //p is not defined
复制代码

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

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