記錄--一種更現代的深淺拷貝方法

来源:https://www.cnblogs.com/smileZAZ/archive/2023/03/16/17223748.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 你是否知道,JavaScript中有一種原生的方法來做對象的深拷貝? 本文我們要介紹的是 structuredClone 函數,它是內置在 JavaScript 運行時中的: const calendarEvent = { title: ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

你是否知道,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):

image.png

假設你只導入了這個函數。如果改用更常見的方式導入,沒有意識到搖樹並不總是按希望的方式工作,那麼可能會無意中為這個函數導入高達2 5kb 的文件

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iptables是一個Linux內核中的包過濾工具,可以用來過濾、轉發、修改、控制網路流量等。如果想要將主機的所有流量轉發至其他機器,可以使用iptables進行配置。 以下是具體步驟: 1. 首先需要在其他機器上開啟轉發功能,可以使用以下命令開啟: echo 1 > /proc/sys/net/i ...
  • sql的鎖機制,是時刻貫徹在每一次的sql事務中的,為了理解更透徹,介紹鎖之前,我們得先瞭解,鎖是為了乾什麼!! 1、資料庫異常情況 1.1 先來聊聊數據可能發生個異常狀況 1)臟讀:讀未提交,顧名思義,讀到了不該讀的東西,如: 事務B讀到了事務A回滾的數據,就是臟讀 2)不可重覆讀:讀已提交,同個 ...
  • 近期,黑客攻擊亞洲最大的兩家數據中心,造成多家企業大規模數據泄露。如何做好預控措施應對威脅,加強數據安全層級?虹科Redis企業版資料庫升級客戶端證書和發佈/訂閱訪問管理兩大功能為你提供最強保護! ...
  • 摘要:分散式資料庫以大集群規模、彈性伸縮等優異特性,滿足了銀行業務發展的多種需求,也因此成為各大銀行關鍵基礎設施技術創新建設的首選。 今天,由北京先進數通與華為聯合主辦的“銀行業數字化轉型實踐交流會“第二站在成都順利進行,各行業專家在現場一起交流了金融行業數字化轉型的技術創新和實踐成果。華為中國HC ...
  • 近期將ERP後臺從MSSQL SERVER過渡到了MYSQL,確實經歷了一番波折,轉換過程雖然極其痛苦,這裡也不賣慘了。將過程記錄一下,有人願意的話共同學習。 前面分享過操作系統和資料庫的安裝,倒是沒啥需要註意的地方,前面說的極其痛苦,是從數據導完開始的,暫時還體會不到,本篇介紹一下如何將... ...
  • 作者:京東零售 佟恩 NutUI 是一款京東風格的移動端組件庫。NutUI 目前支持 Vue 和 React技術棧,支持Taro多端適配。 本次,是2月的一個示例輸出,希望對你有幫助! 2月,我們對組件交互、issue修複、增加示例上做了急行軍,共合併70+PR,修複近40個issue。這裡我們選取 ...
  • Notion是一個功能強大的筆記應用程式,有許多優點,包括: 用戶友好的界面 跨平臺支持 可以結構化組織筆記 多人協作 可以添加多種類型的媒體文件 可以添加評論和任務 這些優點使Notion成為一個廣泛使用的筆記應用程式,適用於個人和團隊使用。 但是,對於重度Notion用戶,想直接發佈文章到公眾號 ...
  • Vue框架快速上手 前端環境準備 編碼工具:VSCode 依賴管理:NPM 項目構建:VueCli Vue框架介紹 Vue是一套用於構建用戶界面的漸進式框架。 Vue.js提供了MVVM數據綁定和一個可組合的組件系統,具有簡單、靈活的API。 其目標是通過儘可能簡單的API實現響應式的數據綁定和可組 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...