JavaScript学习手册十一：JSON

短命女 2023-01-15 03:57 201阅读 0赞

### JSON ###

*  1、JSON对象
 *  任务描述
 *  相关知识
 *   *  什么是JSON对象
     *  JSON对象与Javascript对象的区别
     *  在JavaScript中使用JSON对象
     *   *  代码文件
 *  2、JSON数组
 *  任务描述
 *  相关知识
 *   *  JSON属性对应的值(value)是一个数组
     *  数组的一些操作
     *   *  代码文件
 *  3、JSON字符串
 *  任务描述
 *  相关知识
 *   *  JSON字符串
     *  JSON字符串到JavaScript对象
     *  JSON对象转换为JSON字符串
     *   *  代码文件

# 1、JSON对象 #

# 任务描述 #

**本关任务：练习在JavaScript中定义JSON对象。**

具体要求如下：

1.  定义一个JSON对象JSONObject，它有三个属性：key1、key2和key3，它们的值分别是参数a、b和c；
2.  删除其中名字为key3的属性；
3.  删除完成后，遍历其余的所有属性，返回各属性的值连接成的字符串，中间用,隔开；

# 相关知识 #

JSON既然是用来传递数据的，必然要先存储数据，存储数据需要采用一定的数据格式，**JSON常用的数据格式有JSON对象、JSON数组和JSON字符串。**

## 什么是JSON对象 ##

JSON对象（通常叫JSON）是一种`文本数据`的交换格式，用于存储和传输数据。示例如下：

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

这就是一个简单的json对象，它的规则是：

*  数据以`键/值对`的形式存在；
 *  数据之间用逗号间隔；
 *  大括号表示保存对象；
 *  方括号表示保存数组。

## JSON对象与Javascript对象的区别 ##

JSON是基于JavaScript语法的，所以JSON中也有对象的概念，但是和JavaScript中的对象有一些小的区别。

1.  **定义一个JavaScript对象：**

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

1.  **定义一个JSON对象：**

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

1.  **三点区别：**

--------------------

（1）`JSON`对象的**属性名（key）必须被包含在双引号之中**，而JavaScript对象除了有空格的属性名、中间有连字符-的属性名必须在双引号之中外，其它随意；  
（2）**不能在JSON对象中定义方法**，而在`JavaScript对象`中可以；  
（3）**JSON对象可以被很多语言操作，而JavaScript对象只有JS自己可以识别**。

--------------------

1.  **定义JSON对象的方法如下**

用一个`{}`包含在内，内部是若干个属性名和属性值构成的键值对，键值对之间用,隔开，属性名和属性值之间用`:`隔开，属性值可以是以下任意一种数据类型的数据：数字、字符串、JSON数组、JSON对象、null。如：

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

属性值是JSON数组或者JSON对象的情况稍复杂，后面的关卡将介绍。

## 在JavaScript中使用JSON对象 ##

支持JSON的语言都能够使用JSON对象，这里仅介绍在JavaScript中如何使用JSON对象。

*  **在JavaScript中定义一个JSON对象：**

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

*  操作属性，使用`.`或者`[]`：

console.log(jsonObject.name);//读属性，输出js
    console.log(jsonObject["name"]);//读属性，输出js
    jsonObject.name = "javascript";//写属性，给name属性赋值javascript

*  **删除属性，使用delete：**

var jsonObject = { "name":"js","number":2};
    delete jsonObject.name;//删除name属性

*  **遍历属性，使用for-in循环：**

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

### 代码文件 ###

function mainJs(a,b,c) { 
    	//请在此处编写代码
    	/********** Begin **********/
        var JSONObject = { "key1":a,"key2":b,"key3":c};
        delete JSONObject.key3;
        return a+","+b;
    	/********** End **********/
    }

# 2、JSON数组 #

# 任务描述 #

**本关任务：定义并操作JSON键值对中的值。**

具体要求如下：

*  已知myJson的第三个属性的值是一个数组，参数a是一个数字，要求将数组中前a个元素（这些元素都是字符串类型）拼接起来，元素之间用,隔开，返回拼接后的字符串；
 *  比如a为2的时候，你需要返回js,java。

# 相关知识 #

## JSON属性对应的值(value)是一个数组 ##

*  JSON键值对中的值(value)可以是一个数组

比如：

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

属性bigCity的值有多个，放在一个数组里面。

上面例子里面，数组的每一个元素都是字符串。其实，**数组的每一个元素还可以是另外一个json对象**。比如：

{ 
    "class":"高三一班",
    "studentNumber":70,
    "score":[
        { "name":"LiMing","score":128},
        { "name":"ZhangHua","score":134},
        { "name":"ShenLu","score":112}
    ]
    }

上面的score属性的值是一个数组，这个数组的每一个元素是一个json对象。

## 数组的一些操作 ##

1.  **读写元素：**

var myJson = { 
    "country":"China",
    "population":"1.3billion",
    "bigCity":["Peking","Shanghai","ShenZhen","HongKong"]
    }
    console.log(myJson.bigCity[1]);//打印出Shanghai
    myJson.bigCity[0] = "GuangZhou";//第一个元素被赋值为GuangZhou

1.  **遍历：**

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]);//依次输出Peking,Shanghai,ShenZhen,HongKong
    }

### 代码文件 ###

【第一种方法是后来写的，刚开始用的是下面的第二种办法，因为当时做不出来，就想着直接输出】

# 3、JSON字符串 #

# 任务描述 #

**本关任务：练习JSON字符串和JavaScript对象的相互转换。**

具体要求如下：

1.  先将JSON字符串JSONString转换为JavaScript对象JSONObject；
2.  然后将JSONObject的key1属性的值设置为mainJs()函数的参数a；
3.  最后将JSONObject转换为JSON字符串，并返回该字符串；

# 相关知识 #

在前端和后台之间传递数据可以使用JSON，但是实际上传递的是JSON字符串，而JSON对象是不可以直接进行传递的。

## JSON字符串 ##

JSON字符串就是在JSON对象两边套上`'`形成的字符串，如：

var JSONObject  = { "k1":"v1","k2":"v2"};//JSON对象
    var JSONString1 = '{"k1":"v1","k2":"v2"}';//JSON字符串

上面的JSONSring1就是JSON字符串，可以直接从前端传到后台或者后台传到前端。

当JavaScript收到从后台传来的JSON字符串后，怎么把它变成JSON对象方便处理呢？

## JSON字符串到JavaScript对象 ##

`JSON.parse(a,b)`方法将JSON字符串a转换为JavaScript对象。b是一个可选的函数参数。

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

函数参数b按`从里到外`的顺序作用在对象的所有属性上，最后一个作用的是对象本身：

//对象的每一个属性的值加1
    var text = '{ "key1":1, "key2":2, "key3":2.2}';
    var obj = JSON.parse(text, function (key, value) { 
        if(key === '')//当遇到对象本身时，不进行加1操作
            return value;
        return value+1;//对属性值加1
    });
    console.log(obj);//输出Object {key1: 2, key2: 3, key3: 3.2}

如上面所示，函数的参数有两个，其中key表示属性的名字，value表示属性的值，当遇到对象本身时，key的值为`''`，即空字符串。

## JSON对象转换为JSON字符串 ##

`JSON.stringify(a,b,c)`，**a是待转换的JSON对象，b和c为可选参数。**

var JSONObject = { "k1":"v1","k2":"v2"};
    JSON.stringify(JSONObject);//JSON对象转换为JSON字符串

参数b为函数时，该函数按照从里到外的顺序处理JSON对象的每一个属性，最后一个处理的是JSON对象本身，处理完后再转为JSON字符串：

//对象的所有属性值加1，再转为字符串
    var JSONObject = { "k1":1,"k2":2.2};
    var JSONString = JSON.stringify(JSONObject,function(k,v){ 
        if(k === '')//处理到了JSON对象本身
            return v;
        return v+1;//所有的属性的值加1
    });
    console.log(JSONString);//输出{"k1":2,"k2":3.2}

参数b还可以是数组，数组存储的是属性的名字，用来指定只转换哪些属性：

//转换对象中特定的属性
    var JSONObject = { "k1":1,"k2":2.2,"k3":3};
    var JSONString = JSON.stringify(JSONObject,["k1","k2"]);
    console.log(JSONString);//输出{"k1":1,"k2":2.2}

这里简单介绍一下c：

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

--------------------

参数c：**文本添加缩进、空格和换行符**，如果 c 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 c 大于 10，则文本缩进 10 个空格。

### 代码文件 ###

var JSONString = '{"key1":"value1","key2":"value2"}';
    function mainJs(a) { 
    	//请在此处编写代码
    	/********** Begin **********/
        var JSONObject = JSON.parse(JSONString);
        JSONObject["key1"] = a;
        JSONObject.key1 = a;
        return JSON.stringify(JSONObject);
    	/********** End **********/
    }