ECMAScript6--3.解构赋值

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

2.解构赋值的分类

  • 数组解构赋值: 左右结构都是数组叫做数组解构赋值;

  • 对象解构赋值: 左右都是对象叫做对象解构赋值;

  • 字符串解构赋值: 左边是字符串右边是数组,这种叫字符串解构赋值;

  • 布尔值解构赋值: 都属于对象解构赋值的一种;

  • 数值解构赋值: 都属于对象解构赋值的一种;

  • 函数参数解构赋值: 数组解构赋值在函数参数这块的一个应用;

    eg:1.

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

    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
          }
    

    4.

           {
              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
        }

2.

         {
            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去匹配的

1.

        {
            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
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容