深挖 JavaScript Object.assign() 方法，轻松拷贝对象属性

2024-01-12 17:57:07

JavaScript 中的对象拷贝和合并

在 JavaScript 中，对象是引用类型，这意味着变量存储的并不是对象本身，而是一个指向该对象的引用。因此，当您将一个对象赋值给另一个变量时，实际上是将对该对象的引用复制给了新变量。

这可能会导致一些意外的结果。例如，如果您将一个对象作为参数传递给函数，并在函数内部修改该对象，那么函数外的原始对象也会受到影响。这是因为函数内部的对象实际上是原始对象的引用，因此对它的任何修改都会反映在原始对象上。

为了避免这种情况，我们需要创建原始对象的副本，而不是引用。这可以通过 Object.assign() 方法来实现。

Object.assign() 方法简介

Object.assign() 方法的语法如下：

Object.assign(target, ...sources);

其中，

target 是目标对象，用于接收源对象的可枚举属性。
sources 是一个或多个源对象，其可枚举属性将被复制到目标对象。

Object.assign() 方法的详细用法

1. 复制单个源对象

如果只有一个源对象，则 Object.assign() 方法的使用非常简单。只需将目标对象和源对象作为参数传递给该方法即可。例如：

const obj1 = { name: 'John', age: 30 };
const obj2 = Object.assign({}, obj1);

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

上面的代码将 obj1 的所有可枚举属性复制到 obj2 中。现在 obj2 是 obj1 的一个副本，对 obj2 的任何修改都不会影响 obj1。

2. 复制多个源对象

Object.assign() 方法还可以用于复制多个源对象。只需将多个源对象作为参数传递给该方法即可。例如：

const obj1 = { name: 'John', age: 30 };
const obj2 = { email: 'john@example.com', phone: '555-123-4567' };
const obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // { name: 'John', age: 30, email: 'john@example.com', phone: '555-123-4567' }

上面的代码将 obj1 和 obj2 的所有可枚举属性复制到 obj3 中。现在 obj3 是 obj1 和 obj2 的一个副本，对 obj3 的任何修改都不会影响 obj1 和 obj2。

3. 合并对象

Object.assign() 方法还可以用于合并对象。只需将目标对象和一个或多个源对象作为参数传递给该方法即可。例如：

const obj1 = { name: 'John', age: 30 };
const obj2 = { email: 'john@example.com' };
const obj3 = Object.assign(obj1, obj2);

console.log(obj3); // { name: 'John', age: 30, email: 'john@example.com' }