JavaScript 中Object.assign()和展开运算符在对象合并时的区别，各自的适用场景是什么？

JavaScript 中Object.assign()和展开运算符在对象合并时的区别，各自的适用场景是什么？

在 JavaScript 里，咱们常常要把多个对象合并成一个新对象。Object.assign()和展开运算符（...）就像两个得力小助手，能帮我们完成这个任务，但它们各有特点。

1. Object.assign()方法

Object.assign() 方法就像是一个勤劳的搬运工，它会把一个或多个源对象的所有可枚举属性复制到目标对象。它的语法是 Object.assign(target, ...sources)，这里的 target 是目标对象，sources 是源对象。

// 创建一个目标对象
const target = { a: 1, b: 2 };
// 创建一个源对象
const source = { b: 3, c: 4 };
// 使用 Object.assign() 方法将源对象的属性复制到目标对象
// 注意：如果有相同属性名，后面的会覆盖前面的
const result = Object.assign(target, source);
// 打印结果
console.log(result); // { a: 1, b: 3, c: 4 }
// 注意：Object.assign() 是直接修改目标对象
console.log(target); // { a: 1, b: 3, c: 4 }

在上面的代码中，Object.assign() 把 source 对象的属性复制到了 target 对象。如果有相同的属性名，比如 b，那么 source 对象里的 b 属性值会覆盖 target 对象里的 b 属性值。而且，Object.assign() 是直接修改目标对象的。

适用场景：当你想修改现有的对象，并且把其他对象的属性合并进去时，就可以用 Object.assign()。

2. 展开运算符（...）

展开运算符就像是一个神奇的放大镜，能把对象的属性展开。用它来合并对象很简单，只需要把多个对象用逗号隔开，再用花括号包起来就行。

// 创建一个对象
const obj1 = { a: 1, b: 2 };
// 创建另一个对象
const obj2 = { b: 3, c: 4 };
// 使用展开运算符合并对象
// 同样，如果有相同属性名，后面的会覆盖前面的
const merged = { ...obj1, ...obj2 };
// 打印结果
console.log(merged); // { a: 1, b: 3, c: 4 }
// 注意：展开运算符会创建一个新对象，不会修改原对象
console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { b: 3, c: 4 }

在这段代码里，展开运算符把 obj1 和 obj2 的属性展开，合并成了一个新对象 merged。如果有相同的属性名，后面的属性值会覆盖前面的。和 Object.assign() 不同的是，展开运算符不会修改原对象。

适用场景：当你不想修改原对象，只想创建一个新的合并后的对象时，展开运算符就派上用场了。

总结

• Object.assign() 会直接修改目标对象，适合需要修改现有对象的情况。
• 展开运算符会创建一个新对象，适合需要保留原对象不变的情况。

在实际开发中，如何选择使用Object.assign()还是展开运算符？

在实际开发里，选择使用 Object.assign() 还是展开运算符（...），需要结合具体的业务场景、代码风格和性能需求来考量，下面是一些实用的选择建议：

从代码简洁性和可读性考虑

• 展开运算符：其语法简洁直观，能让代码更易读。当合并对象数量较少时，使用展开运算符能让代码一目了然。

// 创建对象 obj1
const obj1 = { a: 1 };
// 创建对象 obj2
const obj2 = { b: 2 };
// 创建对象 obj3
const obj3 = { c: 3 };
// 使用展开运算符合并对象
const merged = { ...obj1, ...obj2, ...obj3 };
console.log(merged); // { a: 1, b: 2, c: 3 }

• Object.assign()：如果合并对象较多，使用 Object.assign() 会使代码显得冗长，因为它的参数列表会很长。不过，当你熟悉这种写法时，它在语义上也比较清晰，表明是在进行对象属性的复制操作。

// 创建对象 obj1
const obj1 = { a: 1 };
// 创建对象 obj2
const obj2 = { b: 2 };
// 创建对象 obj3
const obj3 = { c: 3 };
// 使用 Object.assign() 合并对象
const merged = Object.assign({}, obj1, obj2, obj3);
console.log(merged); // { a: 1, b: 2, c: 3 }

从是否修改原对象考虑

• 展开运算符：它会创建一个全新的对象，不会对原对象产生影响。在需要保留原对象状态，同时得到合并后的新对象时，展开运算符是更好的选择。比如在 React 或者 Vue 这类框架里，更新状态时要求不能直接修改原状态，此时使用展开运算符就很合适。

// 创建对象 original
const original = { a: 1 };
// 使用展开运算符创建新对象
const newObj = { ...original, b: 2 };
console.log(original); // { a: 1 }
console.log(newObj);   // { a: 1, b: 2 }

• Object.assign()：它会直接修改目标对象。如果有修改现有对象的需求，使用 Object.assign() 可以避免额外创建新对象带来的开销。

// 创建目标对象 target
const target = { a: 1 };
// 创建源对象 source
const source = { b: 2 };
// 使用 Object.assign() 修改目标对象
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

从兼容性考虑

• 展开运算符：它是 ES6 引入的新特性，在一些旧版本的浏览器中可能不被支持。如果项目需要兼容旧浏览器，就需要进行 Babel 转译。
• Object.assign()：它是 ES6 规范的一部分，但在大多数现代浏览器中都有良好的支持，而且可以通过 polyfill 来兼容旧浏览器。所以在兼容性要求较高的项目中，Object.assign() 可能更可靠。

从性能考虑

• 展开运算符：在大多数情况下，展开运算符的性能表现不错，尤其是合并少量对象时。但在合并大量对象或者深层嵌套对象时，性能可能会有所下降。
• Object.assign()：它的性能相对稳定，对于大量对象的合并，Object.assign() 的性能可能会更好一些。不过在实际开发中，除非是对性能有极高的要求，否则两者的性能差异通常不会成为选择的关键因素。