JSON object of two methods: JSON. The parse () and JSON stringify () are often used as a JSON object and mutual transformation between string, here no longer detail, you can see this article: www.css88.com/archives/39… .

Json.parse () and json.stringify () are advanced uses of json.parse () and json.stringify ().

JSON.parse()

Json.parse () can take a second argument, which converts the object value before returning. For example, in this example, the return object property value is capitalized:

const user = {
  name: 'John',
  email: '[email protected]',
  plan: 'Pro'
};
 
const userStr = JSON.stringify(user);
 
const newUserStr = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});
 
console.log(newUserStr); //{name: "JOHN", email: "[email protected]", plan: "PRO"} Copy the code

Note: Trailing commas do not work in JSON, so json.parse () will throw an error if it is passed a string with trailing commas.

JSON.stringify()

Json.stringify () can take two additional arguments, the first a replacement function and the second an interval string, used to separate the return string.

Parameters:

  • Value: The javascript object to be converted to a JSON string.
  • Replacer: This parameter can be of any type, changing the behavior of a javascript object during stringification if it is a function, or whitelisting if it is an array of String and Number objects. Only key-value pairs in the whitelist whose keys exist in the field are included in the resulting JSON string. If this parameter is null or omitted, all key-value pairs are included in the resulting JSON string.
  • Space: This argument can be a String or Number object that is used to insert whitespace into the output JSON String to improve readability. If it is a Number object, it indicates how many Spaces are used as whitespace. The maximum value is 10, and values greater than 10 are also 10. The minimum value is 1. Values less than 1 are invalid and no whitespace is displayed. If it is a String, the String itself is used as whitespace and can be up to 10 characters long. The first ten characters will be truncated. If the parameter is omitted (or null), no whitespace is displayed

The substitution function can be used to filter values, because any value that returns undefined will not be in the returned string:

const user = {
  id: 229,
  name: 'John',
  email: '[email protected]'
};
 
function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}
 
const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"John"}"Copy the code

An example of passing an interval argument:

const user = { name: 'John', email: '[email protected]', plan: 'Pro' }; const userStr = JSON.stringify(user, null, '... '); {/ / / / "..." name": "John", // ..." email": "[email protected]", // ..." plan": "Pro" // }"Copy the code

ToJSON method

If a serialized object has a toJSON method, the toJSON method overrides the default serialization behavior of the object: instead of the object being serialized, the return value from the call to the toJSON method is serialized

var obj = { foo: 'foo', toJSON:function(){ return 'bar'; } } JSON.stringify(obj); //'"bar"' JSON.stringify({x:obj}); //'{"x":"bar"}'Copy the code

Using the toJSON method, we can modify the default behavior for converting an object toJSON.

Format the object with json.stringify

In practice, we might format complex objects that have nested objects within them. The replacer and space parameters above allow us to format complex objects as follows:

var censor = function(key,value){ if(typeof(value) == 'function'){ return Function.prototype.toString.call(value) } return value; } var foo = {bar: "1", baz: 3, o: {name: 'xiaoli, age: 21, info: {sex:' male ', getSex: function () {return 'sex'. }}}}; console.log(JSON.stringify(foo,censor,4))Copy the code

The actual returned string, remember it’s a string, looks like this:

{" bar ":" 1 ", "baz" : 3, "o" : {" name ":" xiaoli ", "age" : 21, "info" : {" sex ", "male" and "getSex" : "the function () {return 'sex'. }}}}"Copy the code