json. Stringify() and json The difference between parse () and json Usage of stringify()

Recent projects , Find out JSON.stringify() There are a lot of scenarios , We all know JSON.stringify() The role of the JavaScript Object to JSON character string , and JSON.parse() Can be JSON String to an object .

To put it simply , Their functions are relative , I use JSON.stringify() Put the object a It becomes a string c, Then I can use JSON.parse() The string c Restore to 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

In the use of JSON.parse() One thing to note , Because this method is JSON Converts a string to an object , So your string must match JSON Format , That is, the key value 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 errors 

Two 、JSON.stringify() Several wonderful uses of

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

// Determine whether the array contains an object 
let data = [
    {
    name:'echo'},
    {
    name:' Listening to the wind is the wind '},
    {
    name:' The emperor laughs '},
    ],
    val = {
    name:' The emperor laughs '};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

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

2. Give Way localStorage/sessionStorage Can store objects .
localStorage/sessionStorage By default, only strings can be stored , But in actual development , Most of the data we need to store are object types , So here we can use... In storage json.stringify() Convert object to string , When fetching the cache , Just cooperate json.parse() Just turn back to the object .

// save 
function setLocalStorage(key,val){
    
    window.localStorage.setItem(key,JSON.stringify(val));
};
// take 
function getLocalStorage(key){
    
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};
// test 
setLocalStorage('demo',[1,2,3]);
let  a = getLocalStorage('demo');//[1,2,3]

3. Implement object deep copy
In development , If you are afraid of affecting the original data , We often copy out a copy of data and do any operation , Actually use JSON.stringify() And JSON.parse() To realize deep copy is a good choice .

// 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]

3、 ... and 、JSON.stringify() And toString() The difference between

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

secondly ,JSON.stringify() The target audience is more , and toString() Although you can turn an array into a string , But not to {name:‘ Arlene ’} This kind of object implements the operation you want , Its audience is more digital .

So maybe so much has been sorted out , If you encounter problems in later work, please add them again .