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的属性 prop1和prop3 都是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的属性 prop1和prop3 都是obj2中定义的值，但索引顺序与obj1一致

• 由上可知，用展开符更新对象属性时
  • 之前未出现的属性按索引顺序往后顺延并赋值
  • 之前出现过的属性更新为后者的值，索引顺序不变