(js 深拷贝) JS深拷贝的4种实现方法深拷贝：JavaScript 中四种实现方法全网首发(图文详解1)

(js 深拷贝) JS深拷贝的4种实现方法

在 JavaScript 中，深拷贝一个对象意味着创建对象的一个完全新的副本，即拷贝的对象和原始对象无任何引用关系，修改新对象不会影响原始对象。下面是四种实现 JS 深拷贝的方法：

JSON.parse 和 JSON.stringify
这种方法最简单，能够快速实现对象的深拷贝，但是它不能复制函数、undefined、以及循环引用的对象。
```
function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
}

const original = { a: 1, b: { c: 2 } };
const cloned = deepClone(original);
console.log(cloned); // { a: 1, b: { c: 2 } }
```
注意：使用这个方法，你会丢失任何非可序列化的值。

递归拷贝
这个方法通过递归来深度遍历对象，适合于复杂对象的深拷贝。

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

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

   for (let key in obj) {
       const value = obj[key];
       copy[key] = deepClone(value);
   }

   return copy;
}

const original = { a: 1, b: { c: 2 } };
const cloned = deepClone(original);
console.log(cloned); // { a: 1, b: { c: 2 } }

注意：这个方法没有处理循环引用的问题。

使用第三方库
第三方库如 Lodash 的 _.cloneDeep 方法提供了一个完善的深复制解决方案。

// 需要先安装 lodash
// npm install lodash
const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const cloned = _.cloneDeep(original);
console.log(cloned); // { a: 1, b: { c: 2 } }

使用第三方库能够处理大多数深拷贝的复杂场景。

结构化克隆算法
使用 HTML5 的 structuredClone() 函数。这是一个浏览器 API，可以实现深拷贝。它能够拷贝大部分的 JavaScript 类型，包括 Map 和 Set。
```
const original = { a: 1, b: { c: 2 } };
// 注意：structuredClone 是浏览器环境下的函数
const cloned = structuredClone(original);
console.log(cloned); // { a: 1, b: { c: 2 } }
```
注意：这个 API 目前可能不是所有浏览器都支持。