草庐IT

记录--一种更现代的深浅拷贝方法

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

你是否知道，JavaScript中有一种原生的方法来做对象的深拷贝?

本文我们要介绍的是 structuredClone 函数，它是内置在 JavaScript 运行时中的:

const calendarEvent = {
  title: "前端修罗场",
  date: new Date(123),
  attendees: ["Steve"]
}

const copied = structuredClone(calendarEvent)

在上面的示例中，我们不仅拷贝了对象，还拷贝了嵌套数组，甚至拷贝了Date 对象：

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

没错，structuredClone 不仅可以做到以上这些，而且还可以:

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

举个例子:

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)

为什么不使用对象扩展运算符进行克隆呢

值得注意的是，我们讨论的是深拷贝。如果你只需要做一个浅拷贝，也就是一个不复制嵌套对象或数组的拷贝，那么我们可以只做一个对象扩展:

const simpleEvent = {
  title: "前端修罗场",
}
const shallowCopy = {...calendarEvent}

或者你也可以使用这种方法：

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

但是一旦我们有了嵌套项，我们就会遇到麻烦:

const calendarEvent = {
  title: "前端修罗场",
  date: new Date(123),
  attendees: ["Steve"]
}

const shallowCopy = {...calendarEvent}

shallowCopy.attendees.push("Bob")
shallowCopy.date.setTime(456)

如上所见，我们没有对该对象进行完整复制。

嵌套日期和数组仍然是两者之间的共享引用，如果我们想编辑它们，认为我们只是更新复制的日历事件对象，这可能会导致重大问题。

为什么不使用JSON.parse(JSON.stringify(x)) ?

它实际上是一个很棒的工具，性能令人惊讶，但也有一些structuredClone可以解决的缺点。

举个例子:

const calendarEvent = {
  title: "前端修罗场",
  date: new Date(123),
  attendees: ["Steve"]
}

const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))

如果我们输出 problematicopy，我们会得到:

{
  title: "前端修罗场",
  date: "1970-01-01T00:00:00.123Z"
  attendees: ["Steve"]
}

这不是我们想要的 date 格式，因为格式应该是date对象，而不是字符串。

这是因为 JSON.Stringify 只能处理基本对象、数组和基本类型。任何其他类型都可能以难以预测的方式处理。例如，日期被转换为字符串。但是 Set 对象就会被简单地转换为 {}。

同时，JSON.Stringify 甚至会完全忽略某些东西，如 undefined 或 function。

例如，如果我们用这个方法复制下面这个例子:

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": {},
}

可以看到， 这种方法的拷贝出错了。

因此，如果我们的需求适合这个方法，可以用这个方法。但是，我们可以用 structuredClone 做这个方法有很多不能做的事情。

为什么不是 _.cloneDeep?

到目前为止，Lodash 的 cloneDeep 函数是这个问题的一个非常常见的解决方案。事实上，这确实也像预期的那样工作:

import cloneDeep from 'lodash/cloneDeep'

const calendarEvent = {
  title: "前端修罗场",
  date: new Date(123),
  attendees: ["Steve"]
}

// ✅ 
const clonedEvent = structuredClone(calendarEvent)

但是，这里有一个警告。根据我的 IDE 中的导入成本扩展，打印任何我导入函数的成本，这个函数占了 17.4kb` 的大小(5.3kb gzip):

假设你只导入了这个函数。如果改用更常见的方式导入，没有意识到摇树并不总是按希望的方式工作，那么可能会无意中为这个函数导入高达2 5kb 的文件?

什么是 structuredClone 克隆不了的

函数不能被克隆

structuredClone({ fn: () => { } }) // 会抛出一个 DataCloneError 异常

DOM 节点不能克隆

structuredClone({ el: document.body })// 会抛出一个 DataCloneError 异常

属性描述符 setter和getter 不能克隆

类似元数据的特性也不会被克隆。

例如，使用 getter，结果值会被克隆，但不会克隆 getter 函数本身(或任何其他属性元数据):

structuredClone({ get foo() { return 'bar' } })
// log: { foo: 'bar' }

对象属性不能被克隆

原型链不会被遍历或复制。因此，如果克隆MyClass的一个实例，克隆的对象将不再是该类的实例(但该类的所有有效属性将被克隆)

class MyClass { 
  foo = 'bar' 
  myMethod() { /* ... */ }
}
const myClass = new MyClass()

const cloned = structuredClone(myClass)
// log: { foo: 'bar' }

cloned instanceof myClass // false

structuredClone 支持类型的完整列表

更简单地说，任何不在下面列表中的东西都不能克隆:

  • JS 内置类型：Array, ArrayBuffer, Boolean, DataView, Date, Error types (those specifically listed below), Map , Object but only plain objects (e.g. from object literals), Primitive types, except symbol (aka number, string, null, undefined, boolean, BigInt), RegExp, Set, TypedArray

  • Error types: Error, EvalError, RangeError, ReferenceError , SyntaxError, TypeError, URIError

  • Web/API types: AudioData, Blob, CryptoKey, DOMException, DOMMatrix, DOMMatrixReadOnly, DOMPoint, DomQuad, DomRect, File, FileList, FileSystemDirectoryHandle, FileSystemFileHandle, FileSystemHandle, ImageBitmap, ImageData, RTCCertificate, VideoFrame

浏览器支持

所有主流浏览器都支持 structuredClone，甚至Node.js和Deno。

不过在 Web worker 中，目前支持是比较有限的。

本文转载于:

https://juejin.cn/post/7209226686372692029

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

贝方深浅classdivcnblogs_HighlighterVue

有关记录--一种更现代的深浅拷贝方法的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  5. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  6. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时，如果尚不存在将用户连接到该事件的新记录，则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法，例如Model.find_or_cr

  7. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  8. ruby - 在 Ruby 中是否有一种惯用的方法来操作 2 个数组？ - 2

    a=[3,4,7,8,3]b=[5,3,6,8,3]假设数组长度相同，是否有办法使用each或其他一些惯用方法从两个数组的每个元素中获取结果？不使用计数器？例如获取每个元素的乘积:[15,12,42,64,9](0..a.count-1).eachdo|i|太丑了...ruby1.9.3 最佳答案 使用Array.zip怎么样？:>>a=[3,4,7,8,3]=>[3,4,7,8,3]>>b=[5,3,6,8,3]=>[5,3,6,8,3]>>c=[]=>[]>>a.zip(b)do|i,j|c[[3,5],[4,3],[7,6],

  9. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  10. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？ 最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si

随机推荐