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