展开运算符 vs Object.assign：做出正确的选择

展开运算符 vs Object.assign：做出正确的选择

概述

在 JavaScript 中，Object.assign() 方法用于将一个或多个源对象的属性复制到目标对象。对象扩展运算符（...）是 ES6 中引入的一种语法糖，它允许您将一个对象展开为另一个对象。

比较

特性	Object.assign()	对象扩展运算符（...）
语法	Object.assign(target, ...sources)	{...target, ...source1, ...source2, ...}
可变性	目标对象是可变的	目标对象是不可变的
性能	较慢	较快
使用场景	合并多个对象	克隆对象、合并对象

何时使用 Object.assign()？

Object.assign() 方法适用于您需要将多个源对象的属性复制到目标对象的情况。例如，您可以使用 Object.assign() 方法来合并两个对象：

const obj1 = {
  name: 'John Doe',
  age: 30
};

const obj2 = {
  city: 'New York',
  country: 'USA'
};

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj); // { name: 'John Doe', age: 30, city: 'New York', country: 'USA' }

何时使用对象扩展运算符（...）？

对象扩展运算符（...）适用于您需要克隆对象或合并对象的情况。例如，您可以使用对象扩展运算符（...）来克隆对象：

const obj1 = {
  name: 'John Doe',
  age: 30
};

const clonedObj = {...obj1};

console.log(clonedObj); // { name: 'John Doe', age: 30 }

您还可以使用对象扩展运算符（...）来合并对象：

const obj1 = {
  name: 'John Doe',
  age: 30
};

const obj2 = {
  city: 'New York',
  country: 'USA'
};

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

console.log(mergedObj); // { name: 'John Doe', age: 30, city: 'New York', country: 'USA' }

结论

Object.assign() 方法和对象扩展运算符（...）都是非常有用的工具，可以用于各种各样的场景。在选择使用哪种方法时，您需要考虑您的具体需求。如果您需要将多个源对象的属性复制到目标对象，那么 Object.assign() 方法是更好的选择。如果您需要克隆对象或合并对象，那么对象扩展运算符（...）是更好的选择。