解构赋值简单来说就是 对应位置(数组)或对应键名(对象)的变量匹配过程。如果匹配失败, 对于一般变量匹配不到结果就是 undefined, 对于具有展开运算符(…)的变量结果就是空数组。

解构

数组的解构赋值

  1. var [a, b, c] = [1, 2, 3];   //a=1, b=2, c=3
  2. var [, , c] = [1, 2, 3];   //c=3
  3. var [x, , y] = [1, 2, 3];  //x=1, y=3
  4. var [head, ...tail] = [1, 2, 3, 4];   //head = 1, tail = [2, 3, 4];
  5. var [x, y, ...z] = [1];   //x=1, y=undefined, z=[];
  6. var [a, [b, c], d] = [1, [2, 3], 4];   //a=1.b=2, c=3, d=4
  7. var [a, [b], d] = [1, [2, 3], 4];   //a=1.b=2, d=4

数组的解构赋值可以具有默认值, 在 ES6中对于目标数据使用严格相等(===)比较是否为空(undedined)。如果默认值是表达式, 那么对于该表达式采用惰性求值, 即只有在对应位置为空(undedined)时才执行该表达式。

  1. var [a=1, b] = [];   //a=1, b=undefined
  2. var [a=1, b] = [2, 3];  //a=2, b=3
  3. var [a=1, b] = [undefined, 3];   //a=1.b=3
  4. var [a=1, b] = [null, 3];  //a=null, b=3
  5. var [a=1, b] = [NaN, 3];  //a=NaN, b=3
  7. function f(){
  8.   console.log("done");
  9.   return 2;
  10. }
  11. var [a=f()] = [1];    //a=1
  12. var [a=f()] = [];    //a=2, 输出 "done"

解构赋值的右侧表达式在必要的隐式转换后如果不具有 iterator 则遍历失败, 关于 iterator, 具体看iterator部分。这里可以先记住, 左边是数组结构的解构赋值, 右侧可以是数组, 字符串, 集合, Generator 函数, map等。

  1. //字符串
  2. var [a, b, c, d] = "123";   //a='1', b='2', c='3', d=undefined
  4. //集合
  5. var [a, b, c] = new Set(['1', '2', '3']);  //a='1', b='2', c='3'
  7. //Generator
  8. function* fib(){
  9.   let a = 1;
  10.   let b = 1;
  11.   while(1){
  12.     yield a;
  13.     [a, b] = [b, a + b];      //使用结构赋值实现叠加并交换变量
  14.   }
  15. }
  16. var [a, b, c, d, e, f] = fib();  //a=1, b=1, c=2, d=3, e=5, f=8
  18. //map
  19. var map = new Map();
  20. map.set('a', 1);
  21. map.set('b', 2);
  22. var [a, b] = map;  //a=['a', 1], b=['b', 2]

对象的解构赋值

对象的解构赋值与变量位置次序无关, 只取决于键名是否严格相等(===)。如果匹配失败, 结果就是 undefined

  1. var {a, b, f} = {b:2, a:3, d:4};  //a=3, b=2, f=undefined
  2. var node = {
  3.   loc: {
  4.     start:{
  5.       x:1,
  6.       y:2
  7.     }
  8.   }
  9. };
  10. var {loc: {start: {x:line}}} = node;  //line=1

可以在复制时对属性重命名, 但此时原名只用于匹配参数, 不生成变量：

  1. var {name:alias} = {name:'Bob'};  //alias='Bob'
  2. console.log(name);   //"global"
  3. console.log(alias);   //"Bob"

对象解构同样可以指定默认值, 默认值生效(或表达式被行)的条件是对应属性值严格等于(===) undefined

  1. var {a:3, b} = {b:2}; //a=3, b=2
  2. var {a:3, b} = {a:null, b:2}; //a=null, b=2

解构嵌套对象父属性不存在会报错：

  1. var {foo:{bar}} = {ba: 2};   //报错

解构对象如果和声明分开, 独立成为一行要加圆括号, 就想用 eval 解析 JSON 字符串的时候一样。因为系统会把一行开头花括号默认作为块级作用域的开始, 而不是对象的开始。

  1. var a, b;
  2. ({a, b} = {a:2, b:10});   //a=2, b=10
  3. {a, b} = {a:2, b:10};   //报错
  5. //以下表达式无意义, 但没有错
  6. ({}=[1, 2]);
  7. ({}="abc");
  8. ({}=[]);

注意, 除了这样的情况, 不要滥用圆括号

右侧变量通过隐式类型转换可以转为对象的情况下也可以结构赋值：

  1. var {toString: s} = 123;  //s=Number.prototype.toString

