深入理解ES6之《解构》

对象解构

如果使用var、let、const解析声明变量，则必须提供初始化程序（也就是等号右侧的值）
以下语句有语法错误

var { type, name };
let { type, name }
const { type, name }

解构赋值表达式（也就是右侧的表达式）如果为null或undefined会导致程序抛出错误，因为任何尝试读取null或undefined的属性的行为都会触发运行时错误

let node = {
 type: 'Identifier',
 name: 'angela'
}
let { type, name } = node

上面代码是声明type、name变量同时赋值node相应的属性值
那如果已经存在type、name，重新赋值 使用解构的话则需要在表达式两侧加小括号

let node = {
 type: 'Identifier',
 name: 'angela'
},
 type = 'demo',
 name = 1;
//添加小括号可以将块语句转化为一个表达式，从而实现整个解构赋值的过程
({ type, name } = node)

在任何使用值的地方你都可以使用解构赋值表达式

let node = {
 type: 'Identifier',
 name: 'angela'
},
 type = 'demo',
 name = 1;
function outputInfo(value) {
 console.log(value === node)
}
outputInfo({ type, name } = node)//true

解构还可以使用默认值

let node = {
 type: 'Identifier',
 name: 'angela'
}
let { type, name, value = true } = node

为非同名局部变量赋值

let node = {
 type: 'Identifier'
}
let { type: localType, name: localName = "angela" } = node
console.log(localType)//Identifier
console.log(localName)//angela

解构嵌套对象，很可能会无意中创建一个无效表达式，比方说下面的loc后的大括号则不需要，更好的做法是定义一个默认值

let { loc: { } } = node

数组解构

let colors = ['red', 'green', 'blue']
let [, , thirdColor] = colors

可以像如上所示只取数组第三个元素，忽略前两个

let colors = ['red', 'green', 'blue'],
 firstColor = 'black',
 secondColor = 'purple';
[firstColor, secondColor] = colors

对变量重新赋值利用解构时，数组解构不再需要左右两侧加小括号了
可能数组解构用的最多的莫过于交换值吧

let a = 1,
 b = 2;
[a, b] = [b, a]

同样数组解构中也可以添加默认值
数组解构中有一个不定元素的概念，可以通过...语法将数组中的其余元素赋值给一个特定的变量

let colors = ['red', 'green', 'blue'];
let [firstColor, ...restColors] = colors//restColors包含两个元素green和blue

concat方法的设计初衷是连接两个数组，如果调用时不传递参数就会返回当前函数的副本

let colors = ['red', 'green', 'blue'];
let cloneColors = colors.concat() //["red", "green", "blue"]

上述代码用ES6中不定元素也可以实现该目标

let colors = ['red', 'green', 'blue'];
let [...cloneColors] = colors //["red", "green", "blue"]

需要注意的是在被解构的数组中，不定元素必须为最后一个条目，在后面继续添加逗号会导致语法错误
解构参数

function setCookie(name, value, { secure, path, domain, expires }={}) {

}
setCookie("type", "js", { secure: true, expires: 6000 })

想的最全面的就是既使用解构又使用默认值

const setCookieDefaults = {
 secure: false,
 path: "/",
 domain: "example.com",
 expires: new Date(Date.now() + 360000000)

}
function setCookie(name, value,
 { secure = setCookieDefaults.secure,
  path = setCookieDefaults.path,
  domain = setCookieDefaults.domain,
  expires = setCookieDefaults.expires }) {
}