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]