ZDMission

Destructuring解构

解构赋值：ES6允许按照 一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（destructuring），通俗一点讲：左边一个结构，右边一个结构，左右一一对应进行赋值

解构赋值分类：

一、数组解构赋值

  • 第一种：let [a,b]=[1,2] console.log(a,b);//1,2 ab的值

  • 第二种：数组可以嵌套赋值，比如 let [a,b,[c1,c2]] = [1,2,[3,4]] 那么c1 = 3，c2 = 4

  • 第三种：不完全解构 比如 let [a,b,c] = [1,2] 但这并不影响对a，b赋值，c的值为undefined

允许有默认值 比如 let [a,b,c=3] = [1,2] 如果有对应的值，那么默认的值便会被覆盖，如果那个新值是undefined，那么默认值是不会被覆盖的 或者另一种方式

let [a,b,...rest]=[1,2,3,4,5,6] 得到的结果便是a = 1,b = 2, rest = [3,4,5,6]

二、对象解构赋值(左边是一个对象，右边也是一个对象)

  • 第一种：let {a,b,c} = {"a":1, "b":2, "c":3}对应abc的值便是123，如果我们改变右边对象属性的顺序，结果依然是一样的，不会变化，而数组的结构赋值像这样是不行的

  • 第二种：let {a} = {"b":2} 如果变量找不到与其名字相同的属性，便会赋值不成功，a的值undefined

这样也不是没有办法解决，可以这样let {b:a} = {"b":2} 那么a的值便是2

同样对象的解构赋值也是可以嵌套，也可以设定默认值

字符串解构赋值

let [a,b,c,d] = ''世界那么大''; //a = "世" ，b = "界" c = "那" d = "么"

三、布尔解构赋值

四、函数参数解构赋值

五、数值解构赋值

六、解构赋值的使用场景

1.交换变量的值

let a = 1,b = 2;
[a,b] = [b,a]
console.log(a,b) // 2  1
1
2
3

以前我们要交换变量的值的话，会借用一个中间变量

2.提取函数返回多个值

functiong hello(){
    return [1,2];
}
let [a,b] = hello();  //那么ab的值便是1 2
// 又或者是这样的情况
functiong hello(){
    return [1,2，3,4,5];
}
let a,b,c;
[a,,,b] = hello();//那么a b的值是1  4，说明了当函数返回多个值的时候，我们可以选择性的拿到想要的数据 ，忽略掉其他值
1
2
3
4
5
6
7
8
9
10

又例如

functiong hello(){
    return [1,2，3,4,5];
}
let a,b,c;
[a,...b] = hello(); //那么a的值是1 ，而b则是一个数组[2,3,4,5]
// 这中情况说明，我只想关心a的值是1，b的具体值不关心，返回一个数组赋给b就行
// 当然这样的模式是可以混合使用的 比如[a,,...b]
1
2
3
4
5
6
7

3.前端后端通信的信息，是一个json对象

let data = {
    title:'hello',
    desc:[{
        title:'world',
        desc:'decription'
    }]
}
let {title:estitile,test:[{title:entitle}]} = data;
对应的estitle的值为hello，entitle的值为world
1
2
3
4
5
6
7
8
9

4.定义函数参数

functiong hello({a,b,c}){
    console.log(a);
    console.log(b);
    console.log(c);
}
hello({a:"zd", b:"xy", c:"haha", d:"dfdf"})
// 这种写法，很容易就可以提取json对象中想要的参数，而不需要管其他更多的参数,比如本例中d
1
2
3
4
5
6
7

5.函数参数的默认值

functiong hello({a="zd"}){
    console.log(a);//如果调用函数的时候给a传值了，那么a的值便是传入的那个值，否则便是默认设置的值
}
// 传统赋默认值的比较麻烦，还需要判断参数是不是为undefined，其次再做相应的逻辑处理
1
2
3
4

← Generator函数 →