變量賦值的痛

• 對象

let o = {a:23,b:34};
let a = o.a;
let b = o.b;

如上文代碼，我們經常會遇到在各種場合需要獲取對象中的值的場景，舒服一點的是獲取單個屬性，很多時候，要獲取的是接口中的各個對象，在ES5中，我們不得不如上文一樣，將同一行代碼復制多遍

• 數組

let s = [1,2,3,4];
let a = s[0];
let b = s[2];

如上文，所以ES6提供了處理這些場景的方法：解構賦值

解構

destructuring：百度百科的意思是結構分解，ES6 中允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）

• 作用
  這是一種將數據結構分解為更小的部分的過程，從而達到簡化提取信息的目的。

對象解構

• 形式
  對象解構語法是在賦值對象的左側使用了對象字面量，如：
  同名變量解構賦值

let node = {
        type : 'identifier',
        name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'

不同變量解構賦值

let node = {
        type : 'identifier',
        name : 'foo'
};
let {type:localType,name:localName} = node;
console.log(localType);//'identifier'
console.log(localName);//'foo'

• 注意點
  • 使用var、let、const對對象進行解構時，必須提供初始化器（即等號右邊的值）
  • 不使用var、let、const賦值時，需要將解構語句使用（）進行包裹

   （{type，name} = node);//{}在js中作為代碼塊，單獨使用加等號會報錯會報錯
  

• 默認值
  當你使用解構賦值語句時，如果指定的本地變量沒有同名屬性，那么該變量會被賦值為undefined，可以對其進行指定默認值

   let node = {
        type : 'identifier',
        name : 'foo'
    };
    let {type,name,val} = node;
    console.log(val);//undefined
    ({type,name,val = '234'}  = node)
    console.log(val);//'234'
  

• 嵌套的對象解構
  使用類似于對象字面量的語法，可以深入到嵌套的對象結構中去提取你想要的數據

 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

這種方法使得本地變量start被賦值node中的loc的start對象，值得注意的是這種操作與直接node.loc.start的賦值是一致的，所以要注意值類型與引用類型的區別

• 注意點:此語句中并沒有任何變量被綁定

   // 沒有變量被聲明！
  let { loc: {} } = node;

數組解構

• 形式
  數組解構的語法看起來與對象解構非常相似，只是將對象字面量替換成了數組字面量。數組解構時，解構作用在數組內部的位置上，而不是作用在對象的具名屬性上

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

所以，對于數組解構，最主要在于位置的固定，當然，如果不想賦值某些值，可以直接略過，如：

var s = [1,2,3,4,5];
let [,,T] = s;
console,log(T);//3

• 注意點
  • 使用var、let、const對對象進行解構時，必須提供初始化器（即等號右邊的值）
  • 不使用var、let、const賦值時，需要將解構語句使用（）進行包裹，因為數組的[]，與{}是不同的
  • 對互換兩個變量的值很有用，如排序算法中使用的，可以直接用

  let a = 3;
  let b = 4;
  [b,a] = [a,b];
  console.log(a);//4
  console.log(b);//3
  

• 默認值
  數組解構賦值同樣允許在數組任意位置指定默認值。當指定位置的項不存在、或其值為undefined ，那么該默認值就會被使用

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

• 嵌套的數組結構
  與對象類似，只是仍使用的是數組字面量

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

• 剩余項
  數組解構有個與函數的剩余參數類似的、名為剩余項（ rest items ）的概
  念，它使用" ..." 語法來將剩余的項目賦值給一個指定的變量

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

混合解構

既有函數的解構，也有數組的解構，也只需要對象的創建出字面量來賦值即可，如：

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

實際使用- 參數解構

如：

// options 上的屬性表示附加參數
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 設置 cookie 的代碼
}
//可以改寫為：對options進行解構并賦予默認值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

總結

以上，便是學到的ES6的解構賦值的內容，主要區分對象解構與數組解構的形式，整體上很好使用，剛開始有點蒙，后面發現其實還是很有規律的對象字面量與數組字面量的使用，當然，注意點是要劃重點的，記錄到這，各位好夢！