Object.assign 与展开运算符（...）：全面解析差异与应用场景

前端

2023-11-10 11:31:05

Object.assign()

Object.assign()方法接受两个或更多个对象作为参数，并将它们的属性复制到目标对象中。它将覆盖目标对象中具有相同属性的对象，并返回更新后的目标对象。

优点：

简洁的语法，便于使用。
可以轻松地将多个对象的属性合并到一个目标对象中。

缺点：

浅拷贝：Object.assign()创建目标对象的浅拷贝，意味着它只复制对象的属性，而不复制嵌套对象的引用。
无法覆盖目标对象中同名属性的getter或setter方法。

展开运算符（...）

展开运算符（也称为扩展运算符）是一种语法糖，它允许将一个数组或对象的元素展开为另一个数组或对象。在合并对象时，展开运算符会将源对象的属性逐个添加到目标对象中。

优点：

允许将多个对象的属性合并到一个目标对象中，语法简洁。
深拷贝：展开运算符创建目标对象的深拷贝，这意味着它也会复制嵌套对象的引用。
可以覆盖目标对象中同名属性的getter或setter方法。

缺点：

比Object.assign()语法更冗长。
对于合并大型对象，性能可能不如Object.assign()。

性能比较

在大多数情况下，Object.assign()的性能优于展开运算符。这是因为Object.assign()使用原生代码来复制对象，而展开运算符需要创建一个新的对象并遍历源对象。然而，对于大型对象，展开运算符的深拷贝功能使其在某些情况下更适合。

使用场景

选择Object.assign()还是展开运算符取决于具体的用例：

当需要浅拷贝对象且性能至关重要时，使用Object.assign()。 例如，在将对象传递给函数作为参数时。
当需要深拷贝对象或覆盖目标对象中同名属性的getter或setter方法时，使用展开运算符。 例如，在创建对象副本以进行修改或存储时。
当需要将多个对象的属性合并到一个目标对象中时，可以根据具体情况选择Object.assign()或展开运算符。

示例

Object.assign()

const target = {
  name: 'John Doe',
};

const source1 = {
  age: 30,
};

const source2 = {
  city: 'New York',
};

Object.assign(target, source1, source2);

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

展开运算符（...）

const target = {
  name: 'John Doe',
};

const source1 = {
  age: 30,
};

const source2 = {
  city: 'New York',
};

const mergedObject = { ...target, ...source1, ...source2 };

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