ES6 - 变量的解构赋值学习笔记

时间：2021-10-09 15:42:44

变量的解析赋值

数组的解析赋值

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

  • 输入模板的指定方法

相关文章