如何在另一个对象中复制对象属性？

在前端开发中，有时候我们需要将一个对象的属性复制到另一个对象中。这个过程可能涉及到深拷贝和浅拷贝的问题，而且也存在不同的实现方法。本文将介绍如何在 JavaScript 中实现这个过程，并提供一些示例代码。

浅拷贝 vs. 深拷贝

在开始讨论如何复制对象属性之前，我们需要了解两种常见的复制方法：浅拷贝和深拷贝。

浅拷贝是指复制一个对象的属性值到另一个对象，但如果属性的值是引用类型（如数组或对象），则只复制它们的引用。这意味着修改其中一个对象的属性值会影响另一个对象的属性值。例如：

const obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'traveling'] };
const obj2 = Object.assign({}, obj1);

obj1.hobbies.push('cooking');
console.log(obj2.hobbies); // 输出：["reading", "traveling", "cooking"]

在上面的示例代码中，我们使用 Object.assign() 方法实现了浅拷贝。然后我们修改 obj1 的 hobbies 属性，但是 obj2 的 hobbies 属性也被修改了。

相反，深拷贝是指创建一个新对象，将原对象的属性值复制到新对象中，包括引用类型的属性。这样，修改原对象的属性值不会影响新对象的属性值。例如：

const deepClone = (obj) => JSON.parse(JSON.stringify(obj));
const obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'traveling'] };
const obj2 = deepClone(obj1);

obj1.hobbies.push('cooking');
console.log(obj2.hobbies); // 输出：["reading", "traveling"]

在上面的示例代码中，我们使用 deepClone() 方法实现了深拷贝。然后我们修改 obj1 的 hobbies 属性，但是 obj2 的 hobbies 属性没有被修改。

实现对象属性复制

现在，让我们看看如何在 JavaScript 中实现对象属性复制，不管是浅拷贝还是深拷贝。

使用 Object.assign()

Object.assign() 方法可以将所有可枚举属性的值从一个或多个源对象复制到目标对象中。如果目标对象中已经有相同的属性，则会覆盖目标对象中的属性值。例如：

const obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'traveling'] };
const obj2 = { name: 'Bob', hobbies: ['cooking'] };

Object.assign(obj2, obj1);
console.log(obj2);
// 输出：{name: "Alice", hobbies: ["reading", "traveling"], age: 25}

在上面的示例代码中，我们将 obj1 的属性复制到了 obj2 中。由于 obj2 已经有一个 name 和一个 hobbies 属性，所以它们的值被覆盖了。最终输出的结果是 obj2 包含了所有的属性。

使用展开运算符

如果你使用的是 ES6 或更新的版本，你可以使用展开运算符（Spread Operator）来实现对象属性的复制。例如：

const obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'traveling'] };
const obj2 = { ...obj1 };

console.log(obj2);
// 输出：{name: "Alice", age: 25, hobbies: ["reading", "traveling"]}

在上面的示例代码中，我们使用展开运算符 ... 来复制 obj1 的所有属性到 obj2 中。这种方法实际上是浅

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10139