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

相关文章

  • highlight.js 代码高亮插件的使用详解

    highlight.js 代码高亮插件的使用详解

    在网页使用过程中,经常会用到代码的展示。代码高亮可以直观的了解代码,本文主要介绍了highlight.js 代码高亮插件的使用详解,具有一定的参考价值,感兴趣的可以了解一下
    2022-01-01
  • js CSS操作方法集合

    js CSS操作方法集合

    用js实现的对css的一些操作方法,集合,方便需要用js控制css的朋友
    2008-10-10
  • JavaScript中的appendChild()方法示例详解

    JavaScript中的appendChild()方法示例详解

    这篇文章主要介绍了JavaScript中的appendChild()方法,appendChild()方法是向节点添加最后一个子节点,也可以使用此方法从一个元素向另一个元素移动元素,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 根据对象的某一属性进行排序的js代码(如:name,age)

    根据对象的某一属性进行排序的js代码(如:name,age)

    实例为按降序排列,若想改为升序只需把比较器中的value2-value1改为value1-value2就可以了
    2010-08-08
  • webstorm中vue语法的支持详解

    webstorm中vue语法的支持详解

    这篇文章主要介绍了webstorm中vue语法的支持详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Javascript图像处理—平滑处理实现原理

    Javascript图像处理—平滑处理实现原理

    这里直接引用OpenCV 2.4+ C++ 平滑处理和OpenCV 2.4+ C++ 边缘梯度计算的相关内容平滑也称模糊, 是一项简单且使用频率很高的图像处理方法,需要了解的朋友可以参考下
    2012-12-12
  • Django1.7+JQuery+Ajax验证用户注册集成小例子

    Django1.7+JQuery+Ajax验证用户注册集成小例子

    下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用。注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在,需要的朋友可以参考下
    2017-04-04
  • ES6 Symbol在对象中的作用实例分析

    ES6 Symbol在对象中的作用实例分析

    这篇文章主要介绍了ES6 Symbol在对象中的作用,结合实例形式分析了ES6 Symbol在对象中声明、使用方法与相关注意事项,需要的朋友可以参考下
    2020-06-06
  • JS正则获取HTML元素的方法

    JS正则获取HTML元素的方法

    这篇文章主要介绍了JS正则获取HTML元素的方法,结合实例形式分析了JS针对页面HTML元素正则操作相关技巧与注意事项,需要的朋友可以参考下
    2017-03-03
  • JavaScript算法实例之求二叉树从根到叶的所有路径和

    JavaScript算法实例之求二叉树从根到叶的所有路径和

    如果你希望求某一特定路径(例如从根到叶子)上数字的和,那么问题就转变为了“求二叉树从根到叶的所有路径和”,所以本文给大家介绍了如何使用JavaScript求二叉树从根到叶的所有路径和,需要的朋友可以参考下
    2023-10-10

最新评论