解析JavaScript的ES6版本中的解構賦值_基礎知識

什麼是解構賦值？

解構賦值允許你使用類似陣列或物件字面量的語法將陣列和物件的屬性值賦給一系列變數。這個語法非常簡潔，而且比傳統的屬性存取更加清晰。

在不使用解構賦值的情況下，存取陣列的前三項：

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];
 
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

使用解構賦值後，對應的程式碼變得更簡潔可讀：

var [first, second, third] = someArray;
 
var [first, second, third] = someArray;

SpiderMonkey（Firefox 的 JavaScript 引擎）已經支援解構賦值的大部分特性，但還不完全。
陣列與可迭代物件的解構賦值

上面我們已經看到了數組解構賦值的例子，該語法的一般形式是：

[ variable1, variable2, ..., variableN ] = array;
 
[ variable1, variable2, ..., variableN ] = array;

這將把數組中對應的項依次賦給 variable1 到 variableN，如果同時需要聲明變量，可以在解構表達式前面添加 var，let 或 const 關鍵字。

var [ variable1, variable2, ..., variableN ] = array;
let [ variable1, variable2, ..., variableN ] = array;
const [ variable1, variable2, ..., variableN ] = array;
 
var [ variable1, variable2, ..., variableN ] = array;
let [ variable1, variable2, ..., variableN ] = array;
const [ variable1, variable2, ..., variableN ] = array;

事實上，你還可以嵌套任意的深度：

var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
// 1
console.log(bar);
// 2
console.log(baz);
// 3
 
var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
// 1
console.log(bar);
// 2
console.log(baz);
// 3

此外，也可以跳過陣列中的某些項：

var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

 
var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

你也可以用一個 Rest 表達式來捕捉數組中的剩餘項：

var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
// [2, 3, 4]
 
var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
// [2, 3, 4]

如果數組越界或存取數組中不存在的項，將會得到和透過數組索引存取一樣的值：undefined。

console.log([][0]);
// undefined

var [missing] = [];
console.log(missing);
// undefined
 
console.log([][0]);
// undefined
 
var [missing] = [];
console.log(missing);
// undefined

注意，陣列解構賦值的方式也同樣適用於可遍歷的物件：

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();
console.log(sixth);
// 5
 
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();
console.log(sixth);
// 5

物件的解構賦值

物件的解構賦值允許你將變數綁定到物件不同的屬性值。指定被綁定的屬性名，後面緊跟著要綁定的變數：

var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };

var { name: nameA } = robotA;
var { name: nameB } = robotB;

console.log(nameA);
// "Bender"
console.log(nameB);
// "Flexo"
 
var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };
 
var { name: nameA } = robotA;
var { name: nameB } = robotB;
 
console.log(nameA);
// "Bender"
console.log(nameB);
// "Flexo"

當綁定的屬性名稱和接收屬性值的變數名稱一樣時，還有一個語法糖：

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"
 
var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"

與陣列一樣，也可以巢狀：

var complicatedObj = {
 arrayProp: [
  "Zapp",
  { second: "Brannigan" }
 ]
};

var { arrayProp: [first, { second }] } = complicatedObj;

console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"
 
var complicatedObj = {
 arrayProp: [
  "Zapp",
  { second: "Brannigan" }
 ]
};
 
var { arrayProp: [first, { second }] } = complicatedObj;
 
console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"

解構一個不存在的屬性時，將得到 undefined：

var { missing } = {};
console.log(missing);
// undefined
 
var { missing } = {};
console.log(missing);
// undefined

使用物件的解構賦值時還有一個潛在的陷阱，在解構賦值時沒有宣告變數（沒有 var、let或 const 關鍵字）：

{ blowUp } = { blowUp: 10 };
// Syntax error
 
{ blowUp } = { blowUp: 10 };
// Syntax error

