关于前端的深拷贝与浅拷贝及深拷贝常用的几种方式

在Web开发中，尤其是在前端开发中，数据结构的拷贝是一项非常重要的操作。根据拷贝的方式不同，拷贝通常分为浅拷贝和深拷贝。理解这两者之间的区别，对于我们在处理复杂数据结构、避免潜在的Bug至关重要。

浅拷贝与深拷贝

浅拷贝

浅拷贝是指创建一个新对象，新对象的属性是原对象属性值的复制。对于基本数据类型（例如：数字、字符串、布尔值等），是值的拷贝；对于引用数据类型（例如：对象、数组等），是引用的拷贝。换句话说，浅拷贝只会拷贝对象的第一层属性，若这些属性是对象或数组，那么它们依旧指向原来的引用。

示例代码：

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

const shallowCopy = { ...original };
shallowCopy.a = 3; // 修改基本类型值
shallowCopy.b.c = 4; // 修改引用类型值

console.log(original); // { a: 1, b: { c: 4 } }
console.log(shallowCopy); // { a: 3, b: { c: 4 } }

从上面的例子可以看出，修改 shallowCopy 中基本类型的属性并不会影响到 original，但修改引用类型的属性会影响到两个对象。

深拷贝

深拷贝则是创建一个新对象，同时会递归地拷贝原对象的所有属性，确保所有层级的引用都被复制，而不是引用原对象。深拷贝后，两个对象间完全独立，修改一个对象不会影响到另一个。

常用的深拷贝方式：

1. 使用 JSON.parse 和 JSON.stringify 这是最常用的深拷贝方法，但有一些限制，比如不支持函数、undefined、Symbol等类型。

```javascript const original = { a: 1, b: { c: 2 } };

const deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.a = 3; // 修改基本类型值 deepCopy.b.c = 4; // 修改引用类型值

console.log(original); // { a: 1, b: { c: 2 } } console.log(deepCopy); // { a: 3, b: { c: 4 } } ```

1. 使用递归函数 手动编写递归函数来实现深拷贝，可以处理更多复杂的数据类型。

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

   if (Array.isArray(obj)) {
       const copy = [];
       obj.forEach(item => {
           copy.push(deepClone(item));
       });
       return copy;
   }

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

}

const original = { a: 1, b: { c: 2, d: [1, 2, 3] } };

const deepCopy = deepClone(original); deepCopy.b.d[0] = 4; // 修改引用类型的数组

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

1. 使用库 使用第三方库，如 Lodash 提供的 cloneDeep 方法，可以非常方便且安全地进行深拷贝。

```javascript const _ = require('lodash');

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

const deepCopy = _.cloneDeep(original); deepCopy.b.c = 4;

console.log(original); // { a: 1, b: { c: 2 } } console.log(deepCopy); // { a: 1, b: { c: 4 } } ```

总结

在前端开发中，选择浅拷贝还是深拷贝取决于你的具体需求。通常来说，对于简单的数据结构，浅拷贝是足够的；而对于复杂结构，深拷贝则是避免修改源对象的更安全的选择。了解各种拷贝方式的优缺点，将有助于我们更好地管理和操作数据。