【JS】使用MessageChannel实现深度克隆

本文主要是介绍【JS】使用MessageChannel实现深度克隆，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

通常使用简便快捷的JSON 序列化与反序列化实现深克隆，也可以递归实现或者直接使用lodash。

但 JSON 序列化与反序列化 无法处理如下的循环引用：

实现

MessageChannel 内部使用了浏览器内置的结构化克隆算法，该算法可以在不同的浏览器上下文之间传递数据。它能够在传递数据时自动处理对象的深度克隆，包括处理嵌套对象、数组、Map、Set、Date 对象等，同时还可以解决循环引用的问题。

const obj = { a: 1, b: 2 }
obj.c = obj
const { port1, port2 } = new MessageChannel()
port1.postMessage(obj)
port2.onmessage = (msg) => {const obj2 = msg.dataconsole.log(obj2, obj2 === obj)
}

封装为函数

function deepClone(obj) {return new Promise((resolve) => {const { port1, port2 } = new MessageChannel()port1.postMessage(obj)port2.onmessage = (msg) => {resolve(msg.data)}})
}

这篇关于【JS】使用MessageChannel实现深度克隆的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---