JSON详解-使用示例

文章目录

- JSON
- - JSON 举例
  - JSON 和 XML 对比
  - JSON 对象
  - - 访问对象
    - 循环对象
    - 嵌套 JSON 对象
    - 删除对象属性
  - JSON 和 JavaScript 互相转换
  - - JSON.parse()
    - - 日期异常
      - 解析函数
    - JSON.stringify()
    - - 日期异常
      - 解析函数
  - JSON解析器

JSON

概述：JSON全称 JavaScript Object Notation，是一种轻量级的数据交换格式、是一种纯文本。JSON相对于XML来说读写的速度更快。
作用：
- JSON 是用于存储和传输数据的格式
- JSON 通常用于服务端向网页传递数据
语法规则
- 数据为键/值对，一个名称对应一个值，中间用 “:”
- 数据由逗号分隔
- 大括号保存对象，对象可以保存多个键/值对
- 方括号保存数组
JSON值
- 数字（整数或浮点数）
- 字符串（双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）,数组中可包含多个对象
- 对象（在大括号中）
- null
JSON 文件
- JSON 文件的文件类型是 .json
- JSON 文本的 MIME 类型是 application/json

JSON 举例

{"student":[
    {"name":"张三","address":"河南","age":20},
    {"name":"李四","address":"北京","age":25},
    {"name":"王五","address":"上海","age":30}
]}

student 是一个对象，里边有三条对象的信息

“name”:“张三” 等同于 JavaScript的 name=“张三”

// javascript 语法，等同于上述 json 案例
var student = [
    {"name":"张三","address":"河南","age":20},
    {"name":"李四","address":"北京","age":25},
    {"name":"王五","address":"上海","age":30}
];
// 找到张三
student[0].name;

JSON 和 XML 对比

概述：JSON 和 XML 都用于接收 web 服务端的数据
XML 实例，和上述 JSON 实例等同

<student>
	<s>
    	<name>张三</name> <address>河南</address> <age>20</age>
    </s>
	<s>
    	<name>李四</name> <address>北京</address> <age>25</age>
    </s>
	<s>
    	<name>王五</name> <address>上海</address> <age>30</age>
    </s>
</student>

不同之处
- JSON 不需要结束标签
- JSON 更加简短
- JSON 读写速度更快
- JSON 可以使用数组
- XML 需要使用 XML 解析器来解析，JSON 使用标准的 JavaScript 函数来解析。

JSON 对象

访问对象

方式一：使用 “.”

var student,username;
student = {"name":"张三","address":"河南","age":30};
username = student.name;

方式二：使用 “[]”

var student,username;
student = {"name":"张三","address":"河南","age":30};
username = student["name"];

循环对象

“for-in”来循环对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
    	// student 是一个对象
        var student = {"name":"张三","address":"河南","age":30};
        // 此时的 x 是代表的 键值
        for(x in student){
            document.getElementById("demo").innerHTML += x + "--" + student[x] + "<br>";
        }
    </script>
</body>
</html>

嵌套 JSON 对象

实例

student{
    "name":"张三",
    "address":"河南",
    "technologys":{
        "t1":"Java",
        "t2":"Python",
        "t3":"Go"
    }
}

访问

x = student.technologys.t1;
// 或
x = student.technologys["t1"];

删除对象属性

使用 delete 关键字来删除 JSON 对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var student = {
            "name":"张三",
            "address":"河南",
            "technologys":{
                "t1":"Java",
                "t2":"Python",
                "t3":"Go"
            }
        }
        // 删除 t3 这条数据
        delete student.technologys.t3;
        // 此时 x 就是 代表 t1、t2，因为 t3 被删除了
        for(x in student.technologys){
            document.getElementById("demo").innerHTML += x + "--" + student.technologys[x] + "<br>";
        }
    </script>
</body>
</html>

JSON 和 JavaScript 互相转换

JSON.parse()：将一个 JSON 字符串转换为 JavaScript 对象
JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串

JSON.parse()

JSON 通常用于与服务端交换数据，在接收服务器数据时一般是字符串
语法
```
JSON.parse(text[,reviver])
```
text：必需，一个有效的 JSON 字符串

reviver：可选，一个转换结果的函数，将为对象的每个成员调用此函数

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var obj = JSON.parse('{"student":[\n' +
            '    {"name":"张三","address":"河南","age":20},\n' +
            '    {"name":"李四","address":"北京","age":25},\n' +
            '    {"name":"王五","address":"上海","age":30}\n' +
            ']}');
        document.getElementById("demo").innerHTML = obj.student[0].name + ":" + obj.student[0].address;
    </script>
</body>
</html>

日期异常

概述：JSON 不能存储 Date 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var text = '{"name":"张三","age":30,"address":"北京","createDate":"2024-01-01"}';
        var obj = JSON.parse(text,function (key, value){
        	// 如果 key 等于 createDate 这个字符串，则返回日期对象
           if(key == "createDate"){
               return new Date(value);
           } else{					// 否则返回 字符串值
               return value;
           }
        });
        document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.createDate;
    </script>
</body>
</html>

解析函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var text = '{"name":"清华大学","rank":"function(){return 1}","address":"北京"}';
        var obj = JSON.parse(text);
        // 字符串转函数
        obj.rank = eval("("+ obj.rank +")");
        document.getElementById("demo").innerHTML = obj.name + "学校排名：" + obj.rank();
    </script>
</body>
</html>

注意：将函数作为字符串存储，然后再将字符串转换为函数，eval 方法的使用可以往下看，下边有解释

JSON.stringify()

JSON 通常用于与服务端交换数据，在发送服务器数据时一般是字符串
语法
```
JSON.stringifg(value[,replacer[,space]]);
```
value：必需，要转换的 JavaScript 值（通常为对象或数组）

replacer：可选，用于转换结果的函数或数组

space：可选，文本添加缩进、空格和换行符，space是数字，指定数目的空格

示例代码，对象转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
    	// 这是一个 JavaScript 对象
        var obj = {"name":"张三","address":"河南","age":30};
        // 转换成一个 JSON字符串
        var s = JSON.stringify(obj);
        document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

示例代码，数组转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var arr = [
            {"name":"张三","address":"河南","age":30},
            {"name":"李四","address":"湖北","age":35}
        ];
        var s = JSON.stringify(arr);
        document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

日期异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        // 创建一个对象
        var obj = {"name":"小哼","createDate":new Date(),"age":25};
        // 对象转字符串
        var s = JSON.stringify(obj);
        document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

注意：将对象转换成了字符串，可以利用parse再转成对象

解析函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
      var obj = {"name":"小哼","age":function (){return 25}};
      // 函数转换字符串
      obj.age = obj.age.toString();
      var s = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = s;
    </script>
</body>
</html>

注意：函数转换字符串-使用 toString() 方法

JSON解析器

概述：eval() 函数可将 JSON 文本转换成 JavaScript 对象
语法
```
var obj = eval("(" + text + ")");
```

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        // JSON 文本
        var text = '{"student":[\n' +
            '    {"name":"张三","address":"河南","age":20},\n' +
            '    {"name":"李四","address":"北京","age":25},\n' +
            '    {"name":"王五","address":"上海","age":30}\n' +
            ']}';
        // 调用 eval 函数，将 JSON 字符串转换成 JavaScript 对象
        var obj = eval("("+ text +")");
        document.getElementById("demo").innerHTML += obj.student[0].name;
        document.getElementById("demo").innerHTML += obj.student[1].address;
    </script>
</body>
</html>