目录

前言

开篇语

准备工作

正文

概述

JSON方法

递归

其他

结束语

---

前言

开篇语

本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。

如果您需要为面试八股文做准备，笔者建议重点关注加粗强调部分，它们是概念中的关键词。

准备工作

软件：【参考版本】Visual Studio Code

系统版本： Win10/11

正文

概述

概括地来说，前端实现深拷贝的常用方式有JSON方法、递归拷贝、浏览器原生structuredClone方法、lodash库等。

JSON方法

JSON方法是实现深拷贝的最简单直观的方式之一，主要涉及两个方法——JSON.stringify(obj)和JSON.parse(jsonString)。

JSON.stringify(obj)接收一个JS对象或值，并将其转化为JSON格式的字符串。但在这个过程中，对象中的函数、undefined、Symbol等无法被JSON表示的数据或Map、Set、RegExp等特殊对象将被忽略；在拷贝日期对象时，拷贝之后的值将变为字符串类型；如果对象中存在循环引用，还会抛出错误。

比如，现在有一个对象，使用stringify()方法进行转化并打印结果。

const obj = {a: 1,b: { c: 2 },d: [3, 4],e: new Date(),f: function () { console.log("hello"); },g: undefined,h: Symbol("foo"),
};const str = JSON.stringify(obj);
console.log(str);

解析成JSON字符串并打印，结果如下：

注意，打印的结果整体也是个字符串，所以实质上外层还有一层引号包裹。

JSON.parse(jsonString)将上面的JSON字符串接收并重新解析为JS的对象或值，由于生成的对象是一个全新的对象，与原始对象没有引用关系，所以实现了深拷贝。

const obj1 = JSON.parse(JSON.stringify(obj));
console.log(obj == obj1);

因此，上面的输出结果将为false。

此外，如果对象涉及循环引用，比如在新增的属性中引用了自身，那么上述的拷贝过程将报错。

const obj = { a: 1 };
// 循环引用
obj.b = obj;
// 报错: TypeError: Converting circular structure to JSON
JSON.parse(JSON.stringify(obj));

递归

为了解决JSON方法造成的诸多问题，我们实际上就是需要确保所有的属性以及值都得到了完美地复制。对于值依旧为引用数据类型的，我们应当继续向内层进行复制。 而递归复制则可以很好地实现上述需求。

递归复制有四个要点：

• 对于对象或数组，递归地遍历其每个属性或元素。
• 对于基本数据类型，直接返回其值。
• ​针对Date、MAp、Set等特殊对象，创建新的实例并复制其内容。
• ​使用一个Map缓存已经拷贝过的对象，避免循环引用带来的无限递归。

 以下是实现递归调用的完整示例：

function deepCopy(obj, cache = new Map()) {// 处理基本数据类型if (obj === null || typeof obj !== "object") {return obj;}// 处理循环引用if (cache.has(obj)) {return cache.get(obj);}// 处理Date对象if (obj instanceof Date) {return new Date(obj);}// 处理Map对象if (obj instanceof Map) {const copy = new Map();cache.set(obj, copy);obj.forEach((value, key) => {copy.set(deepCopy(key, cache), deepCopy(value, cache));});return copy;}// 处理Set对象if (obj instanceof Set) {const copy = new Set();cache.set(obj, copy);obj.forEach(value => {copy.add(deepCopy(value, cache));});return copy;}// 处理数组或普通对象const copy = Array.isArray(obj) ? [] : {};cache.set(obj, copy);for (let key in obj) {// 判断是否为对象本身具有的属性，而非从原型链上继承的if (obj.hasOwnProperty(key)) {copy[key] = deepCopy(obj[key], cache);}}return copy;
}

其他

1、structuredClone

structuredClone是JavaScript中一个原生支持的深拷贝方法，用于将对象或值进行深拷贝。它比JSON.parse(JSON.stringify(obj))更强大，可以处理更多数据类型，包括循环引用、Date、Map、Set等。

该方法的基本语法如下：

structuredClone(value[, options])

其中value为需要深拷贝的对象或值，options为可选参数，用于配置拷贝行为。

2、_.cloneDeep

lodash是一个流行的 JavaScript 实用工具库，提供了许多方便的函数，其中_.cloneDeep()是用于深拷贝的常用方法。它支持多种数据类型，并且内置缓存机制以处理循环引用、函数、Date、Map、Set 等复杂场景。 

该方法的基本语法如下：

const _ = require('lodash');
_.cloneDeep(value);

上述两种方法不支持复制DOM节点以及特殊对象WeakMap、WeakSet和Proxy。此外structuredClone不支持复制函数。

3、补充

此外，实现深拷贝的方式还有MessageChannel、利用Proxy拦截对象等，但这两种方法实现较为复杂，并不实用，这里就不再展开了。

结束语

本期内容到此结束。关于本系列的其他博客，可以查看我的面试题专栏。

本系列的博客主要是记录学习经历，并总结阶段的知识点。全篇的操作过程由笔者完成并核验，在部分定义上有参考其他的内容。希望这对您有所帮助，并真心地祝您早日找到心仪的工作岗位。

==期待与你在下一期博客中再次相遇==

——燃尽的【H2O2】