ES6如何实现对象拷贝

在JavaScript中，对象拷贝是一个常见的操作。随着ES6（ECMAScript 2015）的引入，JavaScript提供了更多的方式来实现对象拷贝。本文将详细介绍ES6中实现对象拷贝的几种方法，包括浅拷贝和深拷贝，并探讨它们的优缺点。

1. 浅拷贝

浅拷贝是指创建一个新对象，并将原对象的属性值复制到新对象中。如果属性值是基本类型（如字符串、数字、布尔值等），则直接复制值；如果属性值是引用类型（如对象、数组等），则复制引用地址。因此，浅拷贝后的对象与原对象共享引用类型的属性。

1.1 使用Object.assign()

Object.assign()是ES6中用于对象合并的方法，它可以将一个或多个源对象的属性复制到目标对象中。通过将目标对象设置为空对象，可以实现浅拷贝。

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

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

obj1.a = 10;
obj1.b.c = 20;

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

在上面的例子中，obj2是obj1的浅拷贝。修改obj1的基本类型属性a不会影响obj2，但修改引用类型属性b会影响obj2。

1.2 使用扩展运算符（Spread Operator）

扩展运算符（...）是ES6中引入的一种语法，用于展开数组或对象的属性。通过将对象展开到一个新对象中，可以实现浅拷贝。

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

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

obj1.a = 10;
obj1.b.c = 20;

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

与Object.assign()类似，扩展运算符实现的也是浅拷贝。

2. 深拷贝

深拷贝是指创建一个新对象，并递归地复制原对象的所有属性值，包括引用类型的属性。深拷贝后的对象与原对象完全独立，修改其中一个对象的属性不会影响另一个对象。

2.1 使用JSON.parse()和JSON.stringify()

JSON.stringify()将对象转换为JSON字符串，JSON.parse()将JSON字符串解析为对象。通过这两个方法的组合，可以实现深拷贝。

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

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

obj1.a = 10;
obj1.b.c = 20;

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

在上面的例子中，obj2是obj1的深拷贝。修改obj1的属性不会影响obj2。

需要注意的是，JSON.stringify()和JSON.parse()方法有一些局限性： - 不能复制函数、undefined、Symbol等特殊类型的属性。 - 不能处理循环引用的对象。

2.2 使用递归实现深拷贝

为了克服JSON.stringify()和JSON.parse()的局限性，可以手动实现一个递归函数来深拷贝对象。

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

  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepClone(obj[i]);
    }
    return arrCopy;
  }

  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepClone(obj[key]);
    }
  }
  return objCopy;
}

const obj1 = { a: 1, b: { c: 2 }, d: [3, 4] };
const obj2 = deepClone(obj1);

console.log(obj2); // { a: 1, b: { c: 2 }, d: [3, 4] }

obj1.a = 10;
obj1.b.c = 20;
obj1.d[0] = 30;

console.log(obj2); // { a: 1, b: { c: 2 }, d: [3, 4] }

在上面的例子中，deepClone函数递归地复制了obj1的所有属性，包括数组和对象。修改obj1的属性不会影响obj2。

2.3 使用第三方库

除了手动实现深拷贝，还可以使用一些第三方库来实现深拷贝，如lodash的cloneDeep方法。

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 }, d: [3, 4] };
const obj2 = _.cloneDeep(obj1);

console.log(obj2); // { a: 1, b: { c: 2 }, d: [3, 4] }

obj1.a = 10;
obj1.b.c = 20;
obj1.d[0] = 30;

console.log(obj2); // { a: 1, b: { c: 2 }, d: [3, 4] }

lodash的cloneDeep方法可以处理各种复杂的数据结构，包括函数、undefined、Symbol等特殊类型的属性，以及循环引用的对象。

3. 浅拷贝与深拷贝的选择

在实际开发中，选择浅拷贝还是深拷贝取决于具体的需求。

• 浅拷贝适用于对象属性值都是基本类型，或者引用类型的属性不需要独立修改的场景。浅拷贝的性能较好，因为它只复制引用地址，而不需要递归地复制整个对象。

• 深拷贝适用于对象属性值包含引用类型，并且需要独立修改的场景。深拷贝的性能较差，因为它需要递归地复制整个对象，但对于复杂的数据结构，深拷贝是必要的。

4. 总结

ES6提供了多种实现对象拷贝的方式，包括浅拷贝和深拷贝。浅拷贝可以通过Object.assign()和扩展运算符实现，而深拷贝可以通过JSON.parse()和JSON.stringify()、递归函数或第三方库实现。在实际开发中，应根据具体需求选择合适的拷贝方式。

通过本文的介绍，相信读者已经对ES6中如何实现对象拷贝有了更深入的理解。希望本文能帮助你在实际项目中更好地处理对象拷贝的问题。