ES6 -- 變量的解構複製

一、數組的解構賦值

基本用法

let [foo, [[bar], baz]] = [1, [[2], 3]];
let [head, ...tail] = [1, 2, 3, 4];

屬於「模式匹配」，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值

對於Set結構，也可使用數組的解構賦值。

let [x, y, z] = new Set(["a", "b", "c"])
x // "a"

這不懂？？？？
事實上，只要某種數據結構具備Iterator接口，均可以採用數組形式的解構賦值。

function* fibs() {
  var a = 0;
  var b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

上面代碼中，fibs是一個Generator函數，原生具備Iterator接口。解構賦值會依次從這個接口獲取值。

默認值

var [foo = true] = [];
foo // true

ES6內部使用嚴格相等運算符（===），判斷一個位置是否有值。因此，若是一個數組成員不嚴格等於undefined，默認值是不會生效的。

二、對象的解構賦值

var { foo, bar } = { foo: "aaa", bar: "bbb" };

數組的元素是按次序排列的，變量的取值由它的位置決定；
而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
//foo是模式，不會賦值或者聲明，baz是變量

let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

let baz;
({bar: baz} = {bar: 1}); // 成功

採用這種寫法時，變量的聲明和賦值是一體的。對於let和const來講，變量不能從新聲明，因此一旦賦值的變量之前聲明過，就會報錯。

重點：

let { log, sin, cos } = Math;

對象的解構賦值，能夠很方便地將現有對象的方法，賦值到某個變量。
上面代碼將Math對象的對數、正弦、餘弦三個方法，賦值到對應的變量上，使用起來就會方便不少。

三、字符串的解構賦值

字符串也能夠解構賦值。這是由於此時，字符串被轉換成了一個相似數組的對象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

相似數組的對象都有一個length屬性，所以還能夠對這個屬性解構賦值。

let {length : len} = 'hello';
len // 5

四、數值和布爾值的解構賦值

解構賦值時，若是等號右邊是數值和布爾值，則會先轉爲對象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

解構賦值的規則，只要等號右邊的值不是對象，就先將其轉爲對象。因爲undefined和null沒法轉爲對象，因此對它們進行解構賦值，都會報錯。

五、函數參數的解構賦值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代碼是爲函數move的參數指定默認值，而不是爲變量x和y指定默認值，因此會獲得與前一種寫法不一樣的結果。

六、用途

（1）交換變量的值

[x, y] = [y, x];

上面代碼交換變量x和y的值，這樣的寫法不只簡潔，並且易讀，語義很是清晰。

（2）從函數返回多個值

函數只能返回一個值，若是要返回多個值，只能將它們放在數組或對象裏返回。有了解構賦值，取出這些值就很是方便。

// 返回一個數組

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

// 返回一個對象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

（3）函數參數的定義

解構賦值能夠方便地將一組參數與變量名對應起來。

// 參數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3])

// 參數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})

（4）提取JSON數據

解構賦值對提取JSON對象中的數據，尤爲有用。

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
}

let { id, status, data: number } = jsonData;

console.log(id, status, number)
// 42, "OK", [867, 5309]

上面代碼能夠快速提取JSON數據的值。

（5）函數參數的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || 'default foo';這樣的語句。

（6）遍歷Map結構

任何部署了Iterator接口的對象，均可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就很是方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

若是隻想獲取鍵名，或者只想獲取鍵值，能夠寫成下面這樣。

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}

（7）輸入模塊的指定方法

加載模塊時，每每須要指定輸入那些方法。解構賦值使得輸入語句很是清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");