JSON.stringify() 最佳實(shí)踐：避免常見(jiàn)陷阱和優(yōu)化性能簡(jiǎn)介`JSON.stringify()` 是 javaScript 中一個(gè)強(qiáng)大的函數(shù)，用于將 JavaScript 對(duì)象或值轉(zhuǎn)換為 JSON（JavaScript Object Notation）字符串格式。它在數(shù)據(jù)傳輸、存儲(chǔ)和通信等許多場(chǎng)景中廣泛使用。為了充分利用 `JSON.stringify()`，并避免潛在的陷阱，本文將介紹最佳實(shí)踐以優(yōu)化性能并確保生成有效且可靠的 JSON 字符串。避免常見(jiàn)陷阱循環(huán)引用當(dāng)一個(gè)對(duì)象包含對(duì)自身或其祖先對(duì)象的引用時(shí)，就會(huì)發(fā)生循環(huán)引用。`JSON.stringify()` 無(wú)法處理此類引用，因?yàn)樗鼤?huì)陷入無(wú)限遞歸循環(huán)。為了避免這種情況，請(qǐng)確保您的對(duì)象不包含循環(huán)引用。 js // 循環(huán)引用示例 const obj = {a: 1,b: obj // 引用自身 };JSON.stringify(obj); // 報(bào)錯(cuò)：最大調(diào)用棧大小超出單引號(hào)和雙引號(hào)JSON 規(guī)范要求所有鍵和值都用雙引號(hào)引起來(lái)。使用單引號(hào)或未加引號(hào)的鍵或值會(huì)導(dǎo)致解析錯(cuò)誤。 js // 無(wú)引號(hào)鍵 const obj = { name: 'John' };JSON.stringify(obj); // 報(bào)錯(cuò)：意外字符 "n"非 JSON 值某些 JavaScript 值無(wú)法直接轉(zhuǎn)換為 JSON，例如 `undefined`、`NaN` 和函數(shù)。嘗試將其序列化將導(dǎo)致 `TypeError`。 js // 非 JSON 值示例 const obj = {a: undefined,b: NaN,c: () => {} // 函數(shù) };JSON.stringify(obj); // 報(bào)錯(cuò)：TypeError: 循環(huán)的值不能轉(zhuǎn)換為 JSON轉(zhuǎn)換深度限制為了防止惡意輸入導(dǎo)致堆棧溢出，一些 JSON 序列化庫(kù)（例如某些瀏覽器實(shí)現(xiàn)）對(duì)轉(zhuǎn)換深度設(shè)置了限制。當(dāng)對(duì)象或數(shù)組嵌套層級(jí)太深時(shí)，可能會(huì)觸發(fā)此限制。性能優(yōu)化使用自定義轉(zhuǎn)換器對(duì)于復(fù)雜的對(duì)象，使用自定義轉(zhuǎn)換器可以提供更好的控制和更高的靈活性，例如過(guò)濾掉不需要的數(shù)據(jù)或轉(zhuǎn)換日期對(duì)象。 js const customConverter = (KEY, value) => {if (key === 'date') {return value.toISOString();}return value; };JSON.stringify(obj, customConverter);避免不必要的轉(zhuǎn)換頻繁地調(diào)用 `JSON.stringify()` 可能很耗時(shí)。如果您正在使用 JSON 作為數(shù)據(jù)傳輸格式，請(qǐng)考慮在需要時(shí)才轉(zhuǎn)換數(shù)據(jù)。使用原生 JSON.parse() 方法雖然第三方庫(kù)提供了額外的功能，但使用 JavaScript 原生的 `JSON.parse()` 方法通常效率更高，因?yàn)樗?jīng)過(guò)高度優(yōu)化。異步序列化對(duì)于大型數(shù)據(jù)集，同步序列化可能需要大量時(shí)間。考慮使用 Web Workers 或其他異步技術(shù)來(lái)提高響應(yīng)能力。 js const worker = new Worker('json-worker.js'); worker.postMessage(obj); worker.onmessage = (e) => {const json = e.data;// ... };壓縮和解壓縮傳輸 JSON 數(shù)據(jù)時(shí)，壓縮它可以節(jié)省帶寬。可以使用 GZIP、Brotli 等壓縮算法來(lái)減少 JSON 字符串的大小。其他注意事項(xiàng)檢查返回結(jié)果始終檢查 `JSON.stringify()` 返回的結(jié)果，以確保它是一個(gè)有效的 JSON 字符串，并且不包含任何意外的錯(cuò)誤。使用嚴(yán)格模式在嚴(yán)格模式下，JSON 字符串中的未終止字符串或語(yǔ)法錯(cuò)誤將拋出異常。這有助于早期檢測(cè)錯(cuò)誤并避免無(wú)效 JSON。考慮使用 JSON5 或其他 JSON 變體對(duì)于不嚴(yán)格遵循 JSON 規(guī)范的數(shù)據(jù)，可以考慮使用 JSON5 或其他 JSON 變體，它們?cè)试S使用單引號(hào)、注釋和未加引號(hào)的鍵。結(jié)論通過(guò)遵循這些最佳實(shí)踐，您可以有效避免 `JSON.stringify()` 使用過(guò)程中常見(jiàn)的陷阱，并優(yōu)化其性能。記住，了解您的特定用例并根據(jù)需要調(diào)整策略對(duì)于高效地處理 JSON 數(shù)據(jù)至關(guān)重要。遵循這些指南將使您能夠充分利用 `JSON.stringify()`，確保您的應(yīng)用程序快速、可靠且符合標(biāo)準(zhǔn)。

