【探秘ES6】:解构赋值

更新时间:2015-07-08 09:44:24点击次数:1151次

什么是解构赋值?

解构赋值可将数组的元素或对象的属性赋予给另一个变量,该变量的定义语法与数组字面量或对象字面量很相似。此语法非常简洁,相比于传统的属性访问方式,更加直观清晰。

在不使用解构赋值的情况下,通常我们这样访问数组中的元素:


[js] view plaincopy

  1. var first = someArray[0];  

  2. var second = someArray[1];  

  3. var third = someArray[2];  


使用解构赋值后,代码得到了极大的简化,同时可读性也更强:


[js] view plaincopy

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


除了个别特性,解构赋值的大部分特性在SpiderMonkey(Firefox的JavaScript引擎)中都已得到支持,详见 bug 694100

解构数组与其可迭代性

上面的例子为我们展示了解构赋值在数组中的运用,其基本语法形式为:


[js] view plaincopy

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


这只是将变量1到变量N分配到数组相应的元素中。当然,如果想在同一时间对变量进行声明,可以在赋值前增加相应的关键字:var,let或const:


[js] view plaincopy

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

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

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


事实上,变量一词用的并不准确,因为解构赋值同样可以用于数组嵌套的情况(注意:左右两侧的格式应保持一致):


[js] view plaincopy

  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  


此外,左侧的变量列表还可以一种包含连续逗号的形式跳过右侧对应的值:


[js] view plaincopy

  1. var [,,third] = ["foo""bar""baz"];  

  2. console.log(third);  

  3. // "baz"  


ES6中,提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法——“rest“模式:


[js] view plaincopy

  1. var [head, ...tail] = [1, 2, 3, 4];  

  2. console.log(tail);  

  3. // [2, 3, 4]  


无论是访问数组外还是数组中不存在的元素,都会得到相同的结果:undifined:


[js] view plaincopy

  1. console.log([][0]);  

  2. // undefined  

  3.   

  4. var [missing] = [];  

  5. console.log(missing);  

  6. // undefined  


注意,数组赋值模式的解构赋值,同样也可迭代:


[js] view plaincopy

  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  


解构对象

在对象中使用解构赋值,允许你为对象的不同属性绑定变量名。这种情况下,解构赋值的左侧部分类似一个对象字面量,对象中是一个名值对的列表,属性名称位于名值对内冒号左侧,变量名称位于名值对内冒号右侧,每一个属性都会去右侧对象中查找相应的赋值,每一个值都会赋值给它对应的变量:


[js] view plaincopy

  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"  


当属性名称和变量名称相同时,可如下简写:


[js] view plaincopy

  1. var { foo, bar } = { foo: "lorem", bar: "ipsum" };  

  2. console.log(foo);  

  3. // "lorem"  

  4. console.log(bar);  

  5. // "ipsum"  


就像嵌套数组可用于解构赋值一样,嵌套对象也可用于解构赋值,并且两种语法还可以结合在一起使%E

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息