深入理解ES6之《解構》

angelayun發表於2017-08-20

物件解構

如果使用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 }) {
}

相關文章