菜单 搜索
首页 前端知识 JSON详解-使用示例

JSON详解-使用示例

2024-06-16 01:06:05 前端知识 前端哥 551 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
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！