這是因為 JavaScript 語法告訴引擎任何以 { 開始的語句都是語句塊（例如，{console} 就是一個合法的語句塊），解決方法是將整個語句用一對括號包裹：

({ safe } = {});
// No errors
 
({ safe } = {});
// No errors

其他情況

當你嘗試解構 null 或 undefined，你將得到類型錯誤：

var {blowUp} = null;
// TypeError: null has no properties
 
var {blowUp} = null;
// TypeError: null has no properties

不過，你可以將其他基本型別（Boolean、String 和 Number）解構，將會得到 undefined：

var {wtf} = NaN;
console.log(wtf);
// undefined

 
var {wtf} = NaN;
console.log(wtf);
// undefined

結果也許會讓你感到意外，但深究一下，其實原因很簡單。在進行物件解構賦值時，被解構的物件將被強制轉換為 Object，除 null 和 undefined 外，其它類型都可以被強制轉換為物件。進行陣列的結構賦值時，要求被解構的物件有一個遍歷器。
預設值

可以為不存在的屬性指定一個預設值：

var [missing = true] = [];
console.log(missing);
// true

var { message: msg = "Something went wrong" } = {};
console.log(msg);
// "Something went wrong"

var { x = 3 } = {};
console.log(x);
// 3
 
var [missing = true] = [];
console.log(missing);
// true
 
var { message: msg = "Something went wrong" } = {};
console.log(msg);
// "Something went wrong"
 
var { x = 3 } = {};
console.log(x);
// 3

實際應用
函數參數

身為開發人員，我們常常把一個包含多個屬性的物件當作函數的參數，來實作更靈活的 API，而不是讓 API 的使用者記住一些特定順序的參數。我們可以使用物件的解構賦值，來避免每次使用參數時的屬性存取：

function removeBreakpoint({ url, line, column }) {
 // ...
}
 
function removeBreakpoint({ url, line, column }) {
 // ...
}

配置物件

完善上面的例子，我們可以為要被解構的物件屬性提供預設值，這在對那些作為配置參數的物件非常實用，因為許多配置項都有一個合理的預設值。例如，jQuery 的 ajax 方法的第二個參數為一個配置對象，我們可以這樣實作：

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

這避免了類似這樣的重複程式碼：var foo = config.foo || theDefaultFoo;。
與迭代器一起使用

當遍歷 Map 物件時，我們可以使用解構賦值來遍歷 [key, value]：

var map = new Map();
map.set(window, "the global");
map.set(document, "the document");

for (var [key, value] of map) {
 console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"

 
var map = new Map();
map.set(window, "the global");
map.set(document, "the document");
 
for (var [key, value] of map) {
 console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"

只遍歷鍵：

for (var [key] of map) {
 // ...
}

 
for (var [key] of map) {
 // ...
}

只遍历值：
for (var [,value] of map) {
 // ...
}

 
for (var [,value] of map) {
 // ...
}

傳回多個值

傳回一個數組，透過解構賦值提取到回傳值：

function returnMultipleValues() {
 return [1, 2];
}
var [foo, bar] = returnMultipleValues();

 
function returnMultipleValues() {
 return [1, 2];
}
var [foo, bar] = returnMultipleValues();

或者，傳回一個鍵值對的物件：

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

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

這兩者都比使用中間變數好：

function returnMultipleValues() {
 return {
  foo: 1,
  bar: 2
 };
}
var temp = returnMultipleValues();
var foo = temp.foo;
var bar = temp.bar;
 
function returnMultipleValues() {
 return {
  foo: 1,
  bar: 2
 };
}
var temp = returnMultipleValues();
var foo = temp.foo;
var bar = temp.bar;

採用延續式：

function returnMultipleValues(k) {
 k(1, 2);
}
returnMultipleValues((foo, bar) => ...);

 
function returnMultipleValues(k) {
 k(1, 2);
}
returnMultipleValues((foo, bar) => ...);

导入 CommonJS 模块的指定部分

还没使用过 ES6 的模块吧，那至少使用过 CommonJS 吧。当导入一个 CommonJS 模块 X 时，模块提供的方法也许多余你实际使用的。使用解构赋值，你可以明确指定你需要使用模块的哪些部分：

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

如果你使用 ES6 的模块机制，你可以看到 import 声明时有一个类似的语法。
结论

我们看到，解构赋值在很多场景下都很实用。在 Mozilla，我们已经有很多经验。Lars Hansen 在 10 年前就向 Opera 引入了解构赋值，Brendan Eich 在稍微晚点也给 Firefox 添加了支持，最早出现在 Firefox 2 中。因此，解构赋值已经渗透到我们每天对 JS 的使用中，悄悄地使我们的代码更简短、整洁。