百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

JS 克隆对象八种技术，为何少不了 StructuredClone?

bigegpt 2024-08-08 12:18 2 浏览

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1. 为什么需要 StructuredClone

下面是一个使用 StructuredClone 方法克隆对象的示例：

const calendarEvent = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}
// 赋值对象
const copied = structuredClone(calendarEvent)

以上代码示例表明，StructuredClone 不仅可以复制对象，还可以复制嵌套数组，甚至 Date 对象。

copied.attendees
// 输出 ["Steve"]
copied.date
// 输出 Date: Wed Dec 31 1969 16:00:00
cocalendarEvent.attendees === copied.attendees
// 输出 false

其实，除了能赋值以上对象之外，structuralClone 甚至支持克隆：

  • 无限嵌套的对象和数组
  • 循环引用
  • 各种 JavaScript 类型，例如： Date、Set、Map、Error、RegExp、ArrayBuffer、Blob、File、ImageData 等
  • 转移任何可转移对象

1.可转移的对象（Transferable object）是拥有属于自己资源的对象，这些资源可以从一个上下文转移到另一个，确保资源一次仅在一个上下文可用。传输后，原始对象不再可用，也不再指向转移后的资源，并且任何读取或者写入该对象的尝试都将抛出异常。

2.可转移对象通常用于共享资源，该资源一次仅能安全地暴露在一个 JavaScript 线程中。例如，ArrayBuffer 是一个拥有内存块的可转移对象。当此类缓冲区（buffer）在线程之间传输时，相关联的内存资源将从原始的缓冲区分离出来，并且附加到新线程创建的缓冲区对象中。原始线程中的缓冲区对象不再可用，因为它不再拥有属于自己的内存资源了。

比如下面的示例：

const kitchenSink = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regex: /foo/,
  deep: {array: [ new File(someBlobData, 'file.txt') ] },
  error: new Error('Hello!')
}
kitchenSink.circular = kitchenSink

// ? 都支持，全部都深度赋值成功
const clonedSink = structuredClone(kitchenSink)

2. 为何不使用 spread 操作符

值得注意的是，文章正在谈论的是创建深层副本。如果只需要进行浅复制，即不复制嵌套对象或数组的副本，那么可以考虑 rest 符：

const simpleEvent = {
  title: "Builder.io Conf",
}
// ? 可以，这里没有嵌套对象或者数组
const shallowCopy = {...calendarEvent}

当然，开发者还可以使用下面 Object.assign 或者 Object.create 的方式：

const shallowCopy = Object.assign({}, simpleEvent)
const shallowCopy = Object.create(simpleEvent)

但是一旦存在嵌套元素，rest 就会遇到麻烦：

const calendarEvent = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}

const shallowCopy = {...calendarEvent}
// 这里添加 "Bob" 字符串到原始数组和复制后的数组中了
shallowCopy.attendees.push("Bob")
//  原始 Date 对象和复制的对象全部受到影响
shallowCopy.date.setTime(456)

正如以上示例所见，rest 操作符并没有创建该对象的完整副本，嵌套日期和数组仍然是两者之间的共享引用。

3. 为什么不 JSON.parse(JSON.stringify(x)) 深度复制

JSON.parse(JSON.stringify(x)) 是众多开发者很喜欢使用的优秀工具方法，并且具有不错的性能，但也有一些缺点，而这些缺点才是 structuralClone 脱颖而出的地方。

const calendarEvent = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}

//  JSON.stringify 将 `date` 属性转化为字符串了
const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))

如果打印 problematicCopy 将得到以下结果：

{
  title: "Builder.io Conf",
  date: "1970-01-01T00:00:00.123Z"
  attendees: ["Steve"]
}

这里需要重点注意的是，date 不是 Date 对象，而成了字符串。

这是因为 JSON.stringify 只能处理基本对象、数组和 Primitives 原始属性。 任何其他类型都可以以难以预测的方式处理。 例如，日期被转换为字符串， Set 只是转换为 {}。

JSON.stringify 甚至可能完全忽略某些属性，例如： undefined 或函数。如果使用 JSON.parse(JSON.stringify(x)) 复制 kitchenSink 将得到如下结果：

const kitchenSink = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regex: /foo/,
  deep: {array: [ new File(someBlobData, 'file.txt') ] },
  error: new Error('Hello!')
}

const veryProblematicCopy = JSON.parse(JSON.stringify(kitchenSink))

输出结果如下：

{
  "set": {},
  "map": {},
  "regex": {},
  "deep": {
    "array": [
      {}
    ]
  },
  "error": {},
}

同时，开发者还必须删除循环引用，因为 JSON.stringify 如果遇到则会抛出错误。因此，虽然该方法很强大，但可以使用 StructuredClone 做很多该方法无法做到的事情。

4. 为什么不用_.cloneDeep 深度复制

