ES6新特性——变量的解构赋值

最新推荐文章于 2024-07-10 17:44:06 发布

恬一

最新推荐文章于 2024-07-10 17:44:06 发布

阅读量128

点赞数

分类专栏： ES6 阮一峰文章标签： es6

本文链接：https://blog.csdn.net/weixin_44158539/article/details/109630446

版权

ES6 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

阮一峰

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
           解构
              ES6允许按照一定模式，从数组和对象中提取值
              对变量机型赋值，这被称为解构
         */
         let a=1;
         let b=2;
         let c=3;
         //上述代码等价于
         //let[a,b,c]=[1,2,3];


         //eg:
         let [foo,[[bar,baz]]]=[1,[[2,3]]]
         console.log(foo);
         console.log(bar);
         console.log(baz);

         let[,,third]=["foo",'bar','baz'];
         console.log(third);

         let[x,,y]=[1,2,3];
         console.log(x);
         console.log(y);

         let[head,...tail]=[1,2,3,4];
         console.log(head);
         console.log(tail);

         let[w,p,...q]=['a'];
         console.log(w);
         console.log(p);
         console.log(q);
         //如果解构不成功，变量的值就等于undefined
         /* 
            不完全解构:
              等号左边的模式只能匹配一部分等号右边的数组
          */
          let[g,k]=[1,2,3];
          console.log(x);
          console.log(y);

          let [s,[d],f]=[1,[2,3],4]
          console.log(s);
          console.log(d);
          console.log(f);
          /* 
             默认值：
                解构赋值允许指定默认值
           */
            let[fo=true]=[];
            console.log(fo);

            //ES6内部使用严格相等运算符(===)判断一个位置是否有值
            //只有一个数组成员严格等于undefined,默认值才会生效
            let[aa=1]=[undefined];
            console.log(aa);//1

            //null不严格等于undefined,因此默认值不生效
            let[bb=2]=[null];
            console.log(bb);//null

            

            /* 
                对象的解构赋值
                   1.解构不仅可以用于数组，还可以用于对象
                   2.对象的解构与数组有一个重要的不同：
                          数组的元素是按次序排列的二，变量的取值由它的位置决定
                          而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
             */
             //变量与属性一致
             let{oo,ba}={oo:'aa',ba:'bb'};
             console.log(oo);
             console.log(ba);
             //变量与属性不一致，解构失败，变量的值等于undefined
             let{bz}={bq:'xx'};
             console.log(bz);//undefined
             //如果变量名与属性名不一致，必须写成如下格式
             let{fqo:az}={fqo:'acsxzs',be:'ddczc'};
             console.log(az);

             let obj={first:'hello',last:'world'};
             let{first:l,last:r}=obj;
             console.log(l);
             console.log(r);
             //简写：
             //let{first:l,last:r}={l:'hello',r:'world'};
             //即对象的解构赋值的内部机制，可以先找到同名属性，然后再赋给对应的变量 
             
             
             //解构也可用于嵌套结构的对象
             //eg:
             const node={
                 loc:{
                     start:{
                         line:1,
                         colum:5
                     }
                 }
             };
             let{loc,loc:{start},loc:{start:{line}}}= node;
             console.log(line);
             console.log(loc);
             console.log(start);
             //对象的解构赋值可以取到继承的属性
             const obj1={};
             const obj2={aqq:'adz'};
             Object.setPrototypeOf(obj1,obj2);//设置obj1的原型为obj2
             const{aqq}=obj1;
             console.log(aqq);
             //如果解构模式是嵌套的对象，而对象所在的父属性不存在，那么将会报错
             //let{foo:{ar}}={baz:'baz'}; 报错


             /* 
                 默认值：
                     对象的解构也可以指定默认值
                     
              */
            var {x=3}={};
            console.log(x);

        var{x,y=4}={x:1};
        console.log(x);//1
        console.log(y);//4

        var {x:y=3}={}    //变量:属性  :代表变量对应的属性，起衔接作用
        console.log(y);//y=3   x is not defined

        var {x:y=3}={x:5}
        console.log(y);   //y=5

        var{x=3}={x:undefined};
        console.log(x);//3

        var{x=3}={x:null}
        console.log(x);//null

        /* 
           注意：
             如果将一个已经声明的变量用于解构赋值，必须非常小心
             错误写法示例：
             let x;
             {x}={x:1};
             该代码报错的原因是JavaScript引擎会将{x}理解成一个代码块，
             从而发生语法错误
             解决办法：
                将整个赋值语句放在一个圆括号里
                正确写法：
                let x;
                ({x}={x:1});
         */
         //对数组进行对象属性的解构
         let arr=[1,2,3];
         let{0:first,[arr.length-1]:last}=arr;
         console.log(first);//0键对应的值是1
         console.log(last);//arr.length-1对应的是2键，2键对应的值是3

         //字符串的解构赋值
         const[a,b,c,d,e]='hello'
         console.log(a);//h
         console.log(b);//e
         console.log(c);//l
         console.log(d);//l
         console.log(e);//o

         let{length:len}="hello";
         console.log(len);//55

         //数值和布尔值的解构赋值
         /* 
            解构赋值时，如果等号右边是数值和布尔值，则会先转为对象
          */
          let{toString:s}=123;
          console.log(s===Number.prototype.toString);//true
          let{toString:s}=true;
          console.log(s===Boolean.prototype.toString);

          //函数参数的解构赋值
          function add([x,y]){
              return x+y;
          };
          console.logadd([1,2]);
    </script>
</body>
</html>

恬一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6新特性——变量的解构赋值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&gt
复制链接

扫一扫