zoukankan      html  css  js  c++  java
  • ES6

    变量的解析赋值

    数组的解析赋值

    • es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构

        var a = 1;
        var b = 2;
        var c = 3;
        //在es6中允许写成:
        var [a,b,c] = [1,2,3];
        //表示从数组中提取值,按照位置的对应关系对变量赋值
      

    本质为:“模式匹配”。
    如果解构不成功,变量的值就等于undefined

        var [foo] = [];
        var [bar, foo] = [1];
        // foo的值为undefined
        let [x,y,....z] = ['a'];
        x //"a"
        y //undefined
        z //[]
    
        let  [a, [b], d] = [1, [2,3], 4];
    

    上面的例子为不完全解构,但是可以成功。如果等号的右边不是数组(或者严格的说,不是可遍历的结构),那么就会报错。

    • 解构赋值允许有指定的默认值

         var  [foo = true] = [ ];
         foo //true
         
         [x, y = 'b'] = ['a']; //x = 'a' , y = 'b'
      

      注意:es6内部使用严格相等运算符(===)判断一个位置是否有值,所以一个数组成员不严格等于undefined,默认值是不会生效的,

        var [x = 1] = [undefined]; //x = 1
        var [x = 1] = [null]; //x = null
      

    对象的解构赋值

    解构不仅仅用于数组,还可以用于对象,

        var { foo ,bar} = { foo : "aaa",bar : "bbb"};
        foo //"aaa"
        bar //"bbb"  
    

    对象的解构与数组有一个重要的不同。数组的元素是按照次序排列的,变量的取值由他的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。也就是说,对象的解构赋值的内部机制是先找到同名的属性,然后再赋值给对应的变量。真正被赋值的后者,而不是前者。

        var {foo :baz} = {foo :"aaa", bar :"bbb"};
        baz // aaa
        foo //error:foo is not undefined
    

    这段代码说明,真正被赋值的是变量baz,而不是模式foo

    字符串的解构赋值

    这是因为,此时字符串被转换成了一个类似数组的对象。

    const [a,b,c,d,e] = 'hello';
    a // "h"
    b //"e"
    ..
    

    类似数组对象都有length属性,因此还可以对这个属性解构赋值。

    let {length :len} = 'hello';
    len //5
    

    数值和布尔值的解构赋值

    解构赋值时,如果等号右边是数值或是布尔值,就先转为对象。解构赋值的原则是:只要的等号右边不是对象,就先将它转为对象。由于undefined和null无法转为对象,所以对他们进行解构赋值都会报错。

    函数参数的解构赋值

     function add([x ,y]){
         return x+y;
     }
     add([1,2]); //3
    

    上面的代码中,函数add的参数实际上不是一个数组,而是通过解构获得的变量x,y。
    undefined会触发函数参数的默认值

    [1,undefined,3].map((x = 'yes') => x)
    // [1,'yes',3]
    

    用途

    • 变换变量的值

         [x,y] = [y,x];
      
    • 从函数返回多个值

         function show(){
             return [1,2,3];
         }
         var [a,b,c] = show();
         //返回一个数组
      
    • 函数参数的定义
      解构赋值可以方便的将一组参数与变量名对应起来

       function f([x,y,z]){...}
       f([1,2,3])
      
    • 提取JSON数值

           var jsondata = {
               id: 34,
               status: "ok",
               data: [232,433]
           }
           let {id, status, data: number} =jsondata;
           console.log(id, status, number); //42, ok, [232,433]
      
    • 函数参数的默认值

    • 遍历Map结构
      任何部署了iterator接口的对象,都可以用for....of循环遍历,Map数据原生支持该接口,配合变量的解构赋值,获取键名和键值就很方便了。

         var map = new Map();
         map.set('first', 'hello');
         for(let[key, value] o
         f map){
             console.log(key + "is" + value);
         }
      
    • 输入模板的指定方法

  • 相关阅读:
    toastr.js插件用法
    JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
    定制jQuery File Upload为微博式单文件上传
    微信开放平台开发(2) 网站应用微信登录
    MVC-Model数据注解(三)-Remote验证的一个注意事项
    FormsAuthentication.SetAuthCookie
    async/task/await
    Using Repository Pattern in Entity Framework
    jquery.inputmask 输入框input输入内容格式限制插件
    C# Random 生成不重复随机数
  • 原文地址:https://www.cnblogs.com/yehui-mmd/p/6288446.html
Copyright © 2011-2022 走看看