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页面倒计时功能完整示例

    JavaScript页面倒计时功能完整示例

    这篇文章主要介绍了JavaScript页面倒计时功能,结合完整实例形式分析了javascript计时器、时间运算相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Js控制滑轮左右滑动实例

    Js控制滑轮左右滑动实例

    这篇文章主要介绍了Js控制滑轮左右滑动实例,本文直接给出实现代码,需要的朋友可以参考下
    2015-02-02
  • Javascript将JSON日期格式化

    Javascript将JSON日期格式化

    在做项目中,将实体转化为JSON后,结果后台返回json时间格式为/Date(1306418993027)/,在前台JS里显示的并不是真正的日期,而且我们不能把所有日期字段都变成string吧,因此写了Javascript的扩展方法,来实现这个功能,代码如下
    2016-08-08
  • JavaScript实现使用Canvas绘制图形的基本教程

    JavaScript实现使用Canvas绘制图形的基本教程

    本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • JavaScript

    JavaScript"模拟事件"的注意要点详解

    今天小编就为大家分享一篇关于JavaScript"模拟事件"的注意要点详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 清除输入框内的空格

    清除输入框内的空格

    本文主要分享了js实现清除输入框内的空格的代码,代码简单易懂,需要的朋友一起来看下吧
    2016-12-12
  • CocosCreator Typescript制作俄罗斯方块游戏

    CocosCreator Typescript制作俄罗斯方块游戏

    目前关于cocos开发俄罗斯方块的文章几乎寥寥无几,因此本文将主要介绍如何通过CocosCreator Typescript制作简单的俄罗斯方块游戏,代码具有一定价值,感兴趣的同学可以学习一下
    2021-11-11
  • js实现二级菜单渐隐显示

    js实现二级菜单渐隐显示

    这篇文章主要介绍了js制作导航菜单实现二级菜单渐隐显示,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    本篇文章主要是对js与jquery获取父级元素,子级元素,兄弟元素的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • Javascript访问Promise对象返回值的操作方法

    Javascript访问Promise对象返回值的操作方法

    这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从后端API获取数据并处理返回值,文章展示了如何使用.then()链式操作和async/await语法来访问Promise对象的返回值,感兴趣的朋友一起看看吧
    2025-03-03

最新评论