es6-對象和數組解構

我們經常需要在對象和數組內提取相關的數據，往往我們需要遍歷才能完成。而在es6添加了簡化這種任務的新特性：解構。解構是一種打破數據解構，將其拆分成更小部分的過程。

對象解構

基本用法:

let node = {
  type: 'Identifier',
  name: 'foo'
};

let { type, name } = node;

console.log(type, name); // Identifier foo

另外，解構必須提供初始值。即等號右邊不能爲null，undefiend 或者不提供：

let { type, name };  // Missing initializer in destructuring declaration
let { type } = null;  // undefiend也是不行

對已經聲明的變量也可以使用解構，但是這時候解構語句要用一對括號包含起來，因爲js引擎會把花括號當作語法塊處理：

let node = {
  type: 'Identifier',
  name: 'foo'
};
let type = 'Listers',
  name = 5;

  // 用圓括號包含
({ type, name } = node);

console.log(type, name); // Identifier foo

解構的變量名稱如果不在對象中會被賦值爲 undefiend，我們可以爲解構的變量提供一個默認值，在屬性名後面添加等號和默認值即可：

let node = {
  type: 'Identifier'
};

let { type, name = 'wozien' } = node;

console.log(type, name); // Identifier wozien

當我們需要解構的變量名和對象屬性名不同，可以在解構的屬性名後面添加冒號和對應的變量名：

let node = {
  type: 'Identifier',
  name: 'foo'
};

let { type: myType, name: myName = 'wozien' } = node;

console.log(myType, myName); // Identifier foo

可見，解構表達式冒號左邊指的是對象需要解構的屬性位置，冒號右邊纔是需要綁定的變量。所以同名的解構是下面方式的簡寫：

let {
  type: type,
  name: name
} = node;

嵌套對象的解構和字面量寫法一樣，只要提供更深的花括號即可：

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

數組解構

基本用法：

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

如果我們只想獲取固定位置的元素，可以這樣：

let colors = ['red', 'green', 'blue'];
let [, , thirdColor] = colors;
console.log(thirdColor); // blue

解構賦值給已經聲明的變量不需要用圓括號，這和對象解構賦值有區別：

let colors = ['red', 'green', 'blue'];
let firstColor = 'yellow';

// 不需要括號
[firstColor] = colors;
console.log(firstColor); // red

數組解構也可以使用默認值，當指定位置元素不存在或者爲 undefined 時使用：

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

嵌套數組解構和對象類似，提供更深的方括號即可：

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

不定參數解構。利用... 可以把數組剩餘的數據賦值給一個指定的變量：

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

混合解構，方便我們提取對象和數組結合的數據：

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

let {
  loc: { end },
  range: [, startIndex]
} = node;

console.log(end.column); // 4
console.log(startIndex); // 3

應用場景

函數參數的解構。我們可以爲接收一個對象或者數組的函數參數進行解構，這樣就不需要在函數體裏面進行對應屬性的提取，並且可以更加直觀的看出對象的傳遞屬性：

function setCookie(name, value, { path, domain, expire }) {
  // 設置cookie
  console.log(path, domain);
}

setCookie('a', 'b', { path: '/', domain: 'localhost' });

解構函數參數必須傳遞參數，不然會拋出錯誤。這時我們可以利用函數參數默認值解決：

function setCookie(name, value, { path, domain, expire } = {}) {
  // 設置cookie
  console.log(path, domain);
}

setCookie('a', 'b');

交換兩個變量的值。

let a = 1, b = 2;
[b, a] = [a, b];

console.log(a, b);  // 2 1

克隆數組

let colors = ['red', 'green', 'blue'];

let cloneColors = colors.concat(); // es5

let [...cloneColors] = colors;  // es6