首页 前端知识 JSON详解-使用示例

JSON详解-使用示例

2024-06-16 01:06:05 前端知识 前端哥 532 318 我要收藏

文章目录

    • 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>
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12287.html
标签
评论
发布的文章

json文件的格式转换

2024-06-21 09:06:48

JSON 现代数据交换的利器

2024-06-21 09:06:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!