ES6的变量解构赋值

Posted 2020-10-10 baiyunke

  前  言

ES6

　解构赋值：

　　　　ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构。

1.1 数组的结构赋值

1.1.1基本用法

JS中，为变量赋值直接指定。例如下面代码：

    <script type="text/javascript">
        var a = 1;
        var b = 2;
        var c = 3;
    </script>

 

在ES6中可以这样写。例如下面代码：

    <script type="text/javascript">
        var [a,b,c] = [1,2,3];
        console.log(a);    //-->1
    </script>

 

这种写法属于“模式匹配” ，只要等号两边模式相同，左边的变量就会被赋予对应的值。例如下面代码：

    <script type="text/javascript">
        var [a,[[b],c]] = [1,[[2],3]];
        console.log(a);    //-->1
        console.log(b);    //-->2
        console.log(c);    //-->3
    </script>

        var [,,d] = [1,2,3];
        console.log(d);    //-->3

        var [e,...f] = [1,2,3,4];
        console.log(e);    //-->1
        console.log(f);    //-->[2,,3,4]

 

如果解构不成功，变量的值就是undefined。例如下面代码：

        var [x,y,...z] = [1];
        console.log(x);    //-->1
        console.log(y);    //-->undefined
        console.log(z);    //-->[]

 

如果等号的右边不是数组，或者说不可以遍历的结构，就会报错。例如下面代码：

        var [a] = 1;
        var [a] = aaa;
        var [a] = NaN;
        var [a] = undefined;
        var [a] = null;
        var [a] = {};

 

1.1.2默认值

 结构赋值允许指定默认值。例如下面代码：

        var [a,b=2] = [1];
        console.log(a);    //-->1
        console.log(b);    //-->2

        var [a,b=2] = [1,undefined];
        console.log(a);    //-->1
        console.log(b);    //-->2

　　注意：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

 

1.2对象的解构赋值

解构不仅可以用在数组上，也可以用到对象上。例如下面代码：

        var {a,b} = {a:1,b:2};
        console.log(a);    //-->1
        console.log(b);    //-->2

　　对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

        var {a,b} = {b:1,a:2};
        console.log(a);    //-->2
        console.log(b);    //-->1

 

 当找不到对应的键名是，会取不到值，最后等于undefined。例如下面代码：

        var {c} = {b:1,a:2};
        console.log(c);    //-->undefined

 

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。例如下面代码：

        var {a:b} = {a:1,b:2};
        console.log(b);    //-->1

　　　　　　console.log(a); //-->a is not defined

 

与数组一样，结构也用与嵌套结构的对象。例如下面代码：

        var obj = {
          p: [
            1,
            { b: 2 }
          ]
        };
        
        var { p: [a, { b }] } = obj;
        console.log(a);    //-->1
        console.log(b);    //-->2

 

 对象的结构也可以指定默认值。例如下面代码：

        var {a=1} = {};
        console.log(a);    //-->1

 

1.3字符串的解构赋值

 字符串也可以解构赋值。字符串被转换成 一个类似数组的对象。例如下面代码：

        var [a,b,c,d] = "1234";
        console.log(a);    //-->1 
        console.log(b);    //-->2 
        console.log(c);    //-->3 
        console.log(d);    //-->4 

 

 类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值。例如下面代码：

        var {length : a} = "1234";
        console.log(a);    //-->4

 

1.4数值和布尔值的解构赋值

 解构赋值时，如果等号右边是数值或布尔值，会先转化为对象。例如下面代码：

        var {toString:a} = 123;
        console.log(a === Number.prototype.toString)    //true
        
        var {toString:a} = false;
        console.log(a === Boolean.prototype.toString)    //true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量a都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。例如下面代码：

        var { prop: x } = undefined; // TypeError
        var { prop: y } = null; // TypeError

 

1.5函数参数的解构赋值

 

        function he([a, b]){
          return a + b;
        }
        
        console.log(he([2, 2])); // -->4

 

 上面代码中，函数he的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量a和b。对于函数内部的代码来说，它们能感受到的参数就是a和b。例如上面代码：

        function move({x = 0, y = 0} = {}) {
          return [x, y];
        }
        
        console.log(move({x: 3, y: 8})); // -->[3, 8]
        console.log(move({x: 3})); //-->[3, 0]
        console.log(move({})); //-->[0, 0]
        console.log(move()); //-->[0, 0]

上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。例如上面代码：

 

1.6小括号问题

　　解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。

　　由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

　　但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。

1.6.1不能使用小括号情况

 

1.变量声明语句：变量声明语句，模式不能使用圆括号。

        var [(a)] = [1];

        var {x: (c)} = {};
        var ({x: c}) = {};
        var {(x: c)} = {};
        var {(x): c} = {};
        
        var { o: ({ p: p }) } = { o: { p: 2 } };

2.函数参数：函数参数也属于变量声明，因此不能带有圆括号。

        // 报错
        function f([(z)]) { return z; }
        function f([z,(x)]) { return x; }

3.赋值语句的模式

        ({ p: a }) = { p: 42 };
        ([a]) = [5];    

 

1.6.2可以使用小括号的情况

 可以使用小括号的情况只有一种：赋值语句的非模式部分，可以使用小括号。例如下面代码：

        [(b)] = [3]; 
        console.log(b);    //-->3
        ({ p: (d) } = {});
        [(parseInt.prop)] = [3];