ES6 展开运算符 更新对象属性

ES6 展开运算符 更新对象属性

  • 假设我们有如下两个对象
const obj1 = {
    prop1: 1,
    prop2: [1,2,3],
    prop3: {
        'o1Sub': {
            use: true
        }
    },
};

let obj2 = {
    prop1: 2,
    prop3: {
        'o2Sub': {
            unuse: true
        }
    }
};

  • 现在我们先输出obj2看看它的属性都是什么样,然后用展开运算符更新obj2,再输出obj2看看它的属性发生了什么变化
console.log(obj2);
// { prop1: 2, prop3: { o2Sub: { unuse: true } } }

obj2 = {...obj2, ...obj1};

console.log(obj2);
// { prop1: 1, prop3: { o1Sub: { use: true } }, prop2: [ 1, 2, 3 ] }

可以看到obj2的属性 prop1prop3 都是obj1中定义的值,但索引顺序仍在前面

  • 现在我们换一下展开运算符的顺序,先展开obj1再展开obj2
console.log(obj2);
// { prop3: { o2Sub: { unuse: true } } }

// obj2 = {...obj2, ...obj1};
obj2 = {...obj1, ...obj2};

console.log(obj2);
// { prop1: 2, prop2: [ 1, 2, 3 ], prop3: { o2Sub: { unuse: true } } }

可以看到obj2的属性 prop1prop3 都是obj2中定义的值,但索引顺序与obj1一致

  • 由上可知,用展开符更新对象属性时
    • 之前未出现的属性按索引顺序往后顺延并赋值
    • 之前出现过的属性更新为后者的值,索引顺序不变
参与评论 您还未登录,请先 登录 后发表或查看评论
相关推荐

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

WaylonWon

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值