深刻理解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 }) {
}