我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript 深拷贝的循环引用问题详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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 深拷贝内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript 深拷贝的循环引用问题详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript 深拷贝的循环引用问题详解

如果说道实现深拷贝最简单的方法,我们第一个想到的就是 JSON.stringify() 方法,因为JSON.stringify()后返回的是字符串,所以我们会再使用JSON.parse()转换为对象,这篇文章主要介绍了JavaScript 深拷贝的循环引用问题,需要的朋友可以参考下
2022-12-27

Objective-C中block循环引用问题详解

目标:block执行过程中,self不会释放;执行完可以释放。 最初block中直接使用self会强引用。self.myBlock = ^() {[self doSomething]; };或者使用了对象的属性self.myBlock =
2022-06-04

C++ 函数参数详解:引用参数的深浅拷贝差异

在 c++++ 中,传递给函数的参数可分为值传递和引用传递。引用参数有两种类型:浅拷贝引用和深拷贝引用。浅拷贝引用将引用本身传递给函数,允许函数修改原有对象。深拷贝引用传递引用参数所引用的对象的副本,函数对副本的修改不会影响原有对象。在需要
C++ 函数参数详解:引用参数的深浅拷贝差异
2024-04-26

Java循环引用问题怎么解决

在Java中,循环引用问题通常是指两个或多个对象相互引用,导致无法被垃圾回收器回收,从而造成内存泄漏的情况。要解决循环引用问题,可以使用以下几种方法:1. 调整对象之间的引用关系:当两个对象相互引用时,可以将其中一个对象的引用改为弱引用或软
2023-10-07

详解Python中深浅拷贝的使用及注意事项

Python中的深浅拷贝是经常被使用的概念,对于初学者来说可能会比较难以理解,本文将详细阐述Python深浅拷贝的概念、使用场景、注意事项以及如何实现深浅拷贝
2023-05-15

使用JSON.stringify时遇到的循环引用问题怎么解决

这篇文章给大家分享的是有关使用JSON.stringify时遇到的循环引用问题怎么解决的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。程序员在日常做TypeScript/JavaScript开发时,经常需要将复杂的
2023-06-14

详解iOS 用于解决循环引用的block timer

一、什么是回调函数? 回调函数,本质上也是个函数(搁置函数和方法的争议,就当这二者是一回事)。由“声明”、“实现”、“调用”三部分组成。 在上面的例子中,我可以看出,函数amount(其实是Block),的声明和调用在A类中,而实现部分在B
2022-05-18

编程热搜

目录