JavaScript 克隆并复制对象的属性

原创

mob64ca12d61d6b 2023-09-01 04:07:29 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d61d6b的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 克隆并复制对象的属性

在 JavaScript 中，对象是一种复杂的数据类型，它可以包含多个属性和方法。当我们需要复制一个对象的属性时，可能会遇到一些问题，例如无法直接复制引用类型的属性。本文将介绍如何在 JavaScript 中克隆并复制对象的属性，并提供相应的代码示例。

克隆对象的浅拷贝

浅拷贝是指将一个对象的属性值复制给另一个对象，但是如果属性值是引用类型，只会复制它的引用，而不会创建一个新的对象。要实现对象的浅拷贝，可以使用 Object.assign() 或扩展运算符 ...。

// 使用 Object.assign() 实现浅拷贝
const obj1 = { name: 'Alice', age: 25 };
const obj2 = Object.assign({}, obj1);

console.log(obj2); // { name: 'Alice', age: 25 }

// 使用扩展运算符 (...) 实现浅拷贝
const obj3 = { ...obj1 };

console.log(obj3); // { name: 'Alice', age: 25 }

在上面的代码示例中，我们先创建了一个名为 obj1 的对象，它有两个属性 name 和 age。然后使用 Object.assign() 方法将 obj1 的属性复制给 obj2，或者使用扩展运算符 ... 将 obj1 的属性复制给 obj3。最后，我们打印 obj2 和 obj3 的内容，可以看到它们和 obj1 的内容是一样的。

需要注意的是，浅拷贝只能复制一层的属性，如果对象的属性值还是一个对象，那么复制的只是它的引用。

克隆对象的深拷贝

深拷贝是指将一个对象的属性值完全复制给另一个对象，包括引用类型的属性值。要实现对象的深拷贝，可以使用递归或 JSON 序列化和反序列化。

使用递归实现深拷贝

递归是一种通过调用自身来解决问题的方法。在深拷贝对象时，我们可以通过递归调用复制函数来复制对象的每个属性值。下面是使用递归实现对象深拷贝的示例代码：

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

const obj1 = { name: 'Alice', age: 25, address: { city: 'New York', country: 'USA' } };
const obj2 = deepClone(obj1);

console.log(obj2); // { name: 'Alice', age: 25, address: { city: 'New York', country: 'USA' } }

在上述代码中，我们定义了一个名为 deepClone 的函数，它接受一个对象作为参数。首先，我们检查对象的类型，如果是基本类型或 null，则直接返回该对象。接下来，我们创建一个与原对象类型相同的新对象 clone，然后通过递归调用 deepClone 函数复制每个属性值。最后，返回复制后的对象。

使用递归实现深拷贝的优点是可以复制任意层级的属性。但是需要注意的是，如果对象中存在循环引用，即对象 A 的属性值引用了对象 B，而对象 B 的属性值又引用了对象 A，那么递归调用会导致死循环。为了解决这个问题，我们可以使用 Map 数据结构来存储已经复制过的对象，避免重复复制。