ES6解构赋值-对象

ES6解构赋值-对象

1.对象的解构赋值，与数组书写格式有点不同。在对象解构中，不是像数组解构一样，按顺序索引，直接解构匹配。而是根据 匹配条件 与对象中的属性名进行匹配。匹配成功的(匹配条件==属性名)，就能取到值，匹配不到的同理值为undefined.

 let {name,age}={name:'张三',age:18};//    {name:name,age:age}={name:'张三',age:18}
 console.log(name,age);//张三     18

这里的name 与 age 其实是匹配条件，因为当匹配条件与变量名相同时，可以简写省略后面的。====={匹配条件:变量}=obj

let {name:a,age}={name:'张三',age:18};
console.log(a,age);
//此时想获取对象内name属性 需要访问a ,因为a 才是变量，a前面的
//name只是匹配条件， 相当于规定a 要匹配的属性是什么。

同样的如果没有匹配到，则值为undefined.

let  {name:a,age}={age:18};
console.log(a,age);//undefined    18

设置默认值

let {name='李四',age}={age:18};
console.log(name,age);//李四   18

如果匹配到，也会跟数组解构中一样取匹配到的值而不取默认值(除非值为undefined)。(惰性取值)

let {name='李四',age}={name:'张三',age:18};
console.log(name,age);//张三   18

对象的解构其他与数组的解构类似，这里就不一一叙述了

2.数组，对象解构混合使用：

let {name,arr:[x],age}={name:'张三',arr:[1],age:20}
console.log(name,x,age);//张三    1    20

可以看到首先对象解构 – arr匹配，再数组解构，按顺序(索引)匹配-----x=1;
更复杂的嵌套，总之，碰到数组就用数组解构，碰到对象就对象解构。嵌套亦是如此。

let [x,{name:[y],z}]=[1,{name:[2],z:3}];
console.log(x,y,z);//1  2  3

在加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

 const    {mapState,mapGetters,mapActions}=require('vuex'); //   ES5写法
 import   {mapState,mapGetters,mapActions}   from   'vuex'    //ES6写法