json学习笔记

最新推荐文章于 2025-08-11 23:19:59 发布
原创 最新推荐文章于 2025-08-11 23:19:59 发布 · 267 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

什么是json？
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

{"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]}

JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同
无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

实例

<script>
var JSONObject= {
    "name”:”啊啊啊教程",
    "url":"www.baidu.com", 
    "slogan”:”我思故我在！”
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan 
</script>

与 XML 相同之处
* JSON 是纯文本
* JSON 具有”自我描述性”（人类可读）
* JSON 具有层级结构（值中存在值）
* JSON 可通过 JavaScript 进行解析
* JSON 数据可使用 AJAX 进行传输

与 XML 不同之处
* 没有结束标签
* 更短
* 读写的速度更快
* 能够使用内建的 JavaScript eval() 方法进行解析
* 使用数组
* 不使用保留字

为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
* 读取 XML 文档
* 使用 XML DOM 来循环遍历文档
* 读取值并存储在变量中
使用 JSON
* 读取 JSON 字符串
* 用 eval() 处理 JSON 字符串

JSON 语法
JSON 语法是 JavaScript 语法的子集。

JSON 语法规则
JSON 语法是 JavaScript 对象表示法语法的子集。
* 数据在名称/值对中
* 数据由逗号分隔
* 大括号保存对象
* 中括号保存数组

JSON 名称/值对
JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值

JSON 值
JSON 值可以是：
* 数字（整数或浮点数）
* 字符串（在双引号中）
* 逻辑值（true 或 false）
* 数组（在中括号中）
* 对象（在大括号中）
* null

JSON 数字
JSON 数字可以是整型或者浮点型：

{ "age":30 }

JSON 对象
JSON 对象在大括号（{}）中书写：
对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

JSON 数组
JSON 数组在中括号中书写：
数组可包含多个对象：

{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]
}

JSON 布尔值
JSON 布尔值可以是 true 或者 false：{ "flag":true }

JSON null

{ "runoob":null }

JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

<script>
var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
// 修改网站名称
sites[0].name="菜鸟教程";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

JSON 文件
* JSON 文件的文件类型是 “.json”
* JSON 文本的 MIME 类型是 “application/json”
注：MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

JSON 对象
对象语法

{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

访问对象值
你可以使用点号（.）来访问对象的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

你也可以使用中括号（[]）来访问对象的值：

x = myObj["name"];

循环对象
你可以使用 for-in 来循环对象的属性：

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

嵌套 JSON 对象
JSON 对象中可以包含另外一个 JSON 对象：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。

x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];

修改值

myObj.sites.site1 = "www.google.com";
myObj.sites["site1"] = "www.google.com";

删除对象属性
我们可以使用 delete 关键字来删除 JSON 对象的属性

delete myObj.sites.site1;
delete myObj.sites["site1"]

json 对象和 json 字符串的区别：

//json 对象
var str2 = { "name": "asan", "sex": "man" };
//json字符串
var str1 = '{ "name": "deyuyi", "sex": "man" }';

在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.

for (x in myObj) { 
  document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

JSON 数组
数组作为 JSON 对象
[ “Google”, “Runoob”, “Taobao” ]
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined

JSON 对象中的数组
对象属性的值可以是一个数组：

var myObj, x;
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
}
x = myObj.sites[0];
document.getElementById("demo").innerHTML = x;

循环数组
可以使用 for-in 来访问数组

<script>
var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};