技巧： 解构的用处很多, 包括交换变量, 简化传参(可带默认值),

  1. //参数传递
  2. function f([x, y, z=4]){
  3.   return [x+1, y+2, z+3];
  4. }
  5. var [a, b, c] = f([1, 2]);  //a=2, b=4, c=7
  6. [[1, 2], [3, 4]].map(([a, b]) => a + b);   //返回 [3, 7]
  1. //交换变量
  2. var a=2, b=4;
  3. [a, b] = [b, a];  //a=4, b=2

扩展运算符

数组及类数组对象

扩展运算符类似rest运算符的逆运算, 用 ... 表示, 放在一个(类)数组前, 将该数组展开成独立的元素序列:

  1. console.log(1, ...[2, 3, 4], 5);  //输出1, 2, 3, 4, 5

扩展运算符的用处很多:

  • 可以用于快速改变类数组对象为数组对象, 也是用于其他可遍历对象:

    1. [...document.querySelectorAll('li')];   //[<li>, <li>, <li>];

  • 结合 rest 参数使函数事半功倍:

    1. function push(arr, ...val){
    2. return arr.push(...val);      //调用函数时, 将数组变为序列
    3. }

  • 替代 apply 写法 ```javascript var arr = [1, 2, 3]; var max = Math.max(…arr); //3

var arr2 = [4, 5, 6]; arr.push(…arr2); //[1, 2, 3, 4, 5, 6]

new Date(…[2013, 1, 1]); //ri Feb 01 2013 00: 00: 00 GMT+0800 (CST)

  2. - 连接, 合并数组
  3. ```javascript
  4. var more = [4, 5];
  5. var arr = [1, 2, 3, ...more];    //[1, 2, 3, 4, 5]
  7. var a1 = [1, 2];
  8. var a2 = [3, 4];
  9. var a3 = [5, 6];
  10. var a = [...a1, ...a2, ...a3];     //[1, 2, 3, 4, 5, 6]

  • 解构赋值

    1. var a = [1, 2, 3, 4, 5];
    2. var [a1, ...more] = a;      //a1 = 1, more = [2, 3, 4, 5]
    3. //注意, 扩展运算符必须放在解构赋值的结尾, 否则报错

  • 字符串拆分 ```javascript var str = “hello”; var alpha = […str]; //alpha = [‘h’, ‘e’, ‘l’, ‘l’, ‘o’]

[…’x\uD83D\uDE80y’].length; //3, 正确处理32位 unicode 字符

  1. 建议：使用扩展运算符(...)拷贝数组。
  3. <a name="UjQCg"></a>
  4. ### 对象展开
  5. 这是 ES7 的一个提案, babel可以使用器部分功能使用。
  7. - rest参数<br />用法和数组中很类似，这里不再过多赘述，直接看几个例子吧：
  8. ```javascript
  9. var {x,y,...z}  = {x: 1, y: 2, a: 3, d: 4}; //x=1, y=2, z={a: 3, d: 4}

值得强调的是， 对象的rest参数形式执行的是浅拷贝，赋值得到的是原对象的引用：

  1. let obj = {a: {b: 1}};
  2. let {...x} = obj;
  3. obj.a.b = 2;
  4. console.log(x.a.b);    //2

此外 rest 不会复制不可枚举属性和继承自原型的属性：

  1. var p = {a: 0};
  2. var o = {b: 2};
  3. var o = Object.defineProperty(o, "foo", {
  4.   value: 2,
  5.   configurable: true,
  6.   enumerable: false,
  7.   writable: true
  8. });
  9. Object.setPrototypeOf(o, p);
  10. var u = { ...p };
  11. console.log(u);    //{b:2}
  • 扩展运算符
    复制参数对象所有可遍历属性到当前对象中:
    1. var o1 = {a: 1, b: 2};
    2. var n = { ...o1 };    //n={a: 1, b: 2};
    3. //相当于
    4. var n = Object.assign({}, o1);

可以用扩展运算符合并多个对象, 排后的属性会覆盖之前的属性：

  1. var source0 = {a:1,b:2};
  2. var source1 = {a:3,c:3};
  3. var source2 = {a:2,d:0};
  4. Object.assign(target, source1, source2);
  5. var target = {...source0, ...source1, ...source2};
  6. console.log(target);      //{a: 2, b: 2, c: 3, d: 0}

注意一点：如果扩展运算符的参数对象有 get 方法，该方法会被执行：

  1. var a = {o:1,p:2,m:4};
  2. var withoutError = {
  3.   ...a,
  4.   get x(){
  5.     throw new Error();
  6.   }
  7. };           //不报错
  8. var withError = {
  9.   ...a,
  10.   ...{get x(){
  11.     throw new Error();
  12.   }}
  13. };           //报错

如果扩展对象是 null 或 undefined，会被忽略，不报错

  1. var o = { ...null,  ...undefined};    //不报错
  2. console.log(o);    //{}