這篇文章主要介紹了解析JavaScript的ES6版本中的解構賦值,ES6版本為JS帶來了諸多簡化方面的改進,需要的朋友可以參考下

什么是解構賦值?

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

在不使用解構賦值的情況下，訪問數組的前三項：

1. var first = someArray[0]; 
2. var second = someArray[1]; 
3. var third = someArray[2]; 
4.  
5. var first = someArray[0]; 
6. var second = someArray[1]; 
7. var third = someArray[2]; 

使用解構賦值后，相應的代碼變得更簡潔和可讀：

1. var [first, second, third] = someArray; 
2.  
3. var [first, second, third] = someArray; 

SpiderMonkey(Firefox 的 JavaScript 引擎)已經支持解構賦值的大部分特性，但還不完全。

數組和可迭代對象的解構賦值

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

1. [ variable1, variable2, ..., variableN ] = array; 
2.  
3. [ variable1, variable2, ..., variableN ] = array; 

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

1. var [ variable1, variable2, ..., variableN ] = array; 
2. let [ variable1, variable2, ..., variableN ] = array; 
3. const [ variable1, variable2, ..., variableN ] = array; 
4.  
5. var [ variable1, variable2, ..., variableN ] = array; 
6. let [ variable1, variable2, ..., variableN ] = array; 
7. const [ variable1, variable2, ..., variableN ] = array; 

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

1. var [foo, [[bar], baz]] = [1, [[2], 3]]; 
2. console.log(foo); 
3. // 1 
4. console.log(bar); 
5. // 2 
6. console.log(baz); 
7. // 3 
8.  
9. var [foo, [[bar], baz]] = [1, [[2], 3]]; 
10. console.log(foo); 
11. // 1 
12. console.log(bar); 
13. // 2 
14. console.log(baz); 
15. // 3 

此外，還可以跳過數組中的某些項：

1. var [,,third] = ["foo", "bar", "baz"]; 
2. console.log(third); 
3. // "baz" 
4.  
5.  
6. var [,,third] = ["foo", "bar", "baz"]; 
7. console.log(third); 
8. // "baz" 

你還可以用一個 Rest 表達式來捕獲數組中的剩余項：

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

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

1. console.log([][0]); 
2. // undefined 
3.  
4. var [missing] = []; 
5. console.log(missing); 
6. // undefined 
7.  
8. console.log([][0]); 
9. // undefined 
10.  
11. var [missing] = []; 
12. console.log(missing); 
13. // undefined 

注意，數組解構賦值的方式也同樣適用于可遍歷的對象：

1. function* fibs() { 
2. var a = 0; 
3. var b = 1; 
4. while (true) { 
5. yield a; 
6. [a, b] = [b, a + b]; 
7. } 
8. } 
9.  
10. var [first, second, third, fourth, fifth, sixth] = fibs(); 
11. console.log(sixth); 
12. // 5 
13.  
14. function* fibs() { 
15. var a = 0; 
16. var b = 1; 
17. while (true) { 
18. yield a; 
19. [a, b] = [b, a + b]; 
20. } 
21. } 
22.  
23. var [first, second, third, fourth, fifth, sixth] = fibs(); 
24. console.log(sixth); 
25. // 5 

對象的解構賦值

對象的解構賦值允許你將變量綁定到對象不同的屬性值。指定被綁定的屬性名，后面緊跟要綁定的變量：

1. var robotA = { name: "Bender" }; 
2. var robotB = { name: "Flexo" }; 
3.  
4. var { name: nameA } = robotA; 
5. var { name: nameB } = robotB; 
6.  
7. console.log(nameA); 
8. // "Bender" 
9. console.log(nameB); 
10. // "Flexo" 
11.  
12. var robotA = { name: "Bender" }; 
13. var robotB = { name: "Flexo" }; 
14.  
15. var { name: nameA } = robotA; 
16. var { name: nameB } = robotB; 
17.  
18. console.log(nameA); 
19. // "Bender" 
20. console.log(nameB); 
21. // "Flexo" 

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

1. var { foo, bar } = { foo: "lorem", bar: "ipsum" }; 
2. console.log(foo); 
3. // "lorem" 
4. console.log(bar); 
5. // "ipsum" 
6.  
7. var { foo, bar } = { foo: "lorem", bar: "ipsum" }; 
8. console.log(foo); 
9. // "lorem" 
10. console.log(bar); 
11. // "ipsum" 

與數組一樣，也可以嵌套：

1. var complicatedObj = { 
2. arrayProp: [ 
3. "Zapp", 
4. { second: "Brannigan" } 
5. ] 
6. }; 
7.  
8. var { arrayProp: [first, { second }] } = complicatedObj; 
9.  
10. console.log(first); 
11. // "Zapp" 
12. console.log(second); 
13. // "Brannigan" 
14.  
15. var complicatedObj = { 
16. arrayProp: [ 
17. "Zapp", 
18. { second: "Brannigan" } 
19. ] 
20. }; 
21.  
22. var { arrayProp: [first, { second }] } = complicatedObj; 
23.  
24. console.log(first); 
25. // "Zapp" 
26. console.log(second); 
27. // "Brannigan" 

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

1. var { missing } = {}; 
2. console.log(missing); 
3. // undefined 
4.  
5. var { missing } = {}; 
6. console.log(missing); 
7. // undefined 

使用對象的解構賦值時還有一個潛在的陷阱，在解構賦值時沒有聲明變量(沒有 var、let或 const 關鍵字)：

1. { blowUp } = { blowUp: 10 }; 
2. // Syntax error 
3.  
4. { blowUp } = { blowUp: 10 }; 
5. // Syntax error 

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

