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);
     }
  

• 输入模板的指定方法