Relearning JSON

JSON is a lightweight data format that is widely used for data exchange. (1) Data format To put it simply, data format is a specification that we use to describe data, a method. Price =”$65″&color=”red”&size=”s”; price=”$65″&color=”red”&size=”s”; ===urlencoded {price:”$65″,color:”red”,size:”s”}; ====JSON $65 red

s
; ====XML (2) Lightweight JSON is called lightweight because it uses key-value pairs for transmission. Compared with XML format, it is free from the burden of using tags. Therefore, when transmitting the same data of the same size,JSON requires less bandwidth. In addition to its lightness,JSON is easy for humans and machines to understand (text-based), which means it is easy for machines to read, parse, and write, so JSON will be widely used for data exchange.

Many people think that JSON is just a subset of JS objects, because JS objects don’t enforce double quotes on their attributes, whereas JSON does. But that’s not the case. JSON stands for JavaScript Object notation, so I think JSON is a data format based on the representation of JS objects, meaning that the format is similar to that of JS objects.

3. JSON related functions

JSON.parse()

The parse function is used to parse JSON data, converting JSON strings into JavaScript values or objects.

Parse (jsonStr) // String "json" json.parse (jsonObj) // Object {a: 1} ` ` `Copy the code

Alternatively, an optional function (Reviver) can be passed to operate on the converted object, meaning that the actual return value will be called after being parsed and then returned.

const jsonObj = '{"a":1}'
JSON.parse(jsonObj,function(k,v){
console.log(k,v); // a 1 
                  // '' {"a":1}
return v
})
Copy the code

Reviver processes the attributes of the object and the attributes contained in the attributes in sequence, which means that the reviver process is deep and iterates through all attributes in the object, including the attributes if they are objects (the innermost attributes take precedence).

const jsonObj = '{"a":{"b":1}}'; JSON.parse(jsonObj, function(k, v) { console.log(k, v); //a {b: 1} // "{a: {b: 1}} // return v; });Copy the code

Reviver will pass in the attribute and attribute value as arguments. If the Reviver does not return a value (or if the value is undefined), the object will be removed from the owning object, and the original attribute value will be replaced if the reviver returns another value.

const jsonObj = '{"a":{"b":1}}'; JSON.parse(jsonObj, function(k, v) { console.log(k, v); //a {b: 1} // "{} //a {b: 1} //a {b: 1} //a {b: 1} //" {} //a null array because reviver does not return a value});Copy the code

When the object has traversed all properties, parse’s parsed object is traversed one last time, passing k(property) as “” and v(property value) as the modified parsed value.

const jsonObj = '{"a":{"b":1}}'; JSON.parse(jsonObj, function(k, v) { console.log(k, v); //a {b: 1} // "{a: {b: 1}} // return v; });Copy the code

If parse is parsed to a primitive type value (string, number, Boolean), the Reviver will not process it.

JSON.stringify()

To convert JavaScript values to JSON strings, you can pass in replacer functions and Spaces.

const obj  = {a:1,b:2}
const jsonobj = JSON.stringify(obj)
console.log(jsonobj);  // '{"a":1,"b":2}'
Copy the code

Replacer is a function that transforms and processes each attribute after serialization (similar to reviver for the parse method). If replacer is an array, only properties contained in that array will be retained. If not passed or null, no action will be taken

const obj  = {a:1,b:2}
const jsonobj = JSON.stringify(obj,['a'])
const jsonobj1 = JSON.stringify(obj,function(k,v){
console.log(k); // a,b
return v
})

console.log(jsonobj); // '{"a":1}'
console.log(jsonobj1); //'{"a":1,"b":2}'
Copy the code

Note: The number of Spaces must be at most 10 and not less than 1. Otherwise, it will be treated as no Spaces. If passed as a string, the first 10 strings will be intercepted and treated as Spaces

const obj  = {a:1,b:2}
const jsonobj = JSON.stringify(obj,function(k,v){
return v
},5)

console.log(jsonobj);  // '{
                                "a": 1,
                                "b": 2
                           }'
Copy the code