js 对象拷贝|极客笔记

js 对象拷贝

在JavaScript中，对象是一种复杂的数据类型，它可以包含多个属性和方法。在开发过程中，我们经常需要复制对象，以便在不改变原始对象的情况下对其进行操作或传递给其他函数。本文将探讨如何在JavaScript中进行对象拷贝的不同方法以及它们的优缺点。

1. 浅拷贝

浅拷贝是指只复制对象的第一层属性，而不复制嵌套的对象。在JavaScript中，我们可以使用Object.assign()方法或展开运算符（...）来实现浅拷贝。

使用Object.assign()

let obj1 = { a: 1, b: 2 };
let obj2 = Object.assign({}, obj1);

obj2.b = 3;

console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { a: 1, b: 3 }

在上面的示例中，我们使用Object.assign()方法将obj1对象的属性复制到obj2对象中。修改obj2对象的属性不会影响obj1对象。

使用展开运算符

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };

obj2.b = 3;

console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { a: 1, b: 3 }

展开运算符（...）也可以用来实现浅拷贝，它的效果和Object.assign()方法相同。

浅拷贝的优点是简单方便，适用于大多数情况。但当对象存在嵌套属性时，浅拷贝会导致嵌套对象的引用被复制，从而引起一些意外的问题。因此，有时候我们需要使用深拷贝来避免这种情况。

2. 深拷贝

深拷贝是指在拷贝对象时完全复制所有嵌套对象的属性，而不是简单地复制引用。在JavaScript中，实现深拷贝通常需要使用递归算法或第三方库。

使用递归算法

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

  let copy = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    copy[key] = deepCopy(obj[key]);
  }

  return copy;
}

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = deepCopy(obj1);

obj2.b.c = 3;

console.log(obj1); // { a: 1, b: { c: 2 } }
console.log(obj2); // { a: 1, b: { c: 3 } }

上面的代码定义了一个deepCopy函数，使用递归算法来实现深拷贝。通过递归遍历对象的所有属性并对其进行复制，从而得到一个全新的对象。

使用第三方库

除了自己写递归算法外，还可以使用一些流行的第三方库来实现深拷贝，例如lodash和jQuery等。

const _ = require('lodash');

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = _.cloneDeep(obj1);

obj2.b.c = 3;

console.log(obj1); // { a: 1, b: { c: 2 } }
console.log(obj2); // { a: 1, b: { c: 3 } }

在上面的示例中，我们使用lodash库的cloneDeep方法来实现深拷贝。这种方式简单高效，适用于大多数情况。

深拷贝的优点是可以完全独立于原始对象，修改拷贝对象不会影响原始对象。但深拷贝的缺点是实现起来较为复杂，且可能会消耗大量的内存和性能。