ECMAScript6--3.解构赋值

2017-10-17 本文已影响26人飞菲fly

1.什么是解构赋值
解构赋值的语法上就是一个赋值；
解构：左边一种结构，右边一种结构，左右一一对应进行赋值；

2.解构赋值的分类

数组解构赋值： 左右结构都是数组叫做数组解构赋值；
对象解构赋值： 左右都是对象叫做对象解构赋值；
字符串解构赋值： 左边是字符串右边是数组，这种叫字符串解构赋值；
布尔值解构赋值： 都属于对象解构赋值的一种；
数值解构赋值： 都属于对象解构赋值的一种；

函数参数解构赋值： 数组解构赋值在函数参数这块的一个应用；

eg：1.

     {
          let a, b,rest;
          [a,b] = [1,2]; //数组类型解构赋值；a赋值为1，b赋值为2
          console.log(a,b);//1,2
        }

{
          let a, b, rest;
          [a,b,...rest]=[1,2,3,4,5,6];
          console.log(a,b,rest); //1,2,[3,4,5,6]
        }

3.对象的解构赋值

      {
          let a =b;
          ({a,b}={a:1,b:2})
          console.log(a,b);//1 2
      }

       {
          let a, b, c,rest;
          [a,b,c=3] = [1,2]; 
          console.log(a,b,c);//1,2,3
        } 
        
        {
          let a, b, c,rest;
          [a,b,c] = [1,2]; 
          console.log(a,b,c);//1,2,undefined
        }

如果解构赋值没有在结构上成功配对，左边是[a,b,c] 右边是[1,2]c就没有找到与它配对的值，这种c就为undefined；只声明了未赋值；所以c=3默认值就是来解决这个问题的；（c=3防止了没有配对成功时默认值为undefined）

什么场景下用数组解构赋值？

1.关于变量的交换

        {
            let a =1;
            let b =2;
            [a,b]=[b,a];//使用解构赋值轻松的实现了变量交换
            console.log(a,b);//2 1
        }

         {
            function f(){
               return [1,2]; 
            }
            let a, b;
            [a,b] = f();
            console.log(a,b); //1 2
        }

3.当返回多个值的情况下，可以选择行的去接收某几个变量
（忽略某些返回值，只关心想要的）

       {
            function f(){
                return [1,2,3,4,5]
            }
            let a,b,c;
            [a,,,b] = f();
            console.log(a,b);//1 4
        }

4.不确定这个函数返回数组的长度是多少，只关心第一个，其余的返回一个数组就可以了，想用就去遍历，不想用就放那里

         {
            function f(){
                return [1,2,3,4,5]
            }
            let a,b,c;
            [a,...b] = f();
            //[a,,...b] = f();//1  [3,4,5]
            console.log(a,b);//1 [2,3,4,5]
        }}

对象解构赋值

左侧一定是一个对象的格式，右侧也是对象的格式，是通过key、value去匹配的

        {
            let o ={p:42,q:true};
            let {p,q} =o;
            console.log(p,q);//42 true
        }

2.默认值处理
a的默认值是10，后边对它重新赋值是3，最后输出结果是3；
b默认值是5，后边没有对b重新赋值，b就是5；

        {
            let {a=10,b=5}={a=3};
            console.log(a,b);//3 5
        }

3.对象解构赋值重要的使用场景：
（嵌套对象和数组的一个运用；）
前端和服务端通信使用的格式是json；json可以理解是一个对象；

        {
            let metaDate={
                title:'abc',
                test:[{
                    title:'test',
                    desc:'description'
                }]
            }
            let {title:esTitle,test:[{title:cnTitle}]} = metaDate;
            console.log(esTitle,cnTitle);//abc test
        }

ECMAScript6--3.解构赋值

猜你喜欢

热点阅读