ES6 结构赋值

对象解构

　　对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量

let node = {
type: "Identifier",
name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name, value } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined

连续解构赋值

在回调函数传参为对象的时候，如果需要直接在函数中操作对象的属性中的值，可以在参数中直接使用解构赋值或者连续解构赋值

//普通使用
props($router){
     return {id:$route.query.id,title:$route.query.title}  
}
//解构赋值使用
props({query}){
     return {id:query.id,title:query.title}  
}
//连续解构赋值使用
props({query:{id,title}}){
     return {id:,title}  
}

 

数组解构

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

在这段代码中，我们从colors数组中解构出了"red"和"green"这两个值，并分别存储在变量firstColor和变量secondColor中。在数组解构语法中，我们通过值在数组中的位置进行选取，且可以将其存储在任意变量中，未显式声明的元素都会直接被忽略

也可以在数组解构赋值表达式中为数组中的任意位置添加默认值，当指定位置的属性不存在或其值为undefined时使用默认值