新闻中心

js深拷贝和浅拷贝的区别

发布时间：2025-01-19 08:42:54 点击量：14

在JavaScript编程中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是两个重要的概念，它们涉及到对象的复制。理解这两者之间的区别对于避免在开发过程中意外修改对象数据或产生bug至关重要。

浅拷贝

浅拷贝是指创建一个新对象，这个新对象对原有对象的属性进行一层拷贝。对于基本数据类型（如字符串、数字、布尔值等），它们的值会被复制到新对象中，因此是完全独立的。然而，对于引用数据类型（如对象、数组等），浅拷贝只复制引用地址而不是复制实例本身。这意味着如果你对新对象中的某个引用属性进行修改，原对象的该属性也会相应地发生变化。

实现浅拷贝的方法

Object.assign()

Object.assign()是一个常用的浅拷贝方法。它能够将一个或多个源对象的属性复制到目标对象中。

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

copy.b.c = 3;
console.log(original.b.c); // 3 (原对象也被修改)

Array.prototype.slice()

对于数组，可以使用slice()方法进行浅拷贝。

const originalArray = [1, 2, { a: 3 }];
const copyArray = originalArray.slice();

copyArray[2].a = 4;
console.log(originalArray[2].a); // 4 (原数组也被修改)

Spread Operator (扩展运算符)

扩展运算符也是实现浅拷贝的一种简洁方法。

const originalObject = { x: 1, y: { z: 2 }};
const copyObject = { ...originalObject };

copyObject.y.z = 3;
console.log(originalObject.y.z); // 3 (原对象被修改)

深拷贝

深拷贝是指不仅复制对象的基本属性值，还递归地复制所有引用类型的子属性，使得新对象与原对象完全独立。即便子对象发生改变，也不会影响原对象。

实现深拷贝的方法

JSON.parse() 和 JSON.stringify()

这是最简单的深拷贝方法之一，但有一些限制，如无法拷贝函数、undefined及一些特殊对象（如Date和RegExp）。
```
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 3;
console.log(original.b.c); // 2 (原对象未被修改)
```

递归拷贝

自己实现一个递归拷贝函数是更强大和高效的方法，能处理多种数据类型。

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

 const clone = Array.isArray(obj) ? [] : {};
 for (let key in obj) {
   if (obj.hasOwnProperty(key)) {
     clone[key] = deepClone(obj[key]);
   }
 }
 return clone;
}

const original = { a: 1, b: { c: 2 }, d: function() { return 3; }};
const deepCopy = deepClone(original);

deepCopy.b.c = 4;
console.log(original.b.c); // 2 (原对象未被修改)

使用第三方库

诸如Lodash的_.cloneDeep函数提供了一种便捷解决方案，使用它可以避免自己实现递归拷贝的繁琐。

const _ = require('lodash');
const original = { a: 1, b: { c: 2 }};
const deepCopy = _.cloneDeep(original);

deepCopy.b.c = 3;
console.log(original.b.c); // 2 (原对象未被修改)

区别与使用场景

性能差异

浅拷贝由于只是复制对象的*层属性，性能较高。深拷贝则需要递归遍历对象中所有的层级属性，因此相对较慢，尤其是当对象结构非常复杂时。
适用场景
- 浅拷贝适用于对象中的引用类型属性不需要被独立修改的场合。如配置对象的快速复制、简单数据结构（无嵌套对象）的复制等。
- 深拷贝适用于需要确保新对象与原对象完全独立的场合，比如在Redux中管理状态变化，避免因为引用关系导致的状态不一致问题。

注意事项

不可复制元素

不管深拷贝还是浅拷贝，在处理DOM元素、函数、undefined、Symbol等特殊类型时，需要特别注意。这些类型要么无法被拷贝，要么需要特定的处理逻辑。
循环引用

针对深拷贝，循环引用是一个常见问题，递归实现时需要额外逻辑来检测和处理，否则会引发栈溢出问题。
深拷贝的局限性

尽管深拷贝使对象完全独立，但在某些情况下，处理复杂对象可能会带来不必要的性能开销，应该根据实际需求选择适当的复制方式。