js 对象拷贝

在 JavaScript 中，对象拷贝是一个常见且重要的操作。对象拷贝的目的是创建一个新的对象，使其与原始对象具有相同的属性和值，但两者在内存中是独立的。对象拷贝可以分为浅拷贝和深拷贝两种方式。本文将详细介绍 JavaScript 中对象拷贝的多种方法，并分析它们的优缺点。

1. 浅拷贝

浅拷贝是指创建一个新对象，新对象的属性值是原始对象属性的引用。也就是说，如果原始对象的属性值是基本类型（如字符串、数字、布尔值等），那么新对象和原始对象的属性值是独立的；但如果原始对象的属性值是引用类型（如对象、数组等），那么新对象和原始对象的属性值将共享同一块内存地址。

1.1 使用 Object.assign 进行浅拷贝

Object.assign 是 ES6 中引入的一个方法，用于将一个或多个源对象的属性复制到目标对象中。它可以用于浅拷贝。

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

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

copy.a = 3;
console.log(original.a); // 1

copy.b.c = 4;
console.log(original.b.c); // 4

在这个例子中，copy.a 的修改不会影响 original.a，因为 a 是基本类型。但是 copy.b.c 的修改会影响 original.b.c，因为 b 是一个对象，Object.assign 只拷贝了对象的引用。

1.2 使用展开运算符进行浅拷贝

ES6 中的展开运算符 ... 也可以用于浅拷贝对象。

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

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

copy.a = 3;
console.log(original.a); // 1

copy.b.c = 4;
console.log(original.b.c); // 4

与 Object.assign 类似，展开运算符也只进行浅拷贝。

2. 深拷贝

深拷贝是指创建一个新对象，新对象的属性值是原始对象属性的完全独立副本。也就是说，无论原始对象的属性值是基本类型还是引用类型，新对象和原始对象的属性值都是独立的。

2.1 使用 JSON.parse 和 JSON.stringify 进行深拷贝

JSON.stringify 可以将对象转换为 JSON 字符串，JSON.parse 可以将 JSON 字符串转换回对象。通过这种方式，可以实现深拷贝。

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

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

copy.a = 3;
console.log(original.a); // 1

copy.b.c = 4;
console.log(original.b.c); // 2

在这个例子中，copy.a 和 copy.b.c 的修改都不会影响 original，因为 JSON.parse 和 JSON.stringify 实现了深拷贝。

然而，这种方法有一些局限性：

• 不能拷贝函数、undefined、Symbol 等特殊类型的值。
• 不能处理循环引用的对象。

2.2 使用递归进行深拷贝

为了实现更复杂的深拷贝，可以编写一个递归函数，遍历对象的每个属性并创建新的副本。

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

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

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

  return copy;
}

const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);

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

copy.a = 3;
console.log(original.a); // 1

copy.b.c = 4;
console.log(original.b.c); // 2

这个递归函数可以处理对象和数组，并且可以处理嵌套的对象。然而，它仍然无法处理循环引用的对象。

2.3 使用第三方库进行深拷贝

为了处理更复杂的情况，可以使用一些第三方库来实现深拷贝，例如 lodash 的 cloneDeep 方法。

const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);

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

copy.a = 3;
console.log(original.a); // 1

copy.b.c = 4;
console.log(original.b.c); // 2

lodash 的 cloneDeep 方法可以处理各种复杂的情况，包括循环引用的对象。

3. 选择拷贝方法

在选择拷贝方法时，需要考虑以下几点：

• 是否需要深拷贝：如果只需要浅拷贝，可以使用 Object.assign 或展开运算符。如果需要深拷贝，可以使用 JSON.parse 和 JSON.stringify、递归函数或第三方库。
• 性能：JSON.parse 和 JSON.stringify 的性能较好，但无法处理特殊类型的值。递归函数和第三方库的性能较差，但可以处理更复杂的情况。
• 兼容性：Object.assign 和展开运算符是 ES6 的语法，可能需要考虑浏览器的兼容性。

4. 总结

在 JavaScript 中，对象拷贝是一个常见的操作，可以分为浅拷贝和深拷贝。浅拷贝只复制对象的引用，而深拷贝则创建对象的完全独立副本。根据具体的需求，可以选择不同的拷贝方法。对于简单的浅拷贝，可以使用 Object.assign 或展开运算符；对于深拷贝，可以使用 JSON.parse 和 JSON.stringify、递归函数或第三方库。在选择拷贝方法时，需要考虑性能、兼容性和具体的使用场景。