![cover](https://img-blog.csdnimg.cn/direct/c8a4c7052ad642aea7ed759949f26528.png)
JSON详细教程
JSON是一种轻量级的数据交换格式,全称为JavaScript Object Notation(JavaScript对象表示法)。它以易于阅读和编写的文本格式来表示结构化数据,常用于在客户端和服务器之间传递数据。JSON的格式简单、灵活,易于理解和使用。与XML相比,JSON更加轻量级,占用更少的数据空间,并且解析速度更快。因此,它在Web开发中广泛应用于数据传输、配置文件和API交互等方面。
😊JSON详细教程
😊各位小伙伴们,新文章出炉了!!!
🚩JSON简介
JSON 是 JavaScript 对象表示法(JavaScript Object Notation)的缩写,它是一种轻量级的数据交换格式(数据交换是指,两设备之间建立连接并互相传递数据的过程)。类似XML,但比XML更流行,它易于阅读和编写,并且易于解析和生成。JSON在Web开发领域有着举足轻重的地位。并且大多数编程语言都支持JSON,一些本身不支持的语言也可以通过集成第三方库使用JSON。
JSON是基于ECMAScript(European Computer Manufactures Association,欧洲计算机协会制定的JS规范)的一个子集,完全采用独立于编程语言
的文本格式来存储和表示数据。JSON易于计算机解析和生成,通常用于Web客户端(浏览器)与Web服务器之间传递数据。
JSON与XML相对比,既有优点,也有不足。与XML相同的是:JSON是纯文本,其本身具有“自我描述性(人类可读)”,和XML一样都具有层级结构(值中存在值),都可以被JavaScript进行解析,同时也可以使用AJAX进行传输。与XML不同的是:JSON没有结束标签,语法格式上相对于XML更简洁,且读写速度更快,能够使用内建的JavaScript eval()
方法进行解析,省略了保留字。
之所以使用JSON,最主要的原因是JavaScript,JavaScript是Web开发中不可或缺的技术之一,而JSON是基于JavaScript的一个子集,JavaScript默认就支持JSON,JSON被广泛应用于Web开发、移动应用、API接口设计等领域。例如,在前后端交互中,使用JSON作为数据传输格式可以方便地实现数据的序列化和反序列化。
☃️JSON语法规则
JSON中的键值对是由一个键和一个值组成,它们之间用冒号:
分割,多个键值对之间用逗号,
分割。键必须为字符串类型,值可以是字符串、数字、布尔值、对象、数组或null。键和字符串都必须使用双引号括起来。
语法格式:
key:value
名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:
"name":"学习JSON"
需要注意的是,JSON语法中不能出现单引号和结束分号;
,因为它是一种纯数据格式,不是语句。另外,JSON语法还可以使用反斜线\
进行转义,用于表示一些特殊字符和字符集。
🔊JSON和JavaScript对象的区别
JSON和JavaScript对象有很多相似之处,比如它们都可以表示键值对形式的数据,都可以通过点运算符访问成员等,但在很多方面也有重要的区别:
-
JSON是一种数据格式,主要用于在不同编程语言之间传输和共享数据;而JavaScript对象则是JavaScript程序中的一个基本概念,用于封装数据和行为。
-
JSON只能包含六种数据类型:字符串、数字、布尔值、数组、对象和null;而JavaScript对象除了这些之外,还可以包含函数和其他类型的值。
-
JSON中的键必须用双引号包裹;而JavaScript对象的键既可以使用单引号,也可以使用双引号或不使用引号。
-
JSON不能包含注释;而JavaScript对象则可以包含注释。
-
JSON是一种纯文本格式,可以直接在网络上传输和存储;而JavaScript对象则需要被序列化成JSON格式才能在网络上传输和存储。
☃️JSON数据类型
字符串
JSON中的字符串需要使用双引号定义(字符串必须使用双引号,不能使用单引号),例如"hello word"
字符串中可以包含零个或多个Unicode字符。另外,JSON的字符串中也可以包含一些转义字符。
{
"name":"John",
"sex":"男",
"address":"中国"
}
🔊数字
JSON中的数字既可以是整数,也可以是浮点数。但是,JSON中不能使用八进制和十六进制表示数字,但可以使用e
或E
来表示10的指数。
{
"number1":1,
"number2":2,
"number3":3
}
🔊布尔值
JSON中的布尔值只有两个,即true
和false
。
{
"value1":true,
"value2":false
}
🔊数组
JSON中的数组是一组有序的值的集合,每个值都用逗号分隔,例如:[1, 2, 3]。
{
"array":[
{"name":"张三","age":18},
{"name":"李四","age":19},
{"name":"王五","age":20}
]
}
🔊对象
JSON中的对象是一组键值对的集合,每个键值对都用逗号分隔,值书写在{}
中。JSON对象可以包含多个名称/值对。例如:{“name”: “John”, “age”: 30}。
{
"name":"John",
"age":18,
"city":"New York"
}
🔊Null
JSON中的null表示没有任何值。
☃️JSON对象
JSON 对象是由键值对组成的无序集合,键和值使用冒号:
分隔,每个键值对之间使用逗号 ,
分隔。键必须是字符串类型,值可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null),JSON对象使用在大括号{...}
中书写。例如:{"name": "Alice", "age": 25}
。
实例:
{
"name":"张三",
"age":18,
"sex":"男"
...
}
🔊访问JSON对象的值
点运算符(.):如果知道键的名称,可以使用点运算符直接访问对象中的值。语法格式为 对象.键
。例如,假设有一个 JSON 对象 person
,包含键值对 { "name": "Alice", "age": 25 }
,可以通过 person.name
来访问 name 的值,通过 person.age
来访问 age 的值。
运行结果如下
方括号运算符([ ]):如果不知道键的名称,或者键的名称包含特殊字符,可以使用方括号运算符来访问 JSON 对象中的值。语法格式为 对象[键]
。例如,假设有一个 JSON 对象 person
,包含键值对 { "name": "Alice", "age": 25 }
,可以通过 person["name"]
来访问 name 的值,通过 person["age"]
来访问 age 的值。
运行结果如下
假设有一个 JSON 对象 person
,包含嵌套的键值对:
var person = {
"name": "Alice",
"age": 25,
"address": {
"street": "123 Main St",
"city": "New York",
"country": "USA"
}
};
要访问嵌套对象中的值,可以使用连续的点运算或方括号运算符。例如,要访问地址的城市,可以使用 person.address.city
或 person["address"]["city"]
:
var city = person.address.city; // "New York"
var city = person["address"]["city"]; // "New York"
运行结果如下
总之,使用点运算符或方括号运算符,可以根据键的名称或索引值来访问 JSON 对象中的值,无论是在一级还是多级嵌套的情况下。
🔊循环对象
在JavaScript中,有两种主要的方法可以用来循环JSON对象的属性。
可以使用for-in
来循环对象的属性
var jsonObject = { "name": "John", "age": 30, "city": "New York" };
for (var key in jsonObject) {
if (jsonObject.hasOwnProperty(key)) {
console.log("Key: " + key);
console.log("Value: " + jsonObject[key]);
}
}
运行结果如下
在使用for...in
语句时,需要检查对象是否拥有该属性,因为某些内置属性也可能被包含在for…in循环中。如果你只想遍历自己的自定义属性,可以使用hasOwnProperty()
方法。
🔊修改JSON对象的值的方法
要修改JSON对象的值,首先需要将JSON字符串转换为JavaScript对象,然后再对其中的属性进行修改。以下是具体的步骤:
1.将JSON字符串转换为JavaScript对象:可以使用JSON.parse()
函数将JSON字符串转换为JavaScript对象。
let jsonStr = '{"name":"John", "age":30, "city":"New York"}';
let jsonObj = JSON.parse(jsonStr);
2.修改JavaScript对象的值:可以使用点运算符或方括号运算符来修改JavaScript对象的属性值。
// 使用点运算符
jsonObj.name = 'Mike';
// 使用方括号运算符
jsonObj['age'] = 45;
3.将JavaScript对象转换回JSON字符串:可以使用JSON.stringify()函数将JavaScript对象转换回JSON字符串。
let updatedJsonStr = JSON.stringify(jsonObj);
console.log(updatedJsonStr); // 输出 {"name":"Mike","age":45,"city":"New York"}
运行结果如下
注意,在使用JSON.parse()
和JSON.stringify()
函数时,需要确保字符串的内容符合JSON规范,否则可能会抛出错误。另外,使用方括号运算符可以更灵活地操作属性,特别是当不确定属性名称或者属性名称来自变量时。
🔊删除JSON对象属性
要删除JSON对象中的某个属性,可以使用JavaScript的delete运算符。
delete jsonObj.age;
//或者使用中括号([])来删除 JSON 对象的属性
delete myObj.sites["age"]
检查该属性是否已被成功删除
console.log(jsonObj.age); // 输出 undefined
运行结果如下
注意,在使用delete运算符时,如果该属性存在,则会被成功删除并且返回true
;如果该属性不存在,则不会报错并且返回false。此外,删除了某属性后,该属性的值变为undefined
,但其键仍存在于对象中,只是值为空。因此,如果想彻底删除某个属性,还需要将其从对象中移除。
☃️JSON数组
JSON 数组是有序的值的集合,用方括号 []
表示,每个值之间使用逗号 ,
分隔。值可以是任意类型,包括字符串、数值、布尔值、对象或其他数组。例如:["apple", "banana", "orange"]
。
实例
{
"name":"网站",
"num":3,
"sites":["google","taobao","baidu"]
}
🔊访问JSON数组里的值
1.索引访问:JSON 数组中的值按照索引顺序排列,索引从 0 开始。你可以使用方括号运算符 []
结合索引来访问数组中的值。语法格式为 数组[索引]
。例如,假设有一个 JSON 数组 fruits
,包含多个水果:
var fruits = ["apple", "banana", "orange"];
可以通过索引访问数组中的值。例如,使用 fruits[0]
可以访问数组中的第一个元素,使用 fruits[1]
可以访问数组中的第二个元素,以此类推。
var firstFruit = fruits[0]; // "apple"
var secondFruit = fruits[1]; // "banana"
运行结果如下
2.循环遍历:如果想遍历整个 JSON 数组并访问其中的每个值,可以使用循环(如 for 循环或 forEach 循环)来实现。例如,使用 for 循环来遍历 fruits
数组:
var fruits = ["apple", "banana", "orange"];
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
运行结果如下
要访问嵌套 JSON 数组中的值,可以结合点运算符和方括号运算符。使用点运算符可以直接访问到数组对象,在这之上再使用索引或键来访问特定的属性。同时,可以使用循环来遍历整个 JSON 数组。
假设有一个 JSON 对象 data
,包含嵌套的数组:
var data = {
"students": [
{ "name": "Alice", "age": 20 },
{ "name": "Bob", "age": 25 },
{ "name": "Charlie", "age": 22 }
]
};
要访问学生数组中的第一个学生的姓名,可以使用 data.students[0].name
或 data["students"][0]["name"]
:
var name = data.students[0].name; // "Alice"
var name = data["students"][0]["name"]; // "Alice"
运行结果如下
🔊修改JSON数组里的值
要修改JSON数组中的值,可以先使用JSON.parse()函数将JSON字符串转换为JavaScript数组,然后按照以下步骤进行修改:
1.通过索引访问数组元素
let jsonArray = JSON.parse('[{"name":"John", "age":30}, {"name":"Jane", "age":20}]');
let obj = jsonArray[0];
2.要修改数组元素中的属性,可以直接使用点运算符或方括号运算符
obj.name = 'Mike'; // 直接使用点运算符
obj['age'] = 45; // 使用方括号运算符
3.修改完对象属性后,需要再次将整个数组转换回JSON格式
jsonArray = JSON.stringify(jsonArray);
console.log(jsonArray); // 输出 '[{"name":"Mike","age":45},{"name":"Jane","age":20}]'
代码运行如下
需要注意的是,如果JSON数组中的元素本身也是一个对象,那么还需要先将其转换为JavaScript对象,才能进行修改。此外,修改后的JSON字符串需要再次使用JSON.stringify()函数转换为JSON格式。
🔊删除JSON数组元素
要删除JSON数组中的值,可以先使用JSON.parse()函数将JSON字符串转换为JavaScript数组,然后按照以下步骤进行删除:
1.使用标准的JavaScript数组方法删除元素
let jsonArray = JSON.parse('[{"name":"John", "age":30}, {"name":"Jane", "age":20}]');
// 删除第一个元素
jsonArray.splice(0, 1);
console.log(JSON.stringify(jsonArray)); // 输出 '[{"name":"Jane","age":20}]'
运行结果如下
2.如果想更精确地指定要删除哪个元素,也可以通过索引来查找并删除它
let jsonArray = JSON.parse('[{"name":"John", "age":30}, {"name":"Jane", "age":20}]');
// 删除“John”对象
for(let i=0; i<jsonArray.length; i++) {
if(jsonArray[i].name === 'John') {
jsonArray.splice(i, 1);
break;
}
}
console.log(JSON.stringify(jsonArray)); // 输出 '[{"name":"Jane","age":20}]'
运行结果如下
需要注意的是,这些方法只能删除整个元素,而不能删除单个属性。如果要删除属性,需要先将元素转换为对象,再使用delete运算符删除相应的属性,然后将整个数组转换回JSON格式。
☃️JSON的使用
🔊JSON.parse()
JSON.parse() 是一个内置于所有现代浏览器和Node.js中的JavaScript函数,用于将符合JSON格式的字符串解码为JavaScript对象。以下是关于JSON.parse()的一些重要细节:
-
语法:JSON.parse(text[, reviver])
text
:必需参数,表示要被解析成JavaScript值的字符串。reviver
:可选参数,表示转换器函数,它可以处理每个属性。在将属性添加到新创建的对象之前,会对每个属性应用此函数。
-
返回值:如果输入的是有效的JSON文本,那么JSON.parse()函数将返回一个新的JavaScript对象。如果输入的是无效的JSON文本,则会抛出一个SyntaxError异常。
-
示例:
let jsonString = '{"name":"John", "age":30, "city":"New York"}'; let obj = JSON.parse(jsonString); console.log(obj); // 输出:{ name: 'John', age: 30, city: 'New York' }
-
注意事项:
- 在使用JSON.parse()函数时,需要注意输入的字符串必须是有效的JSON格式,否则会导致解析失败并抛出错误。
- 如果在解析过程中遇到未知字符或非法语法,则会导致JSON.parse()函数停止解析并抛出错误。
- 如果想要更全面地控制解析过程,可以提供一个可选的转换器函数作为第二个参数,以便在将属性添加到新创建的对象之前对其进行处理。
运行结果如下
🔊JSON.stringify()
JSON.stringify() 是一个内置于所有现代浏览器和Node.js中的JavaScript函数,用于将JavaScript值转换为符合JSON格式的字符串。以下是关于JSON.stringify()的一些重要细节:
-
语法:JSON.stringify(value[, replacer[, space]])
value
:必需参数,表示要被转换成JSON字符串的JavaScript值。replacer
:可选参数,表示转换器函数或数组,它可以决定哪些值应该被包含在最终的JSON字符串中,以及它们应如何被转换。space
:可选参数,表示要在输出的JSON字符串中的每个级别前插入多少个空格,以提高可读性。
-
返回值:如果输入的值可以被安全地转换为JSON格式,那么JSON.stringify()函数将返回一个新的JSON字符串。如果输入的值不能被安全地转换为JSON格式,则会抛出一个TypeError异常。
-
示例:
let obj = { name: 'John', age: 30, city: 'New York' }; let jsonString = JSON.stringify(obj); console.log(jsonString); // 输出:'{ "name": "John", "age": 30, "city": "New York" }'
-
注意事项:
- 在使用JSON.stringify()函数时,需要注意JavaScript对象中的函数、RegExp对象、Date对象、DOM节点等特殊类型的值无法被安全地转换为JSON格式,因此在转换过程中会被忽略。
- 如果提供的可选参数
replacer
是一个数组,那么只有那些在数组中存在的属性才会被包含在最终的JSON字符串中。 - 如果提供了可选参数
space
,那么在输出的JSON字符串中的每个级别前都会插入相应数量的空格,以提高可读性。
运行结果如下
🔊JSON5
JSON5是一种扩展的JSON语法,它允许使用一些额外的特性,如:
- 多行注释(// 和 /* … */);
- 字面量NaN和Infinity;
- 布尔值true和false的大写形式;
- 函数表达式;
- 箭头函数;
- Set和Map结构;
- 引用类型;
- 类;
- 导出和导入;
- 字符串模板等等。
JSON5并不直接支持JavaScript的所有功能,而是只支持一些常用的特性。这使得它可以在跨平台的环境中更好地工作,并且具有更好的兼容性。
注意,尽管许多现代浏览器都支持JSON5,但并不是所有的环境都支持。因此,在实际使用中,建议先使用JSON.parse()
和JSON.stringify()
函数将JSON5转换为标准的JSON,然后再进行处理。
📖总结
总的来说,JSON 是一种简洁、易于理解和跨平台的数据格式,常用于前后端数据传输和存储。通过学习 JSON,我们可以更好地处理和操作数据。
🎨觉得不错的话记得点赞收藏呀!!🎨
😀别忘了给我关注~~😀
更多推荐
所有评论(0)