es6语法-解构赋值

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

数组解构赋值
{
    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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值