在 JavaScript 中,實現深複製的方式有很多種,每種方式都有其優點和缺點。今天介紹一種原生 JavaScript 提供的structuredClone
實現深複製。
下面列舉一些常見的方式,以及它們的程式碼示例和優缺點:
1. 使用 JSON.parse(JSON.stringify(obj))
程式碼示例:
function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); }
優點:簡單易行,對於大多數物件型別有效。
缺點:不能複製原型鏈,對於包含迴圈引用的物件可能出現問題。比如以下程式碼:
const calendarEvent = { date: new Date() } const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))
最終得到的 date 不是 Data 物件,而是字串。
{ "date": "2024-03-02T03:43:35.890Z" }
這是因為JSON.stringify
只能處理基本的物件、陣列。任何其他型別都沒有按預期處理。例如,日期轉換為字串。Set/Map 只是轉換為{}
。
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": {}, }
2. 使用遞迴
程式碼示例:
function deepClone(obj) { if (obj === null || typeof obj !== 'object') { return obj; } let clone = obj.constructor(); for (let attr in obj) { if (obj.hasOwnProperty(attr)) { clone[attr] = this.deepClone(obj[attr]); } } return clone; }
優點:對於任何型別的物件都有效,包括迴圈引用。
缺點:對於大型物件可能會消耗大量記憶體,並可能導致堆疊溢位。
3. 第三方庫,如 lodash 的 _.cloneDeep 方法
程式碼示例:
const _ = require('lodash'); function deepClone(obj) { return _.cloneDeep(obj); }
優點:支援更多型別的物件和庫,例如,支援 Proxy 物件。
缺點:會引入依賴導致專案體積增大。
因為這個函式會導致 17.4kb 的依賴引入,如果只是引入 lodash 會更高。
4. 現代深複製 structuredClone
在現代瀏覽器中,可以使用 structuredClone
方法來實現深複製,它是一種更高效、更安全的深複製方式。
以下是一個示例程式碼,演示如何使用 structuredClone
進行深複製:
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)
structuredClone
可以做到:
- 複製無限巢狀的物件和陣列
- 複製迴圈引用
- 複製各種各樣的 JavaScript 型別,如
Date
、Set
、Map
、Error
、RegExp
、ArrayBuffer
、Blob
、File
、ImageData
等
哪些不能複製:
- 函式
- DOM 節點
- 屬性描述、
setter
和getter
- 物件原型鏈
所支援的完整列表:
Array
、ArrayBuffer
、Boolean
、DataView
、Date
、Error
型別(下面具體列出的型別)、Map
、Object
,但僅限於普通物件、原始型別,除了symbol
(又名number
、string
、null
、undefined
、boolean
、BigInt
)、RegExp
、Set
、TypedArray
Error 型別:
Error
, EvalError
, RangeError
, ReferenceError
, SyntaxError
, TypeError
, URIError
Web/API 型別:
AudioData
, Blob
, CryptoKey
, DOMException
, DOMMatrix
, DOMMatrixReadOnly
, DOMPoint
, DomQuad
, DomRect
, File
, FileList
, FileSystemDirectoryHandle
, FileSystemFileHandle
, FileSystemHandle
, ImageBitmap
, ImageData
, RTCCertificate
, VideoFrame
值得慶幸的是 structuredClone
在所有主流瀏覽器中都受支援,也支援 Node.js 和 Deno。
結語
我們現在終於可以直接使用原生 JavaScript 中的structuredClone
能力實現深度複製物件。每種方式都有其優缺點,具體使用方式取決於你的需求和目標物件的型別。
更多內容請看:https://mybj123.com/20631.html