JSON (JavaScript 對象表示法) 是一種輕量級的、基于文本的數據格式，用于在網絡上傳輸數據。它易于理解，并且可以輕松地轉換為 JavaScript 對象和反之。

JavaScript 提供了兩個內置函數，用于處理 JSON 數據： JSON.stringify() 和 JSON.parse() 。

JSON.stringify()

JSON.stringify() 函數將 JavaScript 對象序列化為 JSON 字符串。它接受一個 JavaScript 對象作為參數，并返回一個表示該對象的 JSON 字符串。

語法：```jsJSON.stringify(value, replacer, space)```參數： value ：要序列化的 JavaScript 對象。 replacer （可選）：一個函數或數組，用于轉換要序列化的值。 space （可選）：一個空格符，用于縮進 JSON 字符串中的內容，以提高可讀性。返回值：一個表示該 JavaScript 對象的 JSON 字符串。示例：```jsconst person = { name: "John Doe", age: 30 };const jsonString = JSON.stringify(person);console.log(jsonString); // 輸出："{"name":"John Doe","age":30}"```

JSON.parse()

JSON.parse() 函數將 JSON 字符串反序列化為 JavaScript 對象。它接受一個 JSON 字符串作為參數，并返回一個表示該字符串的 JavaScript 對象。

語法：```jsJSON.parse(text, reviver)```參數： text ：要反序列化的 JSON 字符串。

---

如何將 javascript 對象轉換成 json字符串

1、可以使用toJSONString()或者全局方法()將JSON對象轉化為JSON字符串。 例如：var last=(); //將JSON對象轉化為JSON字符或者var last=(obj); //將JSON對象轉化為JSON字符alert(last);注意：ie8以上(包括ie8)瀏覽器有效，上面的幾個方法中，除了eval()函數是js自帶的之外，其他的幾個方法都來自包。 新版本的 JSON 修改了 API，將 () 和 () 兩個方法都注入到了 Javascript 的內建對象里面，前者變成了 ()，而后者變成了 ()。 如果提示找不到toJSONString()和parseJSON()方法，則說明您的json包版本太低。 2、JSON字符串轉換為JSON對象要使用上面的str1，必須使用下面的方法先轉化為JSON對象：//由JSON字符串轉換為JSON對象var obj = eval(( + str + ));或者var obj = (); //由JSON字符串轉換為JSON對象或者var obj = (str); //由JSON字符串轉換為JSON對象然后，就可以這樣讀?。篈lert();Alert();特別注意：如果obj本來就是一個JSON對象，那么使用eval（）函數轉換后（哪怕是多次轉換）還是JSON對象，但是使用parseJSON（）函數處理后會有問題（拋出語法異常）。

JSON.parse和JSON.stringify的區別

用于從一個字符串中解析出json 對象。 例如var str={name:cpf,age:23}經 (str) 得到：Object: age:23name:cpf_proto_:Objectps:單引號寫在{}外，每個屬性都必須雙引號，否則會拋出異常用于從一個對象解析出字符串，例如var a={a:1,b:2}經 (a)得到：“{“a”:1,b:2}”，這個函數的作用主要是為了系列化對象的。 （或者說是將原來的對象轉換為字符串的，如json對象）：首先定義一個json對象，var jsonObject = { UserID: 1, UserName: xiaozhang };使用alert(jsonObject)彈出一下，顯示：[Object Object]然后調用一下一下，將json對象轉換為json字符串。 varjsontext = (jsonObject);alert(jsontext)；顯示如下：{UserID:1,UserName:xiaozhang}2、,將一個JSON字符串轉換為JSON對象（也是將一個json字符串解析為json對象），如下面首先定義一個JSON字符串，var c = {name:Mike,sex:男,age:29}；（注意：單引號寫在{}外，每個屬性名都必須用雙引號，否則會拋出異常。 ）然后調用將其轉換為JSON對象，varemployeejson=(c);訪問的時候使用,,獲取相應的值

js將jsn對象的方法解析

在JavaScript中，處理JSON對象和字符串的操作至關重要。首先，將JSON字符串轉化為對象有多種方式：

然而，需要注意的是，eval雖然可以轉換，但多次使用可能會導致安全問題。 而parseJSON方法處理JSON字符串時，如果原對象就是JSON，可能會拋出語法異常。

相反，將JSON對象轉化為字符串，可以使用內置的toJSONString或方法。例如：

值得注意的是，新版本的JSON API已經將和parse方法整合到JavaScript內置對象中，分別變為和。 如果遇到找不到這些方法的情況，可能是使用的json包版本過舊。

總結，JSON對象與字符串的轉換需要掌握eval、parseJSON、toJSONString和的正確使用，同時注意新版本API的更新。

如何將 javascript 對象轉換成 json字符串

帶你一起實現JSON.Stringify方法

方法能夠站在全局考察對JS各種數據類型理解的深度，對各種極端的邊界情況處理能力，以及JS的編碼能力。 之所以將這篇作為這一模塊的進階，是因為想把整個數據類型的知識點串起來，讓理解得更加融會貫通，能夠更上一層樓。

在前端面試過程中，這個題目也經常會被問到。 大部分候選人只知道這個方法的作用，而如果讓他自己實現一個方法的話，大多數人都不一定能寫出來，或者即便能寫出來一些，但是考慮的問題又不夠全面。

因此要想夯實自身JavaScript的編程基礎，通過實踐來實現一些JSAPI`方法，是非常有必要的，所以就來搞懂它。

方法基本介紹

是日常開發中經常用到的JSON對象中的一個方法，JSON對象包含兩個方法：一是用于解析成JSON對象的parse()；二是用于將對象轉換為JSON字符串方法的stringify()。 下面分別來看下兩個方法的基本使用情況。

方法用來解析JSON字符串，構造由字符串描述的JavaScript值或對象。 該方法有兩個參數：第一個參數是需要解析處理的JSON字符串，第二個參數是可選參數提供可選的reviver函數，用在返回之前對所得到的對象執行變換操作。

該方法的語法為(text[,reviver])

下面通過一段代碼來看看這個方法以及reviver參數的用法，如下所示。

constjson={result:true,count:2};constobj=(json);();//();//true/*帶第二個參數的情況*/({p:5},function(k,v){if(k===)returnv;//如果k不是空，returnv*2;//就將屬性值變為原來的2倍返回});//{p:10}

上面的代碼說明了，可以將一個符合JSON格式的字符串轉化成對象返回；帶第二個參數的情況，可以將待處理的字符串進行一定的操作處理，比如上面這個例子就是將屬性值乘以2進行返回。

方法是將一個JavaScript對象或值轉換為JSON字符串，默認該方法其實有三個參數：第一個參數是必選，后面兩個是可選參數非必選。 第一個參數傳入的是要轉換的對象；第二個是一個replacer函數，比如指定的replacer是數組，則可選擇性地僅處理包含數組指定的屬性；第三個參數用來控制結果字符串里面的間距，后面兩個參數整體用得比較少。

該方法的語法為(value[,replacer[,space]])

下面通過一段代碼來看看后面幾個參數的妙用，如下所示。

({x:1,y:2});//{x:1,y:2}({x:[10,undefined,function(){},Symbol()]})//{x:[10,null,null,null]}/*第二個參數的例子*/functionreplacer(key,value){if(typeofvalue===string){returnundefined;}returnvalue;}varfoo={foundation:Mozilla,model:box,week:4,transport:car,month:7};varjsonString=(foo,replacer);(jsonString);//{week:4,month:7}/*第三個參數的例子*/({a:2},null,);/*{a:2}*/({a:2},null,);//{a:2}

從上面的代碼中可以看到，增加第二個參數replacer帶來的變化：通過替換方法把對象中的屬性為字符串的過濾掉，在stringify之后返回的僅為數字的屬性變成字符串之后的結果；當第三個參數傳入的是多個空格的時候，則會增加結果字符串里面的間距數量，從最后一段代碼中可以看到結果。

下面再看下的內部針對各種數據類型的轉換方式。

如何自己手動實現？

為了更好地理解實現的過程，回想一下JS的數據類型你了解多少中的基本知識，當時講了那么多種數據類型，如果它們都使用這個方法，返回的結果又會是怎么樣的呢？

分析各種數據類型及邊界情況

來分析一下都有哪些數據類型傳入，傳入了之后會有什么返回，通過分析的結果,才能更好地實現編碼。 大致的分析匯總如下表所示（可參考MDN文檔）。

輸入輸出基礎數據類型undefinedundefined基礎數據類型booleantrue/false基礎數據類型number字符串類型的數值基礎數據類型symbolundefined基礎數據類型nullnull基礎數據類型stringstring基礎數據類型NaN和Infinitynull引用數據類型Array數組中出現了undefined、function以及symbolnull引用數據類型RegExp{}引用數據類型DateData的toJSON()字符串值引用數據類型普通object1.如果有toJSON方法，那么序列化toJSON()的返回值2.如果屬性值中出現了undefined、任意的函數以及symbol值，忽略3.所有symbol為屬性鍵的屬性都會被完全忽略掉

上面這個表中，基本整理出了各種數據類型通過··這個方法之后返回對應的值，但是還有一個特殊情況需要注意：對于包含循環引用的對象（深拷貝那講中也有提到）執行此方法，會拋出錯誤。

代碼邏輯實現

先利用typeof把基礎數據類型和引用數據類型分開，分開之后再根據不同情況來分別處理不同的情況，按照這個邏輯代碼實現如下。

functionjsonStringify(data){lettype=typeofdata;if(type!==object){letresult=data;//data可能是基礎數據類型的情況在這里處理if((data)||data===Infinity){//NaN和Infinity序列化返回nullresult=null;}elseif(type===function||type===undefined||type===symbol){//由于function序列化返回undefined，因此和undefined、symbol一起處理returnundefined;}elseif(type===string){result=+data+;}returnString(result);}elseif(type===object){if(data===null){returnnull//第01講有講過typeofnull為object的特殊情況}elseif(&&===function){returnjsonStringify(());}elseif(datainstanceofArray){letresult=[];//如果是數組，那么數組里面的每一項類型又有可能是多樣的((item,index)=>{if(typeofitem===undefined||typeofitem===function||typeofitem===symbol){result[index]=null;}else{result[index]=jsonStringify(item);}});result=[+result+];(//g,);}else{//處理普通對象letresult=[];(data)((item,index)=>{if(typeofitem!==symbol){//key如果是symbol對象，忽略if(data[item]!==undefined&&typeofdata[item]!==function&&typeofdata[item]!==symbol){//鍵值如果是undefined、function、symbol為屬性值，忽略(+item++:+jsonStringify(data[item]));}}});return({+result+})(//g,);}}}

手工實現一個方法的基本代碼如上面所示，有幾個問題還是需要注意一下：

由于function返回null，并且typeoffunction能直接返回精確的判斷，故在整體邏輯處理基礎數據類型的時候，會隨著undefined，symbol直接處理了；

由于之前講說過typeofnull的時候返回object，故null的判斷邏輯整體在處理引用數據類型的邏輯里面；

關于引用數據類型中的數組，由于數組的每一項的數據類型又有很多的可能性，故在處理數組過程中又將undefined，symbol，function作為數組其中一項的情況做了特殊處理

同樣在最后處理普通對象的時候，key（鍵值）也存在和數組一樣的問題，故又需要再針對上面這幾種情況（undefined，symbol，function）做特殊處理；

最后在處理普通對象過程中，對于循環引用的問題暫未做檢測，如果是有循環引用的情況，需要拋出Error；

  整體來說這段代碼還是比較復雜的，如果在面試過程中當場手寫，其實整體還是需要考慮很多東西的。 當然上面的代碼根據每個人的思路不同，也可以寫出自己認為更優的代碼，比如也可以嘗試直接使用switch語句，來分別針對特殊情況進行處理，整體寫出來可能看起來會比上面的寫法更清晰一些，這些可以根據自己情況而定。

實現效果測試

上面的這個方法已經實現了，那么用起來會不會有問題呢？就用上面的代碼，來進行一些用例的檢測吧。

上面實現的這個jsonStringify方法和真正的想要得到的效果是否一樣呢？請看下面的測試結果。

letnl=null;(jsonStringify(nl)===(nl));//trueletund=undefined;(jsonStringify(undefined)===(undefined));//trueletboo=false;(jsonStringify(boo)===(boo));//trueletnan=NaN;(jsonStringify(nan)===(nan));//trueletinf=Infinity;(jsonStringify(Infinity)===(Infinity));//trueletstr=jack;(jsonStringify(str)===(str));//trueletreg=newRegExp(\w);(jsonStringify(reg)===(reg));//trueletdate=newDate();(jsonStringify(date)===(date));//trueletsym=Symbol(1);(jsonStringify(sym)===(sym));//trueletarray=[1,2,3];(jsonStringify(array)===(array));//trueletobj={name:jack,age:18,attr:[coding,123],date:newDate(),uni:Symbol(2),sayHi:function(){(hi)},info:{sister:lily,age:16,intro:{money:undefined,job:null}}}(jsonStringify(obj)===(obj));//true

通過上面這些測試的例子可以發現，實現的jsonStringify方法基本和轉換之后的結果是一樣的，不難看出jsonStringify基本滿足了預期結果。

總結

利用原理結合實踐的方式，實現了一個的方法。 從中可以看到，要想自己實現一個方法整體上來說并不容易，它依賴很多數據類型相關的知識點，而且還需要考慮各種邊界情況。

另外，如果把本講中的題目作為面試題的話，其實是對JS編碼能力的一個很全面的考察，因此對于數據類型的相關知識還是很有必要系統性地學習，尤其是對于JSON的這兩個方法，不常用的那幾個參數是否有了解？還有引用數據類型中對數組以及普通對象的處理，這部分手寫起來會比基礎數據類型復雜一些，在一些細節處理上會遇到問題。 因此，要好好理解。

---

---

相關標簽： JSON、 與、 數據序列化與反序列化的比較、 和json.parse、 json.stringify、 JSON.parse、 JSON.stringify、

上一篇：JSONstringify進階指南自定義轉換和特殊情

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