解析JavaScript的ES6版本中的解构赋值

这篇文章主要介绍了解析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 的使用中，悄悄地使我们的代码更简短、整洁。