一、JSON.stringify()和JSON.parse() 區別

我們都用過JSON.stringify()和JSON.parse() ，從名字上就能知道
JSON.stringify()的作用是將JavaScript物件轉換為JSON 字串
JSON.parse()可以將JSON字串轉為一個物件。

通俗易懂版:

• JSON.stringify() 將物件a轉化成字串s;
• JSON.parse() 將字串s轉化成物件a;

簡單點說，它們的作用是相對的，我用JSON.stringify()將物件a變成了字串c，那麼我就可以用JSON.parse()將字串c還原成物件a。

let arr = [1,2,3];
JSON.stringify(arr);//'[1,3]'
typeof JSON.stringify(arr);//string

let string = '[1,3]';
console.log(JSON.parse(string))//[1,3]
console.log(typeof JSON.parse(string))//object

在使用JSON.parse()需要注意一點，由於此方法是將JSON字串轉換成物件，所以你的字串必須符合JSON格式，即鍵值都必須使用雙引號包裹：

let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a));// Array [1,2]
console.log(JSON.parse(b));// 報錯

二、JSON.stringify()妙用

1.判斷陣列是否包含某物件，或者判斷物件是否相等。

//判斷陣列是否包含某物件
let data = [
  {name:'掘金'},{name:'css學習'},{name:'js學習'},],val = {name:'掘金'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true

//判斷兩陣列/物件是否相等
let a = [1,3],b = [1,3];
JSON.stringify(a) === JSON.stringify(b);//true

2.讓localStorage/sessionStorage可以儲存物件。

localStorage/sessionStorage預設只能儲存字串，而實際開發中，我們往往需要儲存的資料多為物件型別，那麼這裡我們就可以在儲存時利用json.stringify()將物件轉為字串，而在取快取時，只需配合json.parse()轉回物件即可。

//存
function setLocalStorage(key,val){
  window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
  let val = JSON.parse(window.localStorage.getItem(key));
 window.localStorage.removeItem(key)
  return val;
};
//測試
let data = [
  {name:'掘金'},];
setLocalStorage('STORAGEDATE',data);
let a = getLocalStorage('STORAGEDATE'); 

3.實現物件深拷貝

實際開發中，如果怕影響原資料，我們常深拷貝出一份資料做任意操作，其實使用JSON.stringify()與JSON.parse()來實現深拷貝是很不錯的選擇。

//深拷貝
function deepClone(data) {
  let _data = JSON.stringify(data),dataClone = JSON.parse(_data);
  return dataClone;
};
//測試
let arr = [1,_arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,3] [1,3]

到此這篇關於json.stringify()與json.parse()的區別以及用處的文章就介紹到這了,更多相關json.stringify()與json.parse()內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！