JavaScript 深拷贝的循环引用问题详解
更新时间：2022年12月27日 15:27:17 作者：是廖一啊
如果说道实现深拷贝最简单的方法，我们第一个想到的就是 JSON.stringify() 方法，因为JSON.stringify()后返回的是字符串，所以我们会再使用JSON.parse()转换为对象,这篇文章主要介绍了JavaScript 深拷贝的循环引用问题,需要的朋友可以参考下
如果说道实现深拷贝最简单的方法，我们第一个想到的就是 JSON.stringify() 方法，因为JSON.stringify()后返回的是字符串，所以我们会再使用JSON.parse()转换为对象，如下代码：
let obj = { name: 'liaoyi',age: 22,sex: 1}
JSON.parse(JSON.stringify(obj))但是这种克隆不够完美，有一个致命的问题无法解决，就是她一旦遇到循环引用就会报错：
let obj = { name: 'liaoyi',age: 22,sex: 1}
JSON.parse(JSON.stringify(obj))
obj.c = obj
console.log(JSON.stringify(obj))js会报错，无法把一个循环引用转成 json 格式：
在这种情况下，我们通常想到的是写一个正儿八经的深度克隆方法：
使用传统方式实现对象的深拷贝
function deepClone(obj) {
const objectMap = new Map();
const _deepClone = value => {
const type = typeof value;
if (type !== 'object' || type === null) {
return value;
}
if (objectMap.has(value)) {
return objectMap.get(value);
}
const result = Array.isArray(value) ? [] : {};
objectMap.set(value, result);
for (const [key, _v] of Object.entries(value)) {
result[key] = _deepClone(value[key]);
console.log(key, _v);
}
return result;
};
return _deepClone(obj);
}使用 MessageChannel 实现循环引用对象的深拷贝
不够新鲜，我们来看一个好玩的 Web API
参考链接： MessageChannel
MessageChannel允许我们在不同的浏览上下文，比如window.open()打开的窗口或者iframe等之间建立通信管道，并通过两端的端口（port1和port2）发送消息。MessageChannel以DOM Event的形式发送消息，所以它属于异步的宏任务。
// 通过这个构造函数，创建一个消息通道，它会返回一个对象,解构 port1, port2 来实现通信
const { port1, port2 } = new MessageChannel();
port1.postMessage('hello')
port2.onmessage = msg => {
console.log(msg.data) // hello
}我们可以利用这个API,实现循环引用对象的深拷贝：
function deepClone(obj) {
return new Promise(resolve => {
const { port1, port2 } = new MessageChannel();
port1.postMessage(obj);
port2.onmessage = msg => {
resolve(msg.data);
// console.log(obj, msg.data === obj); // false
};
})
}
const obj = { a: 1, b: '2' }
obj.c = obj;
deepClone(obj).then(res =>{
console.log('res',res);
})到此这篇关于JavaScript 深拷贝的循环引用问题 _的文章就介绍到这了,更多相关JavaScript 深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章是对JavaScript禁止页面操作的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了微信小程序动画（Animation） 的实现及执行步骤,需要的朋友可以参考下2018-10-10
下面小编就为大家带来一篇JS模态窗口返回值兼容问题的完美解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
退出循环，使用break；退出当前循环继续下一个循环，使用continue，jquery中使用return false；continue，使用return true2014-09-09
最近在做一个列表的时候，涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例，分享给大家，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
判断文件类型控制表单提交这些都是在客户端实现的，下面有个不错的示例，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了avaScript的语法规则，本文的语法讲解主要讲一下与其他语言的区别，下面详细的介绍内容，需要的小伙伴可以参考一下，希望对你有所帮助2022-02-02
这篇文章主要为大家详细介绍了js+audio实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了JS如何实现文本框随文本的长度而增长的方法,具有一定借鉴价值,需要的朋友可以参考下2015-07-07
最新评论