变量的结构赋值

ES6 变量的解构赋值

解构赋值本质上是“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

解构规则：只要等号右边的值不少对象，就先将其转为对象。

一、数组的解构赋值

数组解构赋值，索引很重要，即顺序很重要。

原理：等号右边数据结构要有Iterator接口，比如数组，Set.

1、解构[1,2,3]

//把1,2,3分别赋值给a,b,c
       var [a,b,c]=[1,2,3];
       console.log(a+' | '+b+' | '+c);//1 | 2 | 3

2、更复杂，更强大的赋值,解构[1,[2,3]]

/把1,2,3分别赋值给a,b,c
        var [a,[b,c]]=[1,[2,3]];
        console.log(a+' | '+b+' | '+c);//1 | 2 | 3

3、跳着赋值

/把1赋值给a,3赋值给c
        var [a,,c]=[1,2,3];
        console.log(a+' | '+c);  //1 | 3

4、省略号

var [a,...b]=[1,2,3];
console.log(a+' | '+b);//1 | 2,3
console.log(b);//[2, 3]

ES6中，提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法—"rest模式"。所以有省略号时变量一定是数组类型的。

z的值是空数组。

let [x,y,...z]=['a'];
    console.log("x=",x);   //x= a
    console.log("y=",y);    //y= undefined
    console.log("z=",z);    //z= []

5、指定默认值

//给c和d设置默认值为default
        var [a,b,c='default',d='default']=[1,2,3];
        console.log(a+' | '+b+' | '+c+' | '+d);//1 | 2 | 3 | default

6、解构时未赋值的变量值为undefined

//给c和d设置默认值为default
        var [a,b,c]=[1,2];
        console.log(a+' | '+b+' | '+c);//1 | 2 | undefined

优点：代码简单，清晰

7、ES6内部使用严格等于（===）判断一个位置是否有值

所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

//数组成员不严格等于undefined，默认值不会生效
   var [x=1,y=2,z=3]=[undefined,"undefined",null];
   console.log("x: "+x);//x: 1
   console.log("y: "+y);//y: undefined
   console.log("x: "+z);//x: null

8、默认值是表达式，表达式惰性求值

只有在用到的时候才会求值。

function f(){
    console.log("aaa");
}
let[x=f()]=[1];//x能取到值，f根本不会执行

相当于

let x;
if([1][0]===undefined){
    f();
}else{
    x=[1][0];
}
console.log(x);