Introduction to JSON and summary of usage_javascript skills

JSON (JavaScript Object Notation), JavaScript Object Notation, is a lightweight data exchange format. It is very convenient for programmers to process data, and it is also convenient for machines to parse and generate data. It is widely used.

JSON is a lightweight data exchange format. The inside of a JSON format file can look like this:

{
"name": "hanzichi",
"sex": "male"
}

It looks like they are all key-value pairs, very similar to js objects, right? That's right, but at the same time JSON expressed dissatisfaction. I can't look the same as the js object. I have to have my own personality, so it is stipulated that the keys in the key-value pair must use double quotes! At the same time, it is stipulated that there are certain requirements for the value of the key-value pair:

JSON value can be:

Number (integer or floating point)
String (in double quotes)
Logical value (true or false)
Array (in square brackets)
Object (in curly braces)

null

Except for the above 6 types, there are no others. There is no undefined or NAN like js, and JSON refuses to be used.

How to use JSON?

JSON generally travels in the form of strings during the data interaction process, so for js, how to convert json strings and js objects to and from each other is particularly important.

eval method (json string -> js object)

var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var ans = eval('(' + jsonStr + ')');
console.log(ans.name, ans.sex); // hanzichi male

The eval function is very fast, but it can compile any javascirpt code, which may cause security issues. The use of eval is based on the assumption that the incoming code parameters are reliable. There are some cases where the client may not be trusted. If it is based on security considerations, it is best to use a JSON parser. A JSON parser will only accept JSON text, so it is safer, as follows.

JSON.parse（json字符串 -> js对象）
var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var obj = JSON.parse(jsonStr);
console.log(typeof obj, obj); // object Object {name: "hanzichi", sex: "male"}

The second parameter can be a function, and the value can be deleted:

var jsonStr = '{"name": "hanzichi", "sex": "male", "age": 10}';
var obj = JSON.parse(jsonStr, function(key, value) {
if(key === 'name') {
return 'my name is ' + value;
}
return value;
});
console.log(typeof obj, obj); // object Object {name: "my name is hanzichi", sex: "male", age: 10}
JSON.stringify（js对象 -> json字符串）
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"hanzichi","sex":"male","age":"10"}

You can also add a parameter to specify the attributes that need to be converted into json strings (in array form, only js object attributes with the same name as the array will be converted):

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, ['name']);
console.log(jsonStr); // {"name":"hanzichi"}

The second parameter can also be a function, which can delete the attribute that meets the conditions (or change the attribute value. No return means abandoning the attribute, and the value of return indicates the value of the key in the json string)

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, function(key, value) {
if(key === 'name') {
return 'my name is ' + value;
}
return value;
});
console.log(jsonStr); // {"name":"my name is hanzichi","sex":"male","age":"10"}

There can also be a third parameter, which can be a number or a string.

If it is a number, it means indentation. If the number exceeds 10, it will be processed as 10.

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 4);
console.log(jsonStr); 
// {
// "name": "hanzichi",
// "sex": "male",
// "age": "10"
// }

can also be a string. These strings will be added in front of the attributes as prefixes. Similarly, if the string length exceeds 10, only 10 will be intercepted:

var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 'pre');
console.log(jsonStr); 
// {
// pre"name": "hanzichi",
// pre"sex": "male",
// pre"age": "10"
// }

I have a question here. I think the output should be in the following form...

{
"prename": "hanzichi",
"presex": "male",
"preage": "10"
}

If anyone knows, please tell me...

Summary

Of course, the legendary ie8 (and below) cannot use the JSON.parse() and JSON.stringify() methods due to some defects, and eval() seems unsafe. If you want to be compatible with them, you can refer to json2.js .

The above content gives you an introduction to JSON and a summary of its usage. I hope it will be helpful to you!