ES6-变量的解构赋值(数组、对象、特殊对象、实际用途)

r囧r小猫 2022-05-15 04:05 180阅读 0赞

**1.数组的解构赋值**

(1)语法形式，左边变量，右边值，只需左右模式匹配即可：例：let\[a,b,c,d\]=\[10,20,30,40\]

<script>
         // let a=10;
          // let b= 20;
          // let c=30;
          //以上通过解构赋值表示：
          let[a,b,c]=[100,200,300]
          console.log(a,b,c);
    </script>

复杂数组案例：

<script>
    let[ ba, [[b]b,[bc,bd]]]=[100,[200],[300,400]];
    console.log(ba,bb,bc,bd);
    </script>

(2) 两边模式不能匹配，也可以进行解构：

例子1：

<script>
    let[a, ,b]=[1,2,3];//声明变量有一为空
    console.log(a,b);//输出1,3
    </script>

例子2：解构赋值，变量没有设置值，系统设置个默认值Undefined

<script>
    let[a, b,c]=[1,4];//声明值有一为空,
    console.log(a,b,c);//输出1,4，c变量输出默认值Undefined
    </script>

例子3：

<script>
    let[var1,var2='小红']=['小马'];/
    console.log(var1,var2);//输出小马,小红，var2没有给设置值，所以var2使用了自己的默认值
    </script>

例子4：

<script>
    let[var1='小红',var2]=['小马'];
    console.log(var1,var2); //输出小马,Undefined,变量没有值，默认给了Undefined
    </script>

总结：

数组的解构赋值：

保证等号两边的数组模式一样；(见例子1)

如果不能正确解构，有的变量可能会自动赋值undefined；（见例子4，例子2）

变量可以有默认值；（见例子3）

**2.对象的解构赋值**

完整格式：

let\{变量名1:变量值命名1,变量名2:变量值命名2\} = \{变量名1:变量值1,变量名2:变量值2\};

简写形式：

let\{变量名1,变量名2\} = \{变量名1:变量值1,变量名2:变量值2\};

例子：

<script>
    //简写形式
    let{bar,foo} = {bar:'li'，foo:100};
    console.log(bar,foo);
    //完整格式，对象解构赋值
    let{bar:a,foo:b} = {bar:'li'，foo:100};
    console.log(a,b);
    </script>

复杂形式：

<script>
    let obj = {
         p:[
               'hello',
               { y:'World'}
    ]
    };
    let {p:[x,y:y]}=obj;
    console.log(obj)
    </script>

**3..特殊对象的解构赋值**

一切皆对象；

字符串可以被看做是由字符组成的数组；

(1) 字符串可以当做字符组成的数组，例子：

<script>
    let[a,b,c,d,e,f,g,h,i] = 'helloworld';
    conlole.log(a);
    conlole.log(b);
    conlole.log(c);
    conlole.log(d);//输出helloworld
    </script>

(2) 字符串当成对象：例子:

<script>
    let {length:len}=''world';
    console.log(len);//输出5,对象的长度
    let{PI:p1}=Math;
    console.log(p1);//输出3.14......
    </script>

**4.实际用途**

（1）交换两个变量的值

<script>
    let a = 100;
    let b=200;
    //传统的方式
    let c = a;
    a = b;
    b = a;
    // 解构方式
    [a,b]=[b,a];//不能写成let[a,b]=let[b,a]，因为上面已经进行声明
    console.log(a,b);//输出100，200
    </script>

（2）提取json中的数据

<script>
    let jsonData = {
            id:42,
           status:'OK',
           data:[12,,4,5,6,73]
    };
    let{id,status,data} = jsonData;
    consloe.log(id,status,data);//输出42，OK,[12,,4,5,6,73]
    </script>

（3）设置函数的默认值

<script>
    function gerJson({
              url,
              type='get',
              data='',
              async=true;
    console.log(url,type,data,async);
    })
    getJson({
              url:'http://www.baidu.com',
              data:'a=100'
    })
    //输出http://www.baidu.com，get，a=100，true
    </script>

（4）ES6模块(必须使用解构赋值)

读取module.js中变量值：

export var firstName="Zhang";

export var lastName="wang";

export var year="1999";

<script>
    import{firstName,lastName,year} from './module.js';
    console.log(firstName,lastName,year);
    //输出Zhang,wang,1999
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6 - 变量的解构赋值

数组的解构赋值 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)： // 请先看一段代码 le

太过爱你忘了你带给我的痛/ 2023年10月11日 12:47/ 0 赞/ 70 阅读

相关 es6 对象的解构赋值使用

用法通常用来深拷贝对象（只能拷贝对象属性是基本数据类型的，属性本身也是个对象或数组的，拷贝的是对象的指针），类似于Object.assign方法不足当需要拷

骑猪看日落/ 2023年01月02日 06:26/ 0 赞/ 216 阅读

相关变量的解构赋值→对象的解构赋值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

矫情吗；*/ 2022年10月02日 04:44/ 0 赞/ 291 阅读

相关 ES6:变量的解构赋值

本内容摘自阮一峰先生的《ECMAScript6入门》书中第三章 -- 变量的解构赋值。变量的解构赋值用途很多。（1）交换变量的值 let x = 1;

以你之姓@/ 2022年06月14日 01:54/ 0 赞/ 230 阅读

相关 ES6变量的解构赋值

数组的解构赋值基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接

以你之姓@/ 2022年06月08日 00:29/ 0 赞/ 241 阅读

相关 es6对象的解构赋值和对象的拓展

ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。 <html> <body> <script>

偏执的太偏执、/ 2022年05月31日 11:58/ 0 赞/ 188 阅读

相关 ES6-变量的解构赋值(数组、对象、特殊对象、实际用途)

1.数组的解构赋值 (1)语法形式，左边变量，右边值，只需左右模式匹配即可：例：let\[a,b,c,d\]=\[10,20,30,40\] <script>

r囧r小猫/ 2022年05月15日 04:05/ 0 赞/ 181 阅读

相关 ES6 解构赋值详解：对象解构赋值、数组解构赋值

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。对象的解构赋值对象是通过属性名进行解构（是用的最多的解构赋值）

迈不过友情╰/ 2021年12月05日 15:09/ 0 赞/ 451 阅读

相关 es6 变量的解构赋值

ES6 变量的解构赋值作用:将对象/数组中的值，同时赋值给多个变量语法: 解构对象: let{属性名,..}=对

川长思鸟来/ 2021年07月24日 23:39/ 0 赞/ 444 阅读

相关 ES6 变量的解构赋值

基本用法 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。 v

怼烎@/ 2021年06月24日 16:11/ 0 赞/ 503 阅读