解构赋值

解构赋值

什么是解构赋值:

语法上就是赋值的作用。

解构:左边一种结构，右边一种结构，左右一一对应进行赋值。

解构赋值的分类:

数组解构赋值           --重点

对象解构赋值           --重点

字符串解构赋值

布尔值解构赋值

函数参数解构赋值

数值解构赋值

1.数组解构赋值 

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

{
    let a,b,rest;
    [a,b,...rest]=[1,2,3,4,5,6]
}

解构赋值的特性:   ... 把其它的归为一个数组。

3.对象解构赋值

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

其它的类型都是从这2种上做的延伸.

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

可以给c赋值默认值，防止没有成功配对赋值时候值为undefind情况

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

实现了变量的交换，以前需要用一个值存储。

数组解构赋值使用场景：1

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

2：

{
    function f() {
        return [1, 2, 3, 4, 5]
    }

    let a, b, c;
    [a, , , b] = f();
    console.log(a, b)
}

第一个逗号之间对应的是2，第二个对应的是3，第三个对应的是4也就是b。这种情况就是忽略其它返回值，只关心自己想要的。

3：

{
    function f() {
        return [1, 2, 3, 4, 5]
    }

    let a, b, c;
    [a, ...b] = f();
    console.log(a, b)
}

取第一个元素，其它的为一个数组。可以和，混合使用

对象的解构赋值：

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

默认值：

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

对象解构赋值场景:

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

模拟了一个json数据，然后把其中我们想要的值取出来赋值给 变量，是不是很简单，特别常用。