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()的一些重要细节：

1. 语法：JSON.parse(text[, reviver])

   • text：必需参数，表示要被解析成JavaScript值的字符串。
   • reviver：可选参数，表示转换器函数，它可以处理每个属性。在将属性添加到新创建的对象之前，会对每个属性应用此函数。

2. 返回值：如果输入的是有效的JSON文本，那么JSON.parse()函数将返回一个新的JavaScript对象。如果输入的是无效的JSON文本，则会抛出一个SyntaxError异常。

3. 示例：

   let jsonString = '{"name":"John", "age":30, "city":"New York"}';
   
   let obj = JSON.parse(jsonString);
   
   console.log(obj); // 输出：{ name: 'John', age: 30, city: 'New York' }
   

4. 注意事项：

   • 在使用JSON.parse()函数时，需要注意输入的字符串必须是有效的JSON格式，否则会导致解析失败并抛出错误。
   • 如果在解析过程中遇到未知字符或非法语法，则会导致JSON.parse()函数停止解析并抛出错误。
   • 如果想要更全面地控制解析过程，可以提供一个可选的转换器函数作为第二个参数，以便在将属性添加到新创建的对象之前对其进行处理。

运行结果如下

JSON.stringify()

JSON.stringify() 是一个内置于所有现代浏览器和Node.js中的JavaScript函数，用于将JavaScript值转换为符合JSON格式的字符串。以下是关于JSON.stringify()的一些重要细节：

1. 语法：JSON.stringify(value[, replacer[, space]])

   • value：必需参数，表示要被转换成JSON字符串的JavaScript值。
   • replacer：可选参数，表示转换器函数或数组，它可以决定哪些值应该被包含在最终的JSON字符串中，以及它们应如何被转换。
   • space：可选参数，表示要在输出的JSON字符串中的每个级别前插入多少个空格，以提高可读性。

2. 返回值：如果输入的值可以被安全地转换为JSON格式，那么JSON.stringify()函数将返回一个新的JSON字符串。如果输入的值不能被安全地转换为JSON格式，则会抛出一个TypeError异常。

3. 示例：

   let obj = { name: 'John', age: 30, city: 'New York' };
   
   let jsonString = JSON.stringify(obj);
   
   console.log(jsonString); // 输出：'{ "name": "John", "age": 30, "city": "New York" }'
   

4. 注意事项：

   • 在使用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，我们可以更好地处理和操作数据。

觉得不错的话记得点赞收藏呀！！

别忘了给我关注~~