JSON.stringify() 函數(shù)用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。JSON (JavaScript 對(duì)象符號(hào)) 是一種輕量級(jí)的數(shù)據(jù)格式，易于在應(yīng)用程序之間傳輸和存儲(chǔ)數(shù)據(jù)。

語法

JSON.stringify(value, replacer, space)

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

示例 1：序列化簡單值

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

示例 2：使用 replacer 函數(shù)

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

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：使用空間選項(xiàng)

space 選項(xiàng)可以使生成的 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() 函數(shù)用于將 JSON 字符串解析為 JavaScript 值。

JSON.parse() 的語法如下：

JSON.parse(tExt, reviver)

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

示例：將 JSON 字符串解析為 JavaScript 對(duì)象：

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

結(jié)論

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

---

關(guān)于JSON.parse(JSON.stringfy(object))進(jìn)行深拷貝的坑~

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

手寫JSON.parse和JSON.stringify

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

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

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

(): 從JSON字符串到對(duì)象

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

(): 從對(duì)象到JSON字符串

與之相對(duì)，() 負(fù)責(zé)將JavaScript對(duì)象轉(zhuǎn)換為JSON字符串。 使用時(shí)，可以指定特定屬性進(jìn)行序列化，或者處理數(shù)組和非數(shù)組對(duì)象的轉(zhuǎn)換規(guī)則。 遇到循環(huán)引用或BigInt類型時(shí)，會(huì)引發(fā)TypeError異常。 MDN文檔提供了詳細(xì)的行為規(guī)范，包括值的序列化規(guī)則和異常處理。

其他應(yīng)用場景

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

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

前端 JavaScript 對(duì)象與 json 字符串進(jìn)行轉(zhuǎn)換

JavaScript對(duì)象可通過使用()函數(shù)轉(zhuǎn)換為JSON字符串。 比如，我們有一個(gè)JavaScript對(duì)象：轉(zhuǎn)換結(jié)果如下：JSON字符串轉(zhuǎn)對(duì)象JSON字符串能夠通過()函數(shù)轉(zhuǎn)換回JavaScript對(duì)象。 例如，我們有一個(gè)JSON字符串：轉(zhuǎn)換結(jié)果如下：需要注意的是，JSON字符串必須符合JSON規(guī)范，否則會(huì)引發(fā)異常。 例如，以下JSON字符串中，屬性名不應(yīng)使用單引號(hào)：當(dāng)使用()方法時(shí)，將拋出異常“Uncaught SyntaxError”。

---

---

相關(guān)標(biāo)簽： 和json.parse、 JSON.stringify、 json.stringify、 將數(shù)據(jù)序列化為、 字符串、 入門、 JSON、

上一篇：JSONstringify實(shí)用指南高效轉(zhuǎn)換JavaScript

下一篇：JSONstringify的藝術(shù)將JavaScript對(duì)象轉(zhuǎn)換