深入理解ES6 005【學習筆記】

解構：使用數據訪問更便捷

如果使用var、let或const解構聲明變量，則必須要提供初始化程序（也就是等號右側的值）如下會導致錯誤

// 語法錯誤
var {tyep,name}

// 語法錯誤
let {type,name}

// 語法錯誤
const {type,name}

使用解構給已經聲明的變量賦值，哪下

let node = {
  type:"Identifier",
  name:"foo"
},
type = "Literal",
name = 5;

// 使用解構語法為多個變量賦值 ，請注意一定要使用小括號包裹解構賦值的方法（js引擎將一對開放的花括號視為一個代碼塊，而語法規定，代碼塊語句不允許出現在賦值語句側，添加小括號後可以將語句轉化為一個表達式
({type,name}=node)
console.log(type) // Identifier
console.log(name) // foo

解構賦值表達式的值與表達式右側（也就是=右側）的值相等，如此一來，在任何可以使用值的地方你都可以使用解構賦值表達式，如下：

let node = {
  type:"Identifier",
  name:"foo"
},
type = "Literal",
name = 5;

function outputinfo(value){
  console.log(value===node); // true
}

outputinfo({type,name} = node);

console.log(type) // "Identifier"
console.log(name) // "foo"
// 表達式的值為右側的值，這個寫法是value傳的是node,並給type和name進行了賦值
// 調用outputInfo()函數時傳入了一個解構表達式，由於javascript表達式的值為右側的值，因此此處傳入的參數等同於node，且變量type和name被重新賦值，最終將node傳入outputInfo()函數

解構賦值表達式（也就是=右側的表達式）如果為null或undefined會導致程序拋出錯誤。任何嘗試讀取null或undefined的屬性的行為都會觸發運行時錯誤。

默認值

使用解構賦值表達式時，如果指定的局部變量名稱在對象中不存在，那麼這個局部變量會被賦值為undefined

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

// 默認值 當指定屬性不存在時，可以隨意定義一個默認值，在屬性名稱後添加一個等號(=)和相應的默認值即可

let node = {
  type:"Identifier",
  name:"foo"
}
let {type,name,value=true} = node; // 只有當node上沒有該屬性或者該屬性值為undefined時該值才生效
console.log(type) //Identifier
console.log(name) // foo
console.log(value) // true

非同名局部變量賦值

解構賦值使用的都是與對象屬性同名的局部變量，例如，node.type的值被存儲在了變量type中。但如果你希望使用不同命名的局部變量來存儲對象屬性的值，

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

// 不同名本地變量，並使用默認值
let node = {
  type:"Identifier"
}
let {type:localType,name:localName="bar"} = node;
console.log(type) //Identifier
console.log(name) // bar

嵌套對象解構

解構嵌套對象仍然與對象字面量的語法相似，可以將對象拆解以獲取你想要的信息

let node = {
  type:"Identifier",
  name:"foo",
  loc:{
    start:{
      line:1,
      column:1
    },
    end:{
      line:1,
      column:4
    }
  }
}
let {loc:{start}} = node;
console.log(start.line); // 1
console.log(start.column); // 1

// 使用不同的名的本地變量來
let node = {
  type:"Identifier",
  name:"foo",
  loc:{
    start:{
      line:1,
      column:1
    },
    end:{
      line:1,
      column:4
    }
  }
}
let {loc:{start:localStart}} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1

下面這條語句，由於右側只有一對花括號，因而其不會聲明任何綁定，loc不是即將創建的綁定，它代表了在對象中檢索屬性的位置。

// 未聲明任何變量！
let {loc:{}} = node

數組解構

與對象解構的語法相比，數組解構就簡單多了，它使用的是數組字面量，且解構操作全部在數組內完成，而不是像對象字面量語法一樣使用對象

let colors = ["red","green","blue"]
let [firstColor,secondColor]=colors
console.log(firstColor) //red
console.log(firstColor) // green
// 只為感興趣的元素提供變量，切記，在這個過程中，數組本身不會發生任何變化
let [,,thirdColor] = colors;
console.log(thirdColor) // blue

數組解構賦值

數組解構賦值上下文，但不需要用小括號包裹表達式、

有關數組解構賦值的這些語法已經足夠使用了，數組解構語法還有一個獨特的用例：變量交換的應用

如果右側數組解構賦值表達式為null或undefined，則會導致程序拋出錯誤，這一特性與對象解構值很相似

let a = 1, b = 2;
[a,b] = [b,a];
console.log(a)  // 2
console.log(b)  // 1

嵌套數組解構

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

不定元素

可以通過...語法將數組中的其餘元素賦值給一個特定的變量，

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

es5經常使用concat()方法來克隆數組，如果調用時不傳遞參數就會返回當前函數的副本。es6可以通過不定元素的語法來實現相同的目標

// es5
var colors = ["red","green","blue"];
var clonedColors = colors.concat();
console.log(clonedColors) // [red,green,blue]
// es6
let colors = ["red","green","blue"];
let [...clonedColors] = colors;
console.log(clonedColors); // [red,green,blue]

在被解構的數組中，不定元素必須為最後一個條目，在後面繼續添加逗號會導致程序拋出語法錯誤，可以使用對象解構來創建更多複雜的表達式，如此一來，可以從任何混雜著對象和數組的數據解構中提取你想要的信息

let node = {
  type: "Identifier",
  name: "foo",
  loc: {
    start: {
      line: 1,
      column: 4
    },
    end: {
      line: 1,
      column: 4
    }
  },
  range: [0,3]
}

let {
  loc:{start},
  range:[startIndex]
}
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); 0

解構參數

當定義一個接受大量可選參數的javascript函數時，我們通常會創建一個可選對象，將額外的參數定義為這個對象屬性

• 必須傳值的解構參數
• 解構參數的默認值

function setCookie(name,value,{
  source = false,
  path = '/',
  domain = 'example.com',
  expires = new Date(Date.now()+360000*1000)
}){
  // 設置cookie的代碼
}

setCookie("type","js",{secure:true,expires:60000})
// 解構參數有一個奇怪的地方，默認情況下，如果調用函數時不提供被解構的參數會導致程序拋出錯誤。如下，如果不傳遞第3個參數，會報錯
// 程序報錯！
setCookie("type","js");
// 缺失第3個參數，其值為undefined,而解構參數只是將解構聲明應用在函數參數的一個簡寫方法，即如果解構賦值表達式右值為null或undefined，則程序會報錯，同理，若調用setCookie()函數不傳入第3個參數，也會導致程序拋出錯誤
// 好的做法是為其提供相同的默認值
const setCookieDefaults = {
  secure:false,
  path: "/",
  domain: "example.com",
  expires: new Date(Date.now()+360000000)
}
function setCookie(name,value,{
   secure:false,
  path: "/",
  domain: "example.com",
  expires: new Date(Date.now()+360000000)
}=setCookieDefaults) {
  // ....
}

在對象和數組解構中，都可以為值為undefined的對象屬性或數組元素設置默認值，且賦值表達式右值不可為null或undefined，否則程序會拋出錯誤。可以使用var、let或const來解構聲明變量，但按照語法規定必須要指定相應的初始化程序。