【H2O2 | 软件开发】前端深拷贝的实现
目录
前言
开篇语
准备工作
正文
概述
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】