The difference and use of json.stringify() and json.parse()

1. Differences between JSON.stringify() and JSON.parse()

We have all used JSON.stringify() and JSON.parse(). You can tell from the names
JSON.stringify() is used to convert a JavaScript object into a JSON string.
JSON.parse() can convert a JSON string into an object.

Easy-to-understand version:

• JSON.stringify() converts object a into string s;
• JSON.parse() converts string s into object a;

To put it simply, their functions are relative. If I use JSON.stringify() to convert object a into string c, then I can use JSON.parse() to restore string c into 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

One thing to note when using JSON.parse() is that since this method converts a JSON string into an object, your string must conform to the JSON format, that is, both keys and values ​​must be wrapped in double quotes:

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

2. Useful Uses of JSON.stringify()

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

//Judge 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 whether two arrays/objects are equal let a = [1,2,3],
  b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b); //true

2. Allow localStorage/sessionStorage to store objects.

By default, localStorage/sessionStorage can only store strings. In actual development, we often need to store objects. In this case, we can use json.stringify() to convert objects into strings when storing them. When retrieving the cache, we only need to use json.parse() to convert them back into objects.

//Storage function setLocalStorage(key,val){
  window.localStorage.setItem(key,JSON.stringify(val));
};
//Get 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 the data for arbitrary operations. In fact, using JSON.stringify() and JSON.parse() to achieve 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]

This concludes this article about the differences and uses of json.stringify() and json.parse(). For more information about json.stringify() and json.parse(), please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!