解构赋值

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

数组的解构赋值

VAR [a, b, c] = [1, 2, 3];   //a=1, b=2, c=3
var [, , c] = [1, 2, 3];   //c=3
var [x, , y] = [1, 2, 3];  //x=1, y=3
var [head, ...tail] = [1, 2, 3, 4];   //head = 1, tail = [2, 3, 4];
var [x, y, ...z] = [1];   //x=1, y=un@R_126_935@d, z=[];
var [a, [b, c], d] = [1, [2, 3], 4];   //a=1.b=2, c=3, d=4
var [a, [b], d] = [1, [2, 3], 4];   //a=1.b=2, d=4

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

var [a=1, b] = [];   //a=1, b=undefined
var [a=1, b] = [2, 3];  //a=2, b=3
var [a=1, b] = [undefined, 3];   //a=1.b=3
var [a=1, b] = [null, 3];  //a=null, b=3
var [a=1, b] = [NaN, 3];  //a=NaN, b=3

function f(){
  console.LOG("done");
  return 2;
}
var [a=f()] = [1];    //a=1
var [a=f()] = [];    //a=2, 输出 "done"

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

//字符串
var [a, b, c, d] = "123";   //a='1', b='2', c='3', d=undefined

//集合
var [a, b, c] = new Set(['1', '2', '3']);  //a='1', b='2', c='3'

//Generator
function* fib(){
  let a = 1;
  let b = 1;
  while(1){
    yield a;
    [a, b] = [b, a + b];      //使用结构赋值实现叠加并交换变量
  }
}
var [a, b, c, d, e, f] = fib();  //a=1, b=1, c=2, d=3, e=5, f=8

//map
var map = new Map();
map.set('a', 1);
map.set('b', 2);
var [a, b] = map;  //a=['a', 1], b=['b', 2]

对象的解构赋值

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

var {a, b, f} = {b:2, a:3, d:4};  //a=3, b=2, f=undefined
var node = {
  loc: {
    start:{
      x:1,
      y:2
    }
  }
};
var {loc: {start: {x:line}}} = node;  //line=1

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

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

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

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

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