---

深拷貝的兩種實(shí)現(xiàn)方式

淺拷貝只是創(chuàng)建了一個(gè)新的對(duì)象，復(fù)制了原有對(duì)象的基本類型的值，而引用數(shù)據(jù)類型只拷貝了一層屬性，再深層的還是無(wú)法進(jìn)行拷貝。如果其中一個(gè)對(duì)象改變了這個(gè)內(nèi)存中的地址，肯定會(huì)影響到另一個(gè)對(duì)象

深拷貝則不同，對(duì)于復(fù)雜引用數(shù)據(jù)類型，將一個(gè)對(duì)象從內(nèi)存中完整地拷貝出來(lái)一份給目標(biāo)對(duì)象，并從堆內(nèi)存中開辟一個(gè)全新的空間存放新對(duì)象，且新對(duì)象的修改并不會(huì)改變?cè)瓕?duì)象，這兩個(gè)對(duì)象是相互獨(dú)立、不受影響的，徹底實(shí)現(xiàn)了內(nèi)存上的分離

實(shí)現(xiàn)深拷貝，一般兩種方式方式：

使用(());

手動(dòng)實(shí)現(xiàn)

(())版本

()是最簡(jiǎn)單的深拷貝方法，其實(shí)就是把一個(gè)對(duì)象序列化成為JSON的字符串，并將對(duì)象里面的內(nèi)容轉(zhuǎn)換成字符串，最后再用()的方法將JSON字符串生成一個(gè)新的對(duì)象

constobj={name:nordon,info:{age:18}};//一行代碼實(shí)現(xiàn)深拷貝constcopyObj=((obj));

雖然使用(())實(shí)現(xiàn)深拷貝非常簡(jiǎn)單、便捷，但是其卻存在一些API層面的特點(diǎn)：

拷貝的對(duì)象的值中如果有函數(shù)、undefined、symbol這三種類型，經(jīng)過(guò)序列化之后的字符串中這個(gè)鍵值對(duì)會(huì)消失

undefined、任意的函數(shù)以及symbol作為對(duì)象屬性值時(shí)()跳過(guò)（忽略）對(duì)它們進(jìn)行序列化

轉(zhuǎn)換值如果有toJSON()函數(shù)，該函數(shù)返回什么值，序列化結(jié)果就是什么值，并且忽略其他屬性的值

拷貝Date引用類型會(huì)變成字符串

無(wú)法拷貝不可枚舉的屬性

無(wú)法拷貝對(duì)象的原型鏈

拷貝RegExp引用類型會(huì)變成空對(duì)象

對(duì)象中含有NaN、Infinity以及-Infinity，JSON序列化的結(jié)果會(huì)變成null

無(wú)法拷貝包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用，形成無(wú)限循環(huán)），會(huì)拋出錯(cuò)誤

手動(dòng)實(shí)現(xiàn)

由于(())實(shí)現(xiàn)深拷貝存在一定的不足，在業(yè)務(wù)開發(fā)中建議慎重使用，因此我們需要自己手動(dòng)實(shí)現(xiàn)一版深拷貝

手動(dòng)實(shí)現(xiàn)過(guò)程中需要解決的問(wèn)題，也就是補(bǔ)齊(())不足的一個(gè)過(guò)程，上述已經(jīng)闡述其不足，接下來(lái)直接上代碼：

