JSON.stringify() 函數用于將 JavaScript 值轉換為 JSON 字符串。JSON (JavaScript 對象符號) 是一種輕量級的數據格式，易于在應用程序之間傳輸和存儲數據。

語法

JSON.stringify(value, replacer, space)

其中： value： 要序列化的 JavaScript 值。它可以是對象、數組、字符串、數字或布爾值。 replacer： 可選參數，是一個函數或數組，用于自定義序列化過程。 space： 可選參數，指定生成的 JSON 字符串中的縮進量。

示例 1：序列化簡單值

const value = {name: "John",age: 30
};const json= JSON.stringify(value);console.log(json); // {"name":"John","age":30}

示例 2：使用 replacer 函數

replacer 函數可以在序列化過程中替換或刪除屬性。

const value = {name: "John",age: 30,password: "secret"
};const replacer = (key, value) => {if (key === "password") {return undefined;} else {return value;}
};const json = JSON.stringify(value, replacer);console.log(json); // {"name":"John","age":30}

示例 3：使用空間選項

space 選項可以使生成的 JSON 字符串更容易閱讀。

const value = {name: "John",age: 30,address: {street: "Main Street",city: "Anytown"}
};const json = JSON.stringify(value, null, 2);console.log(json);
/
{"name": "John","age": 30,"address": {"street": "Main Street","city": "Anytown"}
}
/

JSON.parse()

JSON.parse() 函數用于將 JSON 字符串解析為 JavaScript 值。

JSON.parse() 的語法如下：

JSON.parse(tExt, reviver)

其中： text： 要解析的 JSON 字符串。 reviver： 可選參數，是一個函數，用于自定義解析過程。

示例：將 JSON 字符串解析為 JavaScript 對象：

const json = '{"name":"John","age":30}';const obj = JSON.parse(json);console.log(obj); // {name: "John", age: 30}

結論

JSON.stringify() 和 JSON.parse() 是將 JavaScript 數據存儲和傳輸為 JSON 字符串的強大工具。通過使用 replacer 和 space 選項，您可以定制序列化和解析過程以滿足您的特定需求。

---

關于JSON.parse(JSON.stringfy(object))進行深拷貝的坑~

((object))就是利用 將js對象序列化（JSON字符串），再使用來反序列化（還原）js對象；序列化的作用是存儲(對象本身存儲的只是一個地址映射，如果斷電，對象將不復存在，因此需將對象的內容轉換成字符串的形式再保存在磁盤上 )和傳輸。 關于使用時需要注意以下幾點： 1、如果object里面有 時間對象 ，則后再的結果，時間將只是字符串的形式。 而不是時間對象； 2、如果object里有 RegExp、Error對象 ，則序列化的結果將只得到空對象； 3、如果obj里有 函數、undefined、symbol ，則序列化的結果會把函數或 undefined丟失； 4、如果obj里有 NaN、Infinity和-Infinity ，則序列化的結果會變成null 5、()只能序列化對象的可枚舉的自有屬性，例如 如果obj中的對象是有 構造函數 生成的， 則使用((obj))深拷貝后，會丟棄對象的 constructor ； 6、如果對象中存在 循環引用 的情況也無法正確實現深拷貝；

手寫JSON.parse和JSON.stringify

理解了有限狀態機，編寫各類解析器變得簡單，關鍵在于設計狀態轉換的邏輯。 手寫有兩大實現路徑，第一種是入門級，相對容易；第二種則是利用狀態機解析字符流，這需要了解一些編譯原理，否則理解起來可能較為困難。 初級版本的直接使用eval函數實現，但要注意在JSON字符串前后加上括號，否則會被誤認為是代碼塊并報錯。 高級版本的主要利用有限狀態機進行分詞，然后根據分詞數據構建JSON對象。 分詞階段的狀態設計相對復雜，可以從簡單的狀態開始，逐步增加難度以完善代碼。 以下版本僅考慮了一些簡單場景，特別是嵌套數組，直接將其視為一個token，不支持內部嵌套數組，以便于理解。 將分詞數組拼接成JSON，主要使用棧來緩存正在處理的對象。 在處理內部嵌套的引用類型值時，需要記住父對象的key（子對象處理完畢后再賦值給父對象的key）。 這里我在讀取到key時，會在當前對象上存儲key值，注意需要使用symbol類型添加屬性，否則可能會覆蓋對象中同名屬性。 在設置完對應key的屬性值后，再刪除自己添加的這個symbol屬性。 也可以通過一個棧來存儲每次讀取到的key，每次設置值時出棧即為當前要操作的key。 以下是測試效果的簡版，旨在展示核心原理。 它未處理許多異常情況，主要利用遞歸方法處理值中的對象和數組，其他基本數據類型則直接轉換為對應的toString形式拼接。

一文徹底弄懂JSON.parse()與JSON.stringify()

深入理解 () 和 () 的功能和用法，對于對象與JSON字符串的交互至關重要。 這兩個方法在轉換和序列化過程中起著核心作用。

(): 從JSON字符串到對象

() 是將JSON字符串解析為JavaScript對象的關鍵工具。 最常見的用法是將字符串轉換為包含數據的對象。 然而，在特殊情況下，如計算員工高溫費，可通過reviver函數實現屬性過濾或刪除。 需要注意的是，如果輸入的JSON格式有誤，它會拋出SyntaxError異常。

(): 從對象到JSON字符串

與之相對，() 負責將JavaScript對象轉換為JSON字符串。 使用時，可以指定特定屬性進行序列化，或者處理數組和非數組對象的轉換規則。 遇到循環引用或BigInt類型時，會引發TypeError異常。 MDN文檔提供了詳細的行為規范，包括值的序列化規則和異常處理。

其他應用場景

關于vue中JSON.parse(JSON.stringify(...))使用深拷貝問題

在Vue開發中，((...)) 的組合使用常常被用來實現深拷貝操作，這里我們來詳細探討一下。 首先，() 和 () 分別有其獨特的功能：- () 是將一個JSON格式的字符串解析成JavaScript對象，例如：原始字符串: var str = {name:huahua,age:22};解析操作: (str);這會得到一個對象: var obj = {name:hua,age: 26};- 而 () 則是將JavaScript對象轉換成JSON格式的字符串。 當你直接對一個對象執行 ()，得到的字符串其實是一個淺拷貝，因為字符串只是引用了原始對象的地址。 為了實現深拷貝，即創建一個全新的對象并復制所有屬性，可以先將對象轉為字符串，再解析回對象，這樣就創建了獨立的新對象，即：深拷貝示例: = (())這樣做的效果是，即使原始對象（）有嵌套的對象或數組，深拷貝也會為這些內容創建新的副本，確保在修改vueData時不會影響到原始對象（）。 總的來說，這是一種在Vue中實現對象深度復制的有效方法。

前端 JavaScript 對象與 json 字符串進行轉換

JavaScript對象可通過使用()函數轉換為JSON字符串。 比如，我們有一個JavaScript對象：轉換結果如下：JSON字符串轉對象JSON字符串能夠通過()函數轉換回JavaScript對象。 例如，我們有一個JSON字符串：轉換結果如下：需要注意的是，JSON字符串必須符合JSON規范，否則會引發異常。 例如，以下JSON字符串中，屬性名不應使用單引號：當使用()方法時，將拋出異?！癠ncaught SyntaxError”。

---

---

相關標簽： 和json.parse、 JSON.stringify、 json.stringify、 將數據序列化為、 字符串、 入門、 JSON、

上一篇：JSONstringify實用指南高效轉換JavaScript

下一篇：JSONstringify的藝術將JavaScript對象轉換