迄今为止，Lodash 的 cloneDeep 函数是解决深度复制一个非常常见的方案。

import cloneDeep from 'lodash/cloneDeep'

const calendarEvent = {
  title: "Builder.io Conf",
  date: new Date(123),
  attendees: ["Steve"]
}

const clonedEvent = cloneDeep(calendarEvent)

但是，根据 Vscode 的插件 Import Cost VSCode Extension 提示，该函数压缩后体积总共有 17.4kb（压缩后为 5.3kb）。

假设只是简单导入该函数，却没有意识到 Tree Shaking 可能不起作用，则可能意外导入多达 25kb 的数据 。

5. 为什么不用 MessageChannel 深度复制

开发者可以创建一个 MessageChannel 并发送消息。在接收端，消息将包含原始数据对象的结构化克隆。

function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}
const obj = /* ... */;
const clone = await structuralClone(obj);

该方法的缺点是异步，虽然并无大碍，但是有时候开发者需要使用同步的方式来深度拷贝一个对象。

6. 为什么不用 History API 深度复制

history.pushState() 可以提供一个状态对象来保存 URL。事实证明，这个状态对象使用结构化克隆，而且是同步的。但是，开发者必须小心使用，不要把程序逻辑使用的状态对象搞乱，所以需要在完成克隆之后恢复原始状态。为了防止发生任何意外，请使用 history.replaceState() 而不是 history.pushState()。

function structuralClone(obj) {
  const oldState = history.state;
  // 老的 state
  history.replaceState(obj, document.title);
  const copy = history.state;
  // 新的 state
  history.replaceState(oldState, document.title);
  return copy;
}
const obj = /* ... */;
const clone = structuralClone(obj);

然而，仅仅为了复制一个对象，而使用浏览器的引擎，感觉有点过分。另外，Safari 浏览器对 replaceState 调用的限制数量为 30 秒内 100 次。

7. 为什么不使用 Notification API 深度复制

Notification API 需要浏览器内部的权限机制，所以可能很慢。而且由于某种原因，Safari 总是返回 undefined。

function structuralClone(obj) {
  return new Notification('', {data: obj, silent: true}).data;
}
const obj = /* ... */;
const clone = structuralClone(obj);

8.StructuredClone 方法注意事项

函数不能被克隆

将抛出 DataCloneError 异常：

//  VM216:1 Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': () => { } could not be cloned. at <anonymous>:1:1
structuredClone({fn: () => { } })

DOM 节点

引发 DataCloneError 异常：

//  VM220:1 Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': HTMLBodyElement object could not be cloned. at <anonymous>:1:1
structuredClone({el: document.body})

属性描述符、setter 和 getter 类似

类似元数据的功能也不会被克隆。 例如，使用 getter 时，会克隆结果值而不会克隆 getter 函数本身（或任何其他属性元数据）：

structuredClone({get foo() { return 'bar' } })
// 克隆值为: {foo: 'bar'}

对象原型

原型链不会被遍历或重复。因此，如果克隆 MyClass 的实例，则克隆的对象将不再被认为是该类的实例，但该类的所有有效属性都将被克隆:

class MyClass {
  foo = 'bar'
  myMethod() {
    // 函数方法
  }
}
const myClass = new MyClass()
const cloned = structuredClone(myClass)
// 克隆的值为: {foo: 'bar'}
cloned instanceof myClass
// 输出值 false

9.StructuredClone polyfill

StructuredClone 虽然功能强大，但是并非所有浏览器都支持，此时就需要使用 structured-clone polyfill 了。关于 polyfill、ponyfill、prolyfill 的差异可以参考我的另外的文章，这里不再过多展开。

structured-clone 是与环境无关的序列化器和反序列化器，具有递归能力和 HTML 标准本身超出 JSON 的类型。值得注意的是，structured-clone 目前尚不支持包括：Blob、File、FileList、ImageBitmap、ImageData 和 ArrayBuffer，但已经支持类型化数组（Typed Arrays），但 u/int8、u/int16 和 u/int32 是目前唯一安全支持的。

可以通过下面的方式使用 structured-clone 的 polyfill：

// 默认导出
import structuredClone from '@ungap/structured-clone';
const cloned = structuredClone({any: 'serializable'});

// 作为独立的 serializer/deserializer
import {serialize, deserialize} from '@ungap/structured-clone';

// result 可以作为 JSON stringified，即使有 recursive 数据、bigint、typed arrays 等
const serialized = serialize({any: 'serializable'});

// 结果将作为原始对象的副本
const deserialized = deserialize(serialized);

当然，也可以按照 Global Polyfill 的方式使用：

// polyfill 作为全局函数
import structuredClone from "@ungap/structured-clone";
if (!("structuredClone" in globalThis)) {
  globalThis.structuredClone = structuredClone;
}