細(xì)節(jié)在代碼中已注釋

//判斷是不是引用類型constisComplexDataType=(obj)=>{return(typeofobj===object||typeofobj===function)&&obj!==null}constdeepClone=function(obj,hash=newWeakMap()){//日期對(duì)象直接返回一個(gè)新的日期對(duì)象if(===Date)returnnewDate(obj);//正則對(duì)象直接返回一個(gè)新的正則對(duì)象if(===RegExp)returnnewRegExp(obj);//如果循環(huán)引用了就用weakMap來(lái)解決if((obj))(obj);letallDesc=(obj);//遍歷傳入?yún)?shù)所有鍵的特性letcloneObj=((obj),allDesc);//繼承原型鏈(obj,cloneObj);for((obj)){cloneObj[key]=isComplexDataType(obj[key])&&typeofobj[key]!==function?deepClone(obj[key],hash):obj[key];}returncloneObj;};

深入理解JSON.stringify()

在實(shí)際開發(fā)中有著豐富的應(yīng)用場(chǎng)景，盡管你可能已經(jīng)熟悉了它的基本用法，但其實(shí)它隱藏著更多實(shí)用特性。 這些特性往往在不經(jīng)意間發(fā)揮作用，值得深入理解。 如果你覺(jué)得這個(gè)話題略顯枯燥，讓我們通過(guò)幾個(gè)有趣的場(chǎng)景來(lái)探索。 例如，深拷貝時(shí)，的deepCopy功能（如`((obj/arr))`）在處理引用類型數(shù)據(jù)時(shí)至關(guān)重要，它能確保新生成的對(duì)象與原對(duì)象在內(nèi)存上獨(dú)立，互不影響。 在服務(wù)端數(shù)據(jù)存儲(chǔ)中，也十分關(guān)鍵。 比如，存儲(chǔ)的canvas模板數(shù)據(jù)和Vue-amap的SVG路徑信息，這時(shí)就需要序列化存儲(chǔ)。 另外，localStorage和sessionStorage存儲(chǔ)的數(shù)據(jù)必須先轉(zhuǎn)化為字符串，否則可能出現(xiàn)存儲(chǔ)失效的問(wèn)題。 當(dāng)從服務(wù)端接口獲取Canvas或SVG數(shù)據(jù)時(shí)，能幫助解析這些數(shù)據(jù)，并在和vue-amap等組件中正確渲染。 此外，還能過(guò)濾數(shù)據(jù)和格式化輸出，包括設(shè)置縮進(jìn)，使其更易于閱讀。 不過(guò)，遇到自引用對(duì)象時(shí)，會(huì)拋出“cyclic object value”錯(cuò)誤，這時(shí)需要特殊處理，比如使用庫(kù)。 對(duì)于具有相同屬性但順序不同的對(duì)象，的結(jié)果可能出乎意料，這需要額外注意。 在實(shí)際操作中，可能會(huì)遇到諸如數(shù)據(jù)庫(kù)存儲(chǔ)后屬性消失、axios請(qǐng)求參數(shù)undefined消失等問(wèn)題，這可能是由于replacer函數(shù)的過(guò)濾、屬性設(shè)置或數(shù)據(jù)類型的特殊性導(dǎo)致的。 與localStorage的配合使用時(shí)，確保數(shù)據(jù)為字符串是關(guān)鍵。 通過(guò)上述內(nèi)容，你應(yīng)該對(duì)有了更深入的認(rèn)識(shí)。 在遇到問(wèn)題時(shí)，記得檢查replacer、對(duì)象屬性和數(shù)據(jù)類型，找出問(wèn)題的根源。 加入我們的技術(shù)討論小組，一起交流學(xué)習(xí)，提升前端開發(fā)技能吧！

JSON.stringify 報(bào)錯(cuò) Invalid string length

最近，用戶在使用 xuejianxianzun/PixivBatchDownloader 下載器時(shí)遇到了一個(gè)挑戰(zhàn)：大量文件抓取后，在導(dǎo)出結(jié)果時(shí)， 函數(shù)拋出了 Invalid string length 的錯(cuò)誤。 問(wèn)題源于數(shù)據(jù)處理過(guò)程中，當(dāng)處理大量對(duì)象時(shí)，生成的字符串超過(guò)了JavaScript引擎的長(zhǎng)度限制，通常為2的29次方，即約512MB。 為解決這個(gè)限制，一個(gè)解決方案是將數(shù)據(jù)分解。 原有的做法是將整個(gè)數(shù)據(jù)集轉(zhuǎn)換為一個(gè)字符串，現(xiàn)在改為逐個(gè)對(duì)象處理，將每個(gè)對(duì)象轉(zhuǎn)換為字符串并存儲(chǔ)在數(shù)組中。 這樣，每個(gè)字符串的長(zhǎng)度都將大大減少，從而避免了單個(gè)字符串過(guò)長(zhǎng)導(dǎo)致的錯(cuò)誤。 另外，如果不進(jìn)行格式化，還可以進(jìn)一步減小字符串長(zhǎng)度和生成文件的體積。 通過(guò)這些策略，我們可以有效應(yīng)對(duì)處理大容量數(shù)據(jù)時(shí)的長(zhǎng)度限制問(wèn)題。

JSON.stringify() 的使用

復(fù)制粘貼一下 ()三個(gè)參數(shù)的含義：

返回值：返回包含 JSON 文本的字符串。 從上面的參數(shù)說(shuō)明中可以看到，第二個(gè)參數(shù)可以是一個(gè)函數(shù)或者數(shù)組，這給了我們很大的發(fā)揮空間。

stringify() 的第一個(gè)和第三個(gè)參數(shù)都好理解，所以下面主要說(shuō)的是第二個(gè)參數(shù)。

當(dāng)?shù)诙€(gè)參數(shù)為數(shù)組時(shí)，可作為條件篩選使用。 例如有如下對(duì)象：

如果我們只需要name屬性，則可以這樣：

這個(gè)特性只對(duì)對(duì)象的根屬性生效，例如：

即使第二層上也有name屬性，但在篩選時(shí)并不會(huì)選中。 當(dāng)對(duì)一個(gè)數(shù)組進(jìn)行轉(zhuǎn)換時(shí)，會(huì)篩選數(shù)組第一層的每個(gè)值，例如：

基本上數(shù)組的用法就是如此了。

函數(shù)的發(fā)揮空間是很大的，理所當(dāng)然地用法也就比較多了。 當(dāng)?shù)诙€(gè)參數(shù)為函數(shù)時(shí)，stringify() 會(huì)給函數(shù)傳遞兩個(gè)參數(shù)，參數(shù)值為每一個(gè)成員的鍵和值。 但跟數(shù)組參數(shù)不同的是，函數(shù)會(huì)處理所有層級(jí)上的每一個(gè)成員。 例如：

所有符合條件的內(nèi)容都被修改了（注意『小紅』是『小剛』的下一層）。 正是因?yàn)楹瘮?shù)的這個(gè)特性，我們可以很方便地實(shí)現(xiàn)一些可能比較麻煩的功能。 比如上面的例子，如果不使用 stringify() 方法而想要修改所有層級(jí)上的age屬性的值，就需要需要進(jìn)行深循環(huán)。

上面的例子中，如果想要復(fù)制一份arr的數(shù)據(jù)，通常是進(jìn)行深拷貝，但其實(shí)也可以使用stringify()，只需要配合 () 即可：

stringify() 不能處理值為函數(shù)的成員，當(dāng)某個(gè)成員的值為函數(shù)時(shí)，在轉(zhuǎn)換過(guò)程中會(huì)被自動(dòng)排除，例如：

同樣的，() 方法是不能處理函數(shù)格式的字符串的。

JSON.stringfy、JSON.parse 使用及注意問(wèn)題

在JavaScript中，() 和 () 是處理JSON數(shù)據(jù)的兩個(gè)關(guān)鍵工具。() 有多種用法：

而 () 則用于解析JSON字符串，傳入自定義解析器提供靈活性，但需確保輸入字符串為有效JSON格式。 比如，如果字符串不符合JSON規(guī)范，會(huì)引發(fā)錯(cuò)誤。

總結(jié)，使用這兩個(gè)方法時(shí)，要密切關(guān)注序列化和解析過(guò)程中可能遇到的循環(huán)引用、格式錯(cuò)誤以及特殊類型轉(zhuǎn)換等問(wèn)題。

---

---

相關(guān)標(biāo)簽： 避免常見(jiàn)陷阱和優(yōu)化性能、 JSON.stringify、 jsonserver、 最佳實(shí)踐、

上一篇：JSONstringify應(yīng)用場(chǎng)景數(shù)據(jù)存儲(chǔ)通信和更多j

下一篇：JSONstringify的奧秘理解轉(zhuǎn)換過(guò)程和選項(xiàng)jso