1. ({ safe } = {}); 
2. // No errors 
3.  
4. ({ safe } = {}); 
5. // No errors 

其他情況

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

1. var {blowUp} = null; 
2. // TypeError: null has no properties 
3.  
4. var {blowUp} = null; 
5. // TypeError: null has no properties 

不過，你可以對其他基本類型(Boolean、String 和 Number)進行解構，將得到 undefined：

1. var {wtf} = NaN; 
2. console.log(wtf); 
3. // undefined 
4.  
5.  
6. var {wtf} = NaN; 
7. console.log(wtf); 
8. // undefined 

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

默認值

可以為不存在的屬性指定一個默認值：

1. var [missing = true] = []; 
2. console.log(missing); 
3. // true 
4.  
5. var { message: msg = "Something went wrong" } = {}; 
6. console.log(msg); 
7. // "Something went wrong" 
8.  
9. var { x = 3 } = {}; 
10. console.log(x); 
11. // 3 
12.  
13. var [missing = true] = []; 
14. console.log(missing); 
15. // true 
16.  
17. var { message: msg = "Something went wrong" } = {}; 
18. console.log(msg); 
19. // "Something went wrong" 
20.  
21. var { x = 3 } = {}; 
22. console.log(x); 
23. // 3 

實際應用 函數參數

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

1. function removeBreakpoint({ url, line, column }) { 
2. // ... 
3. } 
4.  
5. function removeBreakpoint({ url, line, column }) { 
6. // ... 
7. } 

配置對象

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

1. jQuery.ajax = function (url, { 
2. async = true, 
3. beforeSend = noop, 
4. cache = true, 
5. complete = noop, 
6. crossDomain = false, 
7. global = true, 
8. // ... more config 
9. }) { 
10. // ... do stuff 
11. }; 
12.  
13. jQuery.ajax = function (url, { 
14. async = true, 
15. beforeSend = noop, 
16. cache = true, 
17. complete = noop, 
18. crossDomain = false, 
19. global = true, 
20. // ... more config 
21. }) { 
22. // ... do stuff 
23. }; 

這避免了類似這樣的重復代碼：var foo = config.foo || theDefaultFoo;。

與迭代器一起使用

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

1. var map = new Map(); 
2. map.set(window, "the global"); 
3. map.set(document, "the document"); 
4.  
5. for (var [key, value] of map) { 
6. console.log(key + " is " + value); 
7. } 
8. // "[object Window] is the global" 
9. // "[object HTMLDocument] is the document" 
10.  
11.  
12. var map = new Map(); 
13. map.set(window, "the global"); 
14. map.set(document, "the document"); 
15.  
16. for (var [key, value] of map) { 
17. console.log(key + " is " + value); 
18. } 
19. // "[object Window] is the global" 
20. // "[object HTMLDocument] is the document" 

只遍歷鍵：

1. for (var [key] of map) { 
2. // ... 
3. } 
4.  
5.  
6. for (var [key] of map) { 
7. // ... 
8. } 
9.  
10. 只遍歷值： 
11. for (var [,value] of map) { 
12. // ... 
13. } 
14.  
15.  
16. for (var [,value] of map) { 
17. // ... 
18. } 

返回多個值

返回一個數組，通過解構賦值提取到返回值：

1. function returnMultipleValues() { 
2. return [1, 2]; 
3. } 
4. var [foo, bar] = returnMultipleValues(); 
5.  
6.  
7. function returnMultipleValues() { 
8. return [1, 2]; 
9. } 
10. var [foo, bar] = returnMultipleValues(); 

或者，返回一個鍵值對的對象：

1. function returnMultipleValues() { 
2. return { 
3. foo: 1, 
4. bar: 2 
5. }; 
6. } 
7. var { foo, bar } = returnMultipleValues(); 
8.  
9.  
10. function returnMultipleValues() { 
11. return { 
12. foo: 1, 
13. bar: 2 
14. }; 
15. } 
16. var { foo, bar } = returnMultipleValues(); 

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

1. function returnMultipleValues() { 
2. return { 
3. foo: 1, 
4. bar: 2 
5. }; 
6. } 
7. var temp = returnMultipleValues(); 
8. var foo = temp.foo; 
9. var bar = temp.bar; 
10.  
11. function returnMultipleValues() { 
12. return { 
13. foo: 1, 
14. bar: 2 
15. }; 
16. } 
17. var temp = returnMultipleValues(); 
18. var foo = temp.foo; 
19. var bar = temp.bar; 

采用延續式：

1. function returnMultipleValues(k) { 
2. k(1, 2); 
3. } 
4. returnMultipleValues((foo, bar) => ...); 
5.  
6.  
7. function returnMultipleValues(k) { 
8. k(1, 2); 
9. } 
10. returnMultipleValues((foo, bar) => ...); 

導入 CommonJS 模塊的指定部分

還沒使用過 ES6 的模塊吧，那至少使用過 CommonJS 吧。當導入一個 CommonJS 模塊 X 時，模塊提供的方法也許多余你實際使用的。使用解構賦值，你可以明確指定你需要使用模塊的哪些部分：

1. const { SourceMapConsumer, SourceNode } = require("source-map"); 
2.  
3. const { SourceMapConsumer, SourceNode } = require("source-map"); 

如果你使用 ES6 的模塊機制，你可以看到 import 聲明時有一個類似的語法。

結論

我們看到，解構賦值在很多場景下都很實用。在 Mozilla，我們已經有很多經驗。Lars Hansen 在 10 年前就向 Opera 引入了解構賦值，Brendan Eich 在稍微晚點也給 Firefox 添加了支持，最早出現在 Firefox 2 中。因此，解構賦值已經滲透到我們每天對 JS 的使用中，悄悄地使我們的代碼更簡短、整潔。