// Or don't monkey patch
import structuredClone from "@ungap/structured-clone"
// Just use it in the file
structuredClone()

参考资料

https://www.builder.io/blog/structured-clone

https://github.com/ungap/structured-clone

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

https://developer.mozilla.org/zh-CN/docs/Web/API/MessageChannel

https://kikobeats.com/polyfill-ponyfill-and-prollyfill/

https://www.toutiao.com/article/7200739725316030976

https://matiashernandez.dev/blog/post/deep-cloning-in-javascript-the-modern-way.-use-%60structuredclone%60

https://twitter.com/builderio/status/1519743620529766401

相关推荐

【Docker 新手入门指南】第十章:Dockerfile

Dockerfile是Docker镜像构建的核心配置文件，通过预定义的指令集实现镜像的自动化构建。以下从核心概念、指令详解、最佳实践三方面展开说明，帮助你系统掌握Dockerfile的使用逻...

Windows下最简单的ESP8266_ROTS_ESP-IDF环境搭建与腾讯云SDK编译

前言其实也没啥可说的,只是我感觉ESP-IDF对新手来说很不友好,很容易踩坑,尤其是对业余DIY爱好者搭建环境非常困难,即使有官方文档,或者网上的其他文档,但是还是很容易踩坑,多研究,记住两点就行了,...

python虚拟环境迁移（python虚拟环境conda）

主机A的虚拟环境向主机B迁移。前提条件：主机A和主机B已经安装了virtualenv1.主机A操作如下虚拟环境目录：venv进入虚拟环境：sourcevenv/bin/active(1)记录虚拟环...

Python爬虫进阶教程(二):线程、协程

简介线程线程也叫轻量级进程，它是一个基本的CPU执行单元，也是程序执行过程中的最小单元，由线程ID、程序计数器、寄存器集合和堆栈共同组成。线程的引入减小了程序并发执行时的开销，提高了操作系统的并发性能...

基于网络安全的Docker逃逸（docker）

如何判断当前机器是否为Docker容器环境Metasploit中的checkcontainer模块、（判断是否为虚拟机，checkvm模块）搭配学习教程1.检查根目录下是否存在.dockerenv文...

Python编程语言被纳入浙江高考，小学生都开始学了

今年9月份开始的新学期，浙江省三到九年级信息技术课将同步替换新教材。其中，新初二将新增Python编程课程内容。新高一信息技术编程语言由VB替换为Python，大数据、人工智能、程序设计与算法按照教材...

CentOS 7下安装Python 3.10的完整过程

1.安装相应的编译工具yum-ygroupinstall"Developmenttools"yum-yinstallzlib-develbzip2-develope...

如何在Ubuntu 20.04上部署Odoo 14

Odoo是世界上最受欢迎的多合一商务软件。它提供了一系列业务应用程序，包括CRM，网站，电子商务，计费，会计，制造，仓库，项目管理，库存等等，所有这些都无缝集成在一起。Odoo可以通过几种不同的方式进...

Ubuntu 系统安装 PyTorch 全流程指南

当前环境：Ubuntu22.04，显卡为GeForceRTX3080Ti1、下载显卡驱动驱动网站：https://www.nvidia.com/en-us/drivers/根据自己的显卡型号和...

spark+python环境搭建（python 环境搭建）

最近项目需要用到spark大数据相关技术，周末有空spark环境搭起来...目标spark，python运行环境部署在linux服务器个人通过vscode开发通过远程python解释器执行代码准备...

centos7.9安装最新python-3.11.1（centos安装python环境）

centos7.9安装最新python-3.11.1centos7.9默认安装的是python-2.7.5版本，安全扫描时会有很多漏洞，比如：Python命令注入漏洞(CVE-2015-2010...

Linux系统下，五大步骤安装Python

一、下载Python包网上教程大多是通过官方地址进行下载Python的，但由于国内网络环境问题，会导致下载很慢，所以这里建议通过国内镜像进行下载例如：淘宝镜像http://npm.taobao.or...

centos7上安装python3（centos7安装python3.7.2一键脚本）

centos7上默认安装的是python2，要使用python3则需要自行下载源码编译安装。1.安装依赖yum-ygroupinstall"Developmenttools"...

利用本地数据通过微调方式训练 本地DeepSeek-R1 蒸馏模型

网络上相应的教程基本都基于LLaMA-Factory进行，本文章主要顺着相应的教程一步步实现大模型的微调和训练。训练环境：可自行定义，mac、linux或者window之类的均可以，本文以ma...

【法器篇】天啦噜，库崩了没备份（天啦噜是什么意思?）

背景数据库没有做备份，一天突然由于断电或其他原因导致无法启动了，且设置了innodb_force_recovery=6都无法启动，里面的数据怎么才能恢复出来？本例采用解析建表语句+表空间传输的方式进行...

一周热门
最近发表
标签列表