zoukankan      html  css  js  c++  java
  • ES6的变量解构赋值

      前  言

    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都能取到值。

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

            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的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量ab。对于函数内部的代码来说,它们能感受到的参数就是ab。例如上面代码:

            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的参数是一个对象,通过对这个对象进行解构,得到变量xy的值。如果解构失败,xy等于默认值。例如上面代码:

    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];
  • 相关阅读:
    委托与事件参数的简单运用
    C#消息队列专题
    项目计划流程简易描述
    cookies 客户端历史记录篇
    朋友做的VS2005插件:等号两边值互换
    SSE2指令集系列之二
    SSSE3指令集
    SSE3指令集系列
    SSE特殊指令集系列之一
    SSE2指令集系列之一
  • 原文地址:https://www.cnblogs.com/baiyunke/p/7673547.html
Copyright © 2011-2022 走看看