江苏龙网

  1. 主页 > 生活百科 > >

深入剖析JavaScript中深浅拷贝( 二 )

JavaScript


第三种：使用第三方库lodash中的cloneDeep()方法是否推荐使用，看情况吧 。如果我们的项目中只需要一个深拷贝的功能，这种情况下为了一个功能引入整个第三方库就显得很不值得了 。不如写一个递归函数对于项目来说性能更好 。
lodash.cloneDeep()代码示例：
import lodash from 'lodash';let obj = {a: {c: 2,d: [1, 3, 5],e:'Echa工程师'},b: 4}const newObj = lodash.cloneDeep(obj);obj.b = 20;console.log(newObj.b); //输出 4； 不会改变实际上，cloneDeep()方法底层使用的本来就是递归方法 。只是在外层又封装了一层而已 。
所以，如果不是原先项目中有使用 lodash 这个库的话，大可不必为了这一个功能而去引入它 。
【深入剖析JavaScript中深浅拷贝】文章上方有提供进行深拷贝的函数，推荐使用 。大家可自取 。
第四种:JQuery的extend()方法进行深拷贝（推荐在JQ中使用）这个方法仅适用于JQuery构建的项目 。JQuery自身携带的extend()方法可以进行深拷贝，不用自己写递归也不用引入第三方库还没什么坑 。
在JQuery项目中的使用方式：
let obj = {a: {c: 2,d: [1, 3, 5],e:'Echa工程师'},b: 4}let newObj= $.extend(true, {}, obj1);//拷贝完成obj.b = 20;console.log(newObj.b); //输出 4第五种：structuredClone（）方法进行深拷贝实际上，JavaScript 中提供了一个原生 API 来执行对象的深拷贝：structuredClone 。它可以通过结构化克隆算法创建一个给定值的深拷贝，并且还可以传输原始值的可转移对象 。本文将深入探讨 structuredClone() 函数的原理、使用方法及注意事项，以帮助开发者更好地应用现代 JavaScript 技术实现深拷贝 。
structuredClone 基本使用
structuredClone() 的实用方式很简单，只需将原始对象传递给该函数，它将返回具有不同引用和对象属性引用的深层副本·：
const originalObject = {name: "John",age: 30,address: {street: "123 Main St",city: "Anytown",state: "Anystate"},date: new Date(123),}const copied = structuredClone(originalObject);这里 copied 的结果如下：

深入剖析JavaScript中深浅拷贝

文章插图
可以看到，这里不仅拷贝了对象，还拷贝了嵌套的对象和数组，甚至 Date 对象 。structuredClone() 不仅可以做到这些，还可以：
  • 拷贝无限嵌套的对象和数组；
  • 拷贝循环引用；
  • 拷贝各种 JavaScript 类型，例如Date、Set、Map、Error、RegExp、ArrayBuffer, Blob、File、ImageData等；
  • 拷贝同样，所使用的结构化克隆算法也structuredClone()不能克隆 DOM 元素 。将 htmlElement 对象传递给structuredClone()将导致如上所示的错误 。
  • 任何可转移的对象 。
在 JavaScript 中，可转移对象（Transferable Objects）是指 ArrayBuffer 和 MessagePort 等类型的对象，它们可以在主线程和 Web Worker 线程之间相互传递，同时还可以实现零拷贝内存共享，提高性能 。这是由于可转移对象具有两个特点：
  1. 可共享：可转移对象本身没有所有权，可以在多个线程之间共享，实现零拷贝内存共享 。
  2. 可转移：调用 Transferable API 时，可转移对象会从发送方（发送线程）转移到接收方（接收线程），不再存在于原始线程中，因此可以避免内存拷贝和分配等开销 。
要注意的是，使用可转移对象时必须小心处理，因为一旦对象被转移，原线程将不再拥有该对象的所有权，因此在发送线程中不能再访问该对象 。此外，在接收线程中使用可转移对象时，也需要根据需求进行显式释放，否则可能会导致内存泄漏和其他问题 。
例如，对于以下结构，仍然可以使用structuredClone()进行深拷贝：
const originalObject = {set: new Set([1, 3, 3]),map: new Map([[1, 2]]),regex: /foo/,deep: { array: [ new File(someBlobData, 'file.txt') ] },error: new Error('Hello!')}originalObject.circular = originalObjectconst copied = structuredClone(originalObject)当对象中存在循环引用时，仍然可以通过 structuredClone() 进行深拷贝 。
structuredClone 缺点当然，structuredClone() 也并不是完美的，下面就来看看有哪些 structuredClone() 不能拷贝的数据类型 。
函数或方法当拷贝函数时，就会抛出异常：
function func() {}const funcClone = structuredClone(func);


推荐阅读


上一篇：一看就懂的TypeScript工具类型

下一篇：Kubernetes 多云的架构设计