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);
       }
    
  • 输入模板的指定方法

原文地址:https://www.cnblogs.com/yehui-mmd/p/6288446.html