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
複製代碼

>>>原文地址