json. stringify of and json. parse of

  • 2021-10-25 05:44:41
  • OfStack

1. The difference between JSON. stringify () and JSON. parse ()

We've all used JSON. stringify () and JSON. parse (), as you can tell from the names
JSON. stringify () converts an JavaScript object to an JSON string
JSON. parse () converts an JSON string to 1 object.

Easy-to-understand version:

JSON. stringify () converts the object a to the string s; JSON. parse () converts the string s to the object a;

Simply put, their effects are relative. I use JSON. stringify () to change the object a to the string c, so I can use JSON. parse () to restore the string c to the object a.


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

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

There is one point to note when using JSON. parse (). Since this method converts JSON strings into objects, your strings must conform to JSON format, that is, key values must be wrapped in double quotation marks:


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

2. JSON. stringify ()

1. Determine whether the array contains an object, or whether the objects are equal.


// Determine whether the array contains an object 
let data = [
  {name:' Nuggets '},
  {name:'css Learning '},
  {name:'js Learning '},
  ],
  val = {name:' Nuggets '};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true

// Judge two arrays / Objects are equal 
let a = [1,2,3],
  b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

2. Enable localStorage/sessionStorage to store objects.

localStorage/sessionStorage can only store strings by default, but in actual development, the data we often need to store is mostly of object type, so here we can use json. stringify () to turn objects into strings when storing, and only need to cooperate with json. parse () to turn back objects when taking cache.


// Deposit 
function setLocalStorage(key,val){
  window.localStorage.setItem(key,JSON.stringify(val));
};
// Take 
function getLocalStorage(key){
  let val = JSON.parse(window.localStorage.getItem(key));
 window.localStorage.removeItem(key)
  return val;
};
// Test 
let data = [
  {name:' Nuggets '},
  {name:'css Learning '},
  {name:'js Learning '},
  ];
setLocalStorage('STORAGEDATE',data);
let a = getLocalStorage('STORAGEDATE'); 

3. Implement deep copy of objects

In actual development, if we are afraid of affecting the original data, we often make a deep copy of one data for arbitrary operation. In fact, it is a good choice to use JSON. stringify () and JSON. parse () to realize deep copy.


// Deep copy 
function deepClone(data) {
  let _data = JSON.stringify(data),
    dataClone = JSON.parse(_data);
  return dataClone;
};
// Test 
let arr = [1,2,3],
  _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3] [1,2,3]

Related articles: