前言

在前端開發程序中，對于JSON的處理使用的場景是比較多的，也是比較常見的需求，JSON 是用于存盤和傳輸資料的格式，JSON 通常用于服務端向網頁傳遞資料，而且它是一種輕量級的資料交換格式，尤其是在JS開發相關的時候，將JSON 資料轉換為 JavaScript 物件是非常常見的處理方式，那么本文就來分享一下前端對于JSON處理的常用方法JSON.stringify()和JSON.parse() 的使用總結，

一、功能介紹

1、JSON.stringify()

JSON.stringify() 方法用于將 JavaScript物件轉換為 JSON 字串，也就是從一個物件中決議出來字串，

2、JSON.parse()

JSON.parse() 方法用于將資料轉換為 JavaScript 物件，也就是從一個字串中決議出來物件，

簡單來講，JSON.stringify()和JSON.parse()的作用是相對的、互斥的，例如用JSON.stringify()將物件a變成了字串b，那么就可以 直接用JSON.parse()將字串b還原成物件a，

二、語法及引數

1、JSON.stringify()

語法： JSON.stringify(value[, replacer[, space]])

引數：

• value:必傳引數， 想要轉換的 JavaScript 值（一般為物件或陣列），
• replacer: 可選引數，用于轉換結果的函式或陣列，
  space: 可選引數，文本添加縮進、空格和換行符，space 也可以使用非數字，如：\t，

回傳值：回傳的是包含 JSON 文本的字串，

2、JSON.parse()

語法：JSON.parse(text[, reviver])

引數：

• text:必傳引數， 想要轉換的標準有效的JSON 字串，
• reviver: 可選引數，一個轉換結果的函式，將為物件的每個成員呼叫此函式，

回傳值：回傳的是JavaScript 物件，

三、實體

1、JSON.stringify()的使用

物件轉字串

var str = {"name":"sanzhanggui", "age":"30","gender":"male","phone":"15290331111"};

basic_str = JSON.stringify(str);

console.log(basic_str); //輸出字串

2、JSON.parse()的使用

字串轉陣列

var jdList = [];

var str1 = '[{\"createBy\":70446,\"createDate\":1622092153440,\"updateBy\":70446,\"updateDate\":1622092153440,\"remarks\":null,\"id\":4037,\"templateId\":61,\"fieldId\":132,\"fieldName\":\"JD\",\"fieldType\":\"1\",\"fieldLength\":999,\"fieldSetup\":null,\"isRequired\":\"1\",\"isVisible\":\"1\",\"isFixed\":\"1\",\"reason\":null,\"lineAccounted\":null,\"value\":\"444\",\"options\":null,\"sortNum\":8,\"status\":\"1\",\"clearable\":true,\"templates\":\"col-sm-6\"},{\"createBy\":70446,\"createDate\":1622092153440,\"updateBy\":70446,\"updateDate\":1622092153440,\"remarks\":null,\"id\":4039,\"templateId\":61,\"fieldId\":129,\"fieldName\":\"需求時間\",\"fieldType\":\"5\",\"fieldLength\":1,\"fieldSetup\":null,\"isRequired\":\"1\",\"isVisible\":\"1\",\"isFixed\":\"1\",\"reason\":null,\"lineAccounted\":null,\"value\":\"2021-06-22T16:00:00.000Z\",\"options\":null,\"sortNum\":10,\"status\":\"1\",\"templates\":\"col-sm-6\"}]';



jdList = JSON.parse(str1);

console.log(jdList); //輸出陣列的兩條資料

字串轉物件

var jdData = {};

var str2 = '{\"createBy\":70446,\"createDate\":1622092153440,\"updateBy\":70446,\"updateDate\":1622092153440,\"remarks\":null,\"id\":4037,\"templateId\":61,\"fieldId\":132,\"fieldName\":\"JD\",\"fieldType\":\"1\",\"fieldLength\":999,\"fieldSetup\":null,\"isRequired\":\"1\",\"isVisible\":\"1\",\"isFixed\":\"1\",\"reason\":null,\"lineAccounted\":null,\"value\":\"444\",\"options\":null,\"sortNum\":8,\"status\":\"1\",\"clearable\":true,\"templates\":\"col-sm-6\"}';



jdData = JSON.parse(str2);

console.log(jdList); //輸出物件

四、應用場景

JSON.stringify()的使用

1、通過JSON.stringify()進行處理

假如后臺Java對應的RequestMapping引數串列中的引數為一個物件，前臺有多個傳輸，那就需要通過JSON.stringify()進行處理，否則會出現引數決議例外報錯，

2、判斷陣列是否包含某物件，或者判斷物件是否相等，

//判斷陣列是否包含某物件

var data = [ {name:'123'}, {name:'abc'}, {name:'@#$'}];

var value = {name:'abc'};

JSON.stringify(data).indexOf(JSON.stringify(value)) !== -1;   //true



//判斷兩個陣列或者物件是否相等

var  a = [a,b,c],

var  b = [a,b,c];

JSON.stringify(a) === JSON.stringify(b);     //true

3、通過讓localStorage/sessionStorage可以存盤物件格式的資料

localStorage/sessionStorage默認的情況下只能存盤字串型別的資料，但是在實際開發的時候需要存盤的資料多為物件型別，那么就可以利用json.stringify()將物件轉為字串再進行快取存盤，在取快取資料的時候，通過json.parse()配合使用把資料轉回成物件就可以，

//快取資料

function setStorage(key, value){

    window.localStorage.setItem(key,JSON.stringify(value));

};

//取出快取資料

function getStorage(key){

    let value = JSON.parse(window.localStorage.getItem(key));

    return value;

};

4、實作物件的深拷貝

在開發程序中，若怕影響到原始資料，通常操作是深拷貝出一份原始資料做任意的操作，其實可以通過使用JSON.stringify()與JSON.parse()來實作深拷貝，

//深拷貝

function deepCopy(data) {

    let _data = JSON.stringify(data),

        dataCopy = JSON.parse(_data);

    return dataCopy;

};

5、JSON.stringify()與toString()的使用對比

JSON.stringify()與toString()的使用對比，雖然二者都可將目標值轉為字串，但本質上還是有區別的，比如

let array = [1,2,3];

JSON.stringify(array);  // '[1,2,3]'

array.toString();  // 1,2,3

接著，JSON.stringify()的受體更多的是物件，但toString()雖可把陣列轉為字串，但并不能對{name:'@#$'}這類的物件實作想要的操作效果，toString()的受體更多的是數字，

五、JSON.parse()的使用

1、使用JSON.parse()進行處理

假如前臺向后臺請求，然后后臺回傳一大堆的字串資料，此時前臺頁面渲染需要將后臺回傳一大堆的字串資料以物件的形式渲染出來，這時候就需要使用JSON.parse()進行處理，

2、注意事項

在使用JSON.parse()的時候需要注意一下，由于此方法是把JSON字串轉換成物件，所以該字串必須符合JSON格式，即鍵值都必須使用雙引號包裹才行，不然會引起報錯，

以上就是本章的全部內容，歡迎關注三掌柜的微信公眾號“程式猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，歡迎關注！

三掌柜的微信公眾號：

三掌柜的新浪微博：