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

---

深拷貝的兩種實現方式

淺拷貝只是創建了一個新的對象，復制了原有對象的基本類型的值，而引用數據類型只拷貝了一層屬性，再深層的還是無法進行拷貝。如果其中一個對象改變了這個內存中的地址，肯定會影響到另一個對象

深拷貝則不同，對于復雜引用數據類型，將一個對象從內存中完整地拷貝出來一份給目標對象，并從堆內存中開辟一個全新的空間存放新對象，且新對象的修改并不會改變原對象，這兩個對象是相互獨立、不受影響的，徹底實現了內存上的分離

實現深拷貝，一般兩種方式方式：

使用(());

手動實現

(())版本

()是最簡單的深拷貝方法，其實就是把一個對象序列化成為JSON的字符串，并將對象里面的內容轉換成字符串，最后再用()的方法將JSON字符串生成一個新的對象

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

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

拷貝的對象的值中如果有函數、undefined、symbol這三種類型，經過序列化之后的字符串中這個鍵值對會消失

undefined、任意的函數以及symbol作為對象屬性值時()跳過（忽略）對它們進行序列化

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

拷貝Date引用類型會變成字符串

無法拷貝不可枚舉的屬性

無法拷貝對象的原型鏈

拷貝RegExp引用類型會變成空對象

對象中含有NaN、Infinity以及-Infinity，JSON序列化的結果會變成null

無法拷貝包含循環引用的對象（對象之間相互引用，形成無限循環），會拋出錯誤

手動實現

由于(())實現深拷貝存在一定的不足，在業務開發中建議慎重使用，因此我們需要自己手動實現一版深拷貝

手動實現過程中需要解決的問題，也就是補齊(())不足的一個過程，上述已經闡述其不足，接下來直接上代碼：

細節在代碼中已注釋

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

深入理解JSON.stringify()

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

JSON.stringify 報錯 Invalid string length

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

JSON.stringify() 的使用

復制粘貼一下 ()三個參數的含義：

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

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

當第二個參數為數組時，可作為條件篩選使用。 例如有如下對象：

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

這個特性只對對象的根屬性生效，例如：

即使第二層上也有name屬性，但在篩選時并不會選中。 當對一個數組進行轉換時，會篩選數組第一層的每個值，例如：

基本上數組的用法就是如此了。

函數的發揮空間是很大的，理所當然地用法也就比較多了。 當第二個參數為函數時，stringify() 會給函數傳遞兩個參數，參數值為每一個成員的鍵和值。 但跟數組參數不同的是，函數會處理所有層級上的每一個成員。 例如：

所有符合條件的內容都被修改了（注意『小紅』是『小剛』的下一層）。 正是因為函數的這個特性，我們可以很方便地實現一些可能比較麻煩的功能。 比如上面的例子，如果不使用 stringify() 方法而想要修改所有層級上的age屬性的值，就需要需要進行深循環。

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

stringify() 不能處理值為函數的成員，當某個成員的值為函數時，在轉換過程中會被自動排除，例如：

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

JSON.stringfy、JSON.parse 使用及注意問題

在JavaScript中，() 和 () 是處理JSON數據的兩個關鍵工具。() 有多種用法：

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

總結，使用這兩個方法時，要密切關注序列化和解析過程中可能遇到的循環引用、格式錯誤以及特殊類型轉換等問題。

---

---

相關標簽： 避免常見陷阱和優化性能、 JSON.stringify、 jsonserver、 最佳實踐、

上一篇：JSONstringify應用場景數據存儲通信和更多j

下一篇：JSONstringify的奧秘理解轉換過程和選項jso