for (i in myObj.sites) {//也可以用一般的for循环
    x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;

</script>

嵌套 JSON 对象中的数组
JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

修改数组值
使用索引值来修改数组值

myObj.sites[1] = "Github";

删除数组元素
使用 delete 关键字来删除数组元素

delete myObj.sites[1];

JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON 解析实例
例如我们从服务器接收了以下数据：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

解析完成后，我们就可以在网页上使用 JSON 数据了：

<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

从服务端接收 JSON 数据
AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

结果：
使用 XMLHttpRequest 来获取文件内容
文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。

从服务端接收数组的 JSON 数据
如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

</script>

<p>查看服务端数据 <a href="/try/ajax/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

结果：
内容是数组
内容是数组会转换为 JavaScript 数组。
Runoob

异常
解析数据
JSON 不能存储 Date 对象。
如果你需要存储 Date 对象，需要将其转换为字符串。
之后再将字符串转换为 Date 对象。

//将字符串转换为 Date 对象。
<script>

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

</script>

我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。

<script>

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

</script>

解析函数
JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

<script>

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa(); 

</script>
eval(string):函数可计算某个字符串，并执行其中的的 JavaScript 代码。
eval("var a=1");     // 声明一个变量a并赋值1。
eval("2+3");         // 执行加运算，并返回运算值。
eval("mytest()");    // 执行mytest()函数。
eval("{b:2}");       // 声明一个对象。

JSON.stringify()
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

  • value:必需， 一个有效的 JSON 字符串。

  • replacer:可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：”“。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

  • space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。
//将 JavaScript 对象转换Wie JSON 字符串
<script>

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

结果：{“name”:”runoob”,”alexa”:10000,”site”:”www.runoob.com”}

JavaScript 数组转换
我们也可以将 JavaScript 数组转换为 JSON 字符串：

<script>

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

</script>

结果：[“Google”,”Runoob”,”Taobao”,”Facebook”]

异常
解析数据
JSON 不能存储 Date 对象。
JSON.stringify() 会将所有日期转换为字符串。

//JSON.stringify 将 Date 对象转换为字符串
<script>

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

结果：
{“name”:”Runoob”,”initDate”:”2017-08-24T07:25:16.445Z”,”site”:”www.runoob.com”}

解析函数
JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

//JSON.stringify 将删除对象中的函数
<script>

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

结果：{“name”:”Runoob”,”site”:”www.runoob.com”}

json相关知识介绍
代码搬运工
01-11 1687
现在越来越流行使用json作为进行数据传输格式，今天我们就总结一下json的相关知识 一、什么是json 1.json 指的是 JavaScript 对象表示法（JavaScript Object Notation） 2.json 是轻量级的文本数据交换格式 3.json 独立于语言* 4.json 具有自我描述性，更易理解 注：json 使用 Javascript语法来描述数据对
JSON 语法
热门推荐
11-01 4万+
JSON教程
王建国的专栏
06-25 8211
JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgramming Language, StandardECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C,C++, ...
JSON 学习
11-01 1万+
SON 实例 { "sites": [ { "name":"hehe" , "url":"www.hehe.com" }, { "name":"haha" , "url":"www.haha.com" }, { "name":"hehe" , "url":&
json 学习笔记
zwhszdx的博客
04-24 1209
这个函数用于将 Python 对象序列化为 JSON 格式，并直接写入到一个文件中。适用于需要将对象转化为字符串以便在网络上传输或其他需要字符串形式的场合。通过这些函数，你可以方便地在 Python 对象和 JSON 格式之间进行转换，无论是处理文件还是处理网络传输的数据。在 json 标准中，对于数组和对象的长度以及它们可以嵌套的深度没有做出具体的限制。需要注意的是在程序中使用json数据，需要特定方法转化为对象变量才能使用。，没有多余的标记，因此在网络中传输时可以减少数据量，提高效率。
JSON 学习笔记
weixin_64612849的博客
05-27 568
JSON 学习笔记
Json学习笔记
yama_sakura的博客
03-15 1903
Json学习笔记 JSON概念 JSON全名称是JavaScript Object Notation，即JavaScript对象表示法。 Java的对象表示： Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); JavaScript的对象表示： var p = {“name”:“张三”,“age”:23,“gender”:“男”}; JSON介绍： json现在多用于存储和交换文本信息的语法 进行数据的传输 J
JSON学习笔记
foreverdelove的博客
05-24 5845
一 json入门 json引入 json注意事项: ​ 1.json不区分整数、小数等类型，都是用Number来存储数字 ​ 2.Array表示数组，用中括号[ ]来括起来,用逗号,分隔,元素可以为任意类型 ​ 3.Object表示对象以花括号{ }括起来,以键值对的方式存储,key必须为string类型,value可以为任意类型,元素之间也可以用逗号,分隔 json依赖注入 在pom.xml中添加依赖 <!-- JSONObject需要6个maven依赖 --> <dep
Json学习笔记(1)
qq_39146285的博客
05-04 440
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、Json是什么？二、Json数据格式1.引入库2.读入数据总结 前言 Json学习笔记 一、Json是什么？ Json（JavaScript Object Notation，Javascript对象标记）的本质是一种轻量级的数据交换格式，与之对比的是XML（万维网退出的数据交换标准，是一种可扩展的标记语言，被设计用来传输和存储数据。XMl在Json之前作为互联网主流的数据交换格式，大部分互联网服务的数据交换都采用XML.
JSON学习笔记第1/2页
10-30
### JSON学习笔记 #### JSON与XML的对比 随着互联网技术的发展，数据交换成为了现代软件开发中的重要环节之一。为了满足不同场景下的需求，多种数据交换格式应运而生，其中最为人熟知的就是XML（可扩展标记语言）...
json学习笔记、jackson的jar包
10-15
在这个“json学习笔记、jackson的jar包”中，我们可以深入探讨JSON和Jackson的相关知识点。 1. JSON基本概念： - JSON是一种文本格式，易于人阅读和编写，同时也易于机器解析和生成。 - JSON数据结构主要由对象...
Vue3学习之创建vue3项目文件
2301_76989410的博客
08-09 225
Vue3是一个更高效、轻量级的渐进式JavaScript框架，专注于构建用户界面。本文介绍了Vue3项目创建流程：首先安装Node.js并验证环境；然后通过PyCharm创建项目文件夹，使用npm命令初始化Vue项目并选择配置（建议选择TypeScript）；最后清理默认文件结构，开始自定义开发。文中还详细说明了如何删除默认组件代码，为个性化开发做好准备。
前端工程化：pinia
西岭千秋雪的博客
08-11 144
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
HENGSHI SENSE 6.0 功能-AI 查数助手
zandy1011的博客
08-11 191
AI查数助手6.0版本实现重大升级，全面优化BI和数据分析能力。新版本显著提升问答效率，通过流程优化使响应速度提升20%-40%，稳定在10秒内完成。新增ReactJSSDK支持，可无缝嵌入企业现有AI应用。同时推出基于钉钉/企微/飞书的Chatbot数据问答机器人，支持PC/移动端跨平台使用，让企业用户能随时随地通过办公软件快速查询数据。这些升级使企业能更高效利用数据资源，提升决策效率。
使用萤石云播放视频及主题模版配置
多看书少吃饭的博客
08-07 674
本文介绍了如何在H5页面中集成萤石云视频播放功能。首先需要安装ezuikit-js依赖，然后通过EZUIKitPlayer组件传入accessToken和视频URL即可实现基础播放功能。文章详细说明了两种版本（UIKIT和UIKITPRO）的区别，并提供了完整的代码示例，包括视频容器设置、自动播放配置和样式调整。此外，还介绍了如何通过template字段自定义视频主题模板，包括官方模板和自定义模板两种方式。最后提及了WEB端和H5端均可进行模板配置，为开发者提供了完整的萤石云视频接入解决方案。
02Vue3
最新发布
xptwop的博客
08-11 420
Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口简单理解：就是对子组件的扩展，通过 插槽向子组件内部指定位置传递内容插槽是组件的一块HTML模板，这块模板显示不显示，怎样显示是由父组件来控制的，而插槽在哪里显 示就由子组件来进行控制。
新手入门的Ajax&Json学习笔记
4. 学习JSON格式的基础知识，包括如何构造JSON数据以及如何在JavaScript中解析JSON。 5. 结合实际案例练习，通过编写示例代码来加深理解。 通过上述知识点的学习，新手可以逐步掌握Ajax&Json技术，并在实际的Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值