欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

es6语法-解构赋值

程序员文章站 2022-07-16 22:08:19
...

左边一种结构、右边一种结构,左右进行一一对应赋值。
左右都是数组☞数组解构赋值;
左右都是对象☞对象解构赋值;
……
解构赋值的分类:数组解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值。

数组解构赋值

{
    let a,b;
    [a,b] = [1,2];
    console.log(a,b);
}   
输出结果:1 2

数组解构赋值的默认值:

{
    let a,b,c;
    [a,b,c=3] = [1,2];
    console.log(a,b,c);
}   
输出结果:1 2 3
若不给c赋值,即c没有默认值,如下
{
    let a,b,c;
    [a,b,c] = [1,2];
    console.log(a,b,c);
}   
输出结果: 1 2 undefined
备注:若解构赋值未在解构上成功配对,如上的c没有找到与之配对的值,即为undefined。默认值就是用来解决这种问题的,即如上给其赋值为c=3。

使用场景:

1、变量的交换
{
    let a = 1;
    let b = 2;
    [a,b] = [b,a];
    console.log(a,b);
}   
输出结果:2 1
之前的变量替换(ES5中)需借助一个中间变量做存储。
2、
{
    function f(){
        return [1,2];
    }
    let a,b;
    [a,b] = f();
    console.log(a,b);
}   
输出结果:1 2
原来的做法:先给一个变量接收函数运行的结果,然后按索引返回0,1这2个位置才能取到这个值。
3、当返回多个值的情况下,可选择性地接收某2个变量或某几个变量
{
    function f(){
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a,,,b] = f();
    console.log(a,b);
}   
输出结果:1 4
4、不确定函数返回的数组长度是多少,我只关心第1个,其余的返回数组即可,想用就去遍历,不想用就放着
{
    function f(){
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a,...b] = f();
    console.log(a,b);
}   
输出结果:1 [2, 3, 4, 5]

a是1,b是[2,3,4,5]

3、4场景可混合使用:
{
    function f(){
        return [1,2,3,4,5];
    }
    let a,b,c;
    [a,,...b] = f();
    console.log(a,b);
}   
输出结果:1 [3, 4, 5]

对象的解构赋值

{
    let a,b;
    ({a,b} = {a:1,b:2});
    console.log(a,b);
}   
输出结果:1 2
{
    let d = {p:33,q:true};
    {p,q} = d;
    console.log(p,q);
}   
输出结果:33 true
对象解构赋值的左侧一定是对象格式,右侧也是,它是按key-value的形式去匹配的。

对象的默认值

{
    let {a=10,b=5} = {a:3};
    console.log(a,b);
}
输出结果:3 5
a的默认值是10,之后对其重新赋值为3;b默认值为5,之后未对其赋值。

嵌套对象和数组的应用

{
    let mData = {
        title:'abc',
        test:[{
            title:'name',
            desc:'description'
        }]
    }
    let {title:esTitle,test:[{title:cnTitle}]}=mData;
    console.log(esTitle,cnTitle);
}   
输出结果:abc name
相关标签: es6