JavaScript新特性structuredClone()，一行代碼優(yōu)化深拷貝策略

structuredClone()使用起來(lái)非常簡(jiǎn)單：

const cloned = structuredClone(obj);

替代：

const cloned = JSON.parse(JSON.stringify(obj));

想知道structuredClone()除了深拷貝以外，還有哪些JSON.parse(JSON.stringify(obj))所沒(méi)有的功能嗎？比起JSON.parse(JSON.stringify(obj))有什么性能上的提升嗎？structuredClone()的環(huán)境限制有哪些？

本文會(huì)告訴你答案。

一、structuredClone()介紹

1、structuredClone()是什么

structuredClone() 是瀏覽器和 Node.js 的原生 API，底層使用更高效的 C++ 實(shí)現(xiàn)，比起 JS 層的 JSON.stringify/parse 組合，性能通常更好。

在結(jié)構(gòu)復(fù)雜/嵌套多時(shí)差異更明顯，不需要轉(zhuǎn)成字符串再解析，避免了冗余的編碼/解碼過(guò)程。

2、structuredClone()環(huán)境支持

在 Node.js 17+、Chrome 98+、Firefox 94+ 中支持。

3、structuredClone()不會(huì)拷貝的內(nèi)容

4、基礎(chǔ)案例

structuredClone()支持Map、Set、Blob、Date、File等JSON.parse(JSON.stringify(obj))不支持的類型：

const original = {
// 原始類型
string: 'Hello',
number: 123,
boolean: true,
null: null,
undefined: undefined, // JSON會(huì)丟失，structuredClone保留
// 日期對(duì)象 (JSON會(huì)轉(zhuǎn)為字符串，structuredClone保持為Date對(duì)象)
date: newDate('2023-06-15'),
// 正則表達(dá)式 (JSON會(huì)轉(zhuǎn)為空對(duì)象，structuredClone保持為RegExp對(duì)象)
regex: /pattern/g,
// 集合類型
map: newMap([['key', 'value']]),
set: newSet([1, 2, 3]),
// 二進(jìn)制數(shù)據(jù)
arrayBuffer: newUint8Array([1, 2, 3]).buffer,
typedArray: newUint8Array([1, 2, 3]),
// 嵌套數(shù)組和對(duì)象
array: [1, 2, { nested: true }],
object: { nested: { deep: true } }
};
const clone = structuredClone(original);
// 驗(yàn)證類型保持一致
console.log(clone.date instanceof Date);        // true
console.log(clone.regex instanceof RegExp);     // true
console.log(clone.map instanceof Map);          // true
console.log(clone.set instanceof Set);          // true
console.log(clone.arrayBuffer instanceof ArrayBuffer); // true
console.log(clone.typedArray instanceof Uint8Array);  // true
const clone2 = JSON.parse(JSON.stringify(original));
console.log(clone2.date instanceof Date); // false (變成字符串)
console.log(clone2.set instanceof Set); // false (變成數(shù)組)

5、structuredClone()的兼容性判斷

可以用如下代碼安全使用 structuredClone()，在不支持的環(huán)境里自動(dòng)回退到 JSON 方案（雖然功能會(huì)弱一些）：

function deepClone(obj) {
  if (typeof structuredClone === 'function') {
    return structuredClone(obj);
  } else {
    // fallback: JSON 克?。ㄗ⒁夤δ苡邢蓿?
    return JSON.parse(JSON.stringify(obj));
  }
}

二、 structuredClone()比JSON.parse(JSON.stringify(obj))有什么區(qū)別

1、對(duì)比表格

2、循環(huán)引用

循環(huán)引用是對(duì)象內(nèi)部相互引用，形成“閉環(huán)”的結(jié)構(gòu)，比如：

const obj = {};
obj.self = obj;
const cloned = structuredClone(obj); 

如果用 JSON.stringify(obj) 就會(huì)報(bào)錯(cuò)：TypeError: Converting circular structure to JSON。但 structuredClone() 就能正確處理

三、structuredClone()在性能上的提升

根據(jù)多個(gè)社區(qū)實(shí)測(cè) benchmark（如 ?JSBench.me?、V8 團(tuán)隊(duì) blog 和真實(shí)項(xiàng)目測(cè)試）：

• 深層嵌套對(duì)象（10層以上）：structuredClone() 明顯更快；
• 包含 Map、Set、Date、ArrayBuffer 的復(fù)雜對(duì)象：structuredClone() 能直接處理，而 JSON 克隆則需要額外轉(zhuǎn)換或報(bào)錯(cuò)；
• 平均測(cè)試中 structuredClone() 比 JSON 快 1.5～5 倍，尤其在大型對(duì)象上提升更顯著。

四、結(jié)語(yǔ)

目前，structuredClone() 已被所有主流瀏覽器支持。它為深拷貝問(wèn)題提供了一個(gè)簡(jiǎn)單、高效的解決方案，快來(lái)?yè)肀н@個(gè)JavaScript新特性吧。

到此這篇關(guān)于JavaScript新特性structuredClone()深拷貝策略詳解的文章就介紹到這了,更多相關(guān)js structuredClone()深拷貝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論