JSON for JavaScript learning and understanding (summary sharing)

How to quickly get started with VUE3.0: Enter learning

Related recommendations: JavaScript Tutorial

1. JSON Object

Task Description

Task for this level: Practice defining JSON objects in JavaScript.

The specific requirements are as follows:

• define a JSON object JSONObject, which has three attributes: key1, key2 and key3, whose values ​​are parameters a, b and c respectively;

• delete the attribute named key3;

• after the deletion is completed, traverse all the remaining attributes , returns a string formed by concatenating the values ​​of each attribute, separated by , in the middle.

Since JSON is used to transmit data, it must be stored first. Storing data requires a certain data format. Commonly used data formats for JSON include JSON objects, JSON array and JSON string.

What is a JSON object?

A JSON object (commonly called JSON) is a文本数据exchange format used to store and transmit data. An example is as follows:

{"name":"Jerry", "age":15}

This is a simple json object. Its rules are:

• data exists in the form of键/值对;
• data is separated by commas;
• braces Indicates saving the object;
• square brackets indicate saving the array.

The difference between JSON objects and Javascript objects

JSON is based on JavaScript syntax, so there is also the concept of objects in JSON, but there are some small differences from objects in JavaScript.

1. Define a JavaScript object:

var myObject = {
    id:1,
    name:"Peter Bruce",
    "first name":"Bruce",
    display:function() {
                console.log(this.name);
            }}

2. Define a JSON object:

{"id":1,"name":"Peter Bruce","first name":"Bruce"}

3. Three differences:

(1) The attribute name (key) of the JSON object must be enclosed in double quotes , while the JavaScript object is arbitrary except that the attribute name with spaces and the attribute name with a hyphen in the middle must be enclosed in double quotes;
(2) Methods cannot be defined in JSON objects , but they can be defined in JavaScript对象;
(3) JSON objects can be operated by many languages, while JavaScript objects can only be recognized by JS itself .

4. The method of defining a JSON object is as follows,

enclosed by a {} Inside are key-value pairs composed of several attribute names and attribute values. The key-value pairs are separated by,, and the attribute names and attribute values ​​are separated by : attribute. The value can be any of the following data types: number, string, JSON array, JSON object, null. For example:

{"a":1,"b":2.12,"c":true,"d":"string","e":null};

The situation when the attribute value is a JSON array or JSON object is slightly more complicated. The levels will be introduced.

Using JSON objects in JavaScript

Any language that supports JSON can use JSON objects. Here we only introduce how to use JSON objects in JavaScript.

• Define a JSON object in JavaScript:

var jsonObject = {"name":"js","number":2};

• To operate attributes, use . or [] :

console.log(jsonObject.name);
//Read attributes and output jsconsole.log(jsonObject["name"]);
//Read properties and output jsjsonObject.name = "javascript";
//Write attributes, assign a value to the name attribute and use javascript

• to delete the attribute, use delete:

var jsonObject = {"name":"js","number":2};
delete jsonObject.name;
//Delete the name attribute

• and traverse the attributes, using a for-in loop:

var jsonObject = {"name":"js","number":2};for(att in jsonObject) {
  console.log(jsonObject[att]);
  //Output js, 2}

code files

function mainJs(a,b,c) {
	//Please write code here /********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    delete JSONObject.key3;
    return a+","+b;
	/********** End ************/}

2. JSON array

task description

This level task: Define and manipulate the values ​​in JSON key-value pairs.

The specific requirements are as follows:

• It is known that the value of the third attribute of myJson is an array, and the parameter a is a number. It is required to splice the first a elements in the array (these elements are all string types), and separate the elements with, On, return the concatenated string;
• for example, when a is 2, you need to return js, java.

The value (value) corresponding to the JSON attribute is an array.

• The value (value) in the JSON key-value pair can be an array.

For example:

{"country":"China","population":"1.3billion","bigCity":[ "Peking", "Shanghai", "ShenZhen", "HongKong"]}

attribute bigCity has multiple values, which are placed in an array.

In the above example, each element of the array is a string. In fact, each element of the array can also be another json object . For example:

{"class":"Grade 3 Class 1","studentNumber":70,"score":[
    {"name":"LiMing","score":128},
    {"name":"ZhangHua","score":134},
    {"name":"ShenLu","score":112}]}

The value of the score attribute above is an array, and each element of this array is a json object.

Some operations on the array

1. read and write elements:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"] }console.log(myJson.bigCity[1]);
//Print out ShanghaimyJson.bigCity[0] = "GuangZhou";
//The first element is assigned the value GuangZhou

2. traversal:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen", "HongKong"]}for(var i = 0;i < myJson.bigCity.length;i++) {
    console.log(myJson.bigCity[i]);//Output Peking, Shanghai, ShenZhen, HongKong}

code files

[The first method was written later, and the second method below was used at the beginning, because at that time If I can’t do it, I just want to output it directly]

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//Please write code here /********** Begin **********/
    var b = "";
    for(var i=0;i<a;i++){
        b = b+myJson.language[i]+",";
    }
    return b.slice(0,-1);
	/********** End **********/}

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//Please write code here /********** Begin **********/
    if(a==1){
        return myJson.language[0];
    }
    if(a==2){
        return myJson.language[0]+","+myJson.language[1];
    }
    if(a==3){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2];
    }
    if(a==4){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3];
    }
    if(a==5){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3]+","+myJson.language[4 ];
    }
	/********** End ************/}

3. JSON String

Task Description

Task: Practice converting JSON strings and JavaScript objects to each other.

The specific requirements are as follows:

1. first convert the JSON string JSONString into a JavaScript object JSONObject;
2. then set the value of the key1 attribute of the JSONObject to the parameter a of the mainJs() function;
3. finally convert the JSONObject into a JSON string and return the string

to the front end JSON can be used to transfer data to and from the background, but what is actually transferred is a JSON string, and JSON objects cannot be transferred directly.

JSON string

JSON string is a string formed by putting ' on both sides of the JSON object, such as:

var JSONObject = {"k1":"v1","k2":"v2"};
//JSON object var JSONString1 = '{"k1":"v1","k2":"v2"}';
//

JSONSring1 above the JSON string is the JSON string, which can be directly passed from the front end to the backend or the backend to the front end.

When JavaScript receives the JSON string transmitted from the background, how to turn it into a JSON object for easy processing?

JSON string to JavaScript object

JSON.parse(a,b) method converts the JSON string a into a JavaScript object. b is an optional function parameter.

var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//Output Object {k1: "v1", k2: "v2"}

Function parameter b acts on all properties of the object in order从里到外, and the last one acts on the object itself:

//Each property of the object Add 1 to the value var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//When encountering the object itself, return value without adding 1;
    return value+1;//Add 1 to the attribute value});console.log(obj);
    //Output Object {key1: 2, key2: 3, key3: 3.2}

As shown above, the function has two parameters, where key represents the name of the attribute and value represents the value of the attribute. When encountering the object itself, key The value is '' , which is an empty string.

Convert JSON object to JSON string

JSON.stringify(a,b,c) , a is the JSON object to be converted, b and c are optional parameters.

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//Convert JSON object to JSON string

. When parameter b is a function, the function processes each attribute of the JSON object in order from the inside to the outside. The last one processed is the JSON object itself. After processing, it is converted into a JSON string. ：

//Add 1 to all attribute values ​​of the object, and then convert them into strings var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify(JSONObject,function(k,v){
    if(k === '')//The JSON object itself is processed return v;
    return v+1;//Add 1 to the value of all attributes});console.log(JSONString);
    //Output {"k1":2,"k2":3.2}

Parameter b can also be an array. The array stores the name of the attribute and is used to specify which attributes are only converted:

//Convert specific attributes in the object var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1","k2"]);console.log(JSONString);
//Output {"k1":1,"k2":2.2}

Here is a brief introduction to c:

var str = ["name":"Tom","age":16];var obj1 = JSON.stringify(str) ;
var obj2 = JSON.stringify(str,null,4);console.log(obj1);  
//Output {"name":"Tom","age":16}console.log(obj2); 
//output//{
// "name": "Tom",
// "age": 16
//}

Parameter c: Add indentation, spaces and newlines to the text . If c is a number, the return value text is indented by the specified number of spaces at each level. If c is greater than 10, the text is indented by 10 spaces.

Code file

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	//Please write code here /********** Begin **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    return JSON.stringify(JSONObject);
	/********** End ************/}

Related recommendations: JavaScript learning tutorial

The above is the detailed content of JSON (summary sharing) for JavaScript learning and understanding. For more, please pay attention to php Other related articles on the Chinese website!