首页 前端知识 JSON详细教程

JSON详细教程

2024-04-29 12:04:49 前端知识 前端哥 267 778 我要收藏

😊JSON详细教程

    • 🚩JSON简介
    • ☃️JSON语法规则
      • 🔊JSON和JavaScript对象的区别
    • ☃️JSON数据类型
      • 字符串
      • 🔊数字
      • 🔊布尔值
      • 🔊数组
      • 🔊对象
      • 🔊Null
    • ☃️JSON对象
      • 🔊访问JSON对象的值
      • 🔊循环对象
      • 🔊修改JSON对象的值的方法
      • 🔊删除JSON对象属性
    • ☃️JSON数组
      • 🔊访问JSON数组里的值
      • 🔊修改JSON数组里的值
      • 🔊删除JSON数组元素
    • ☃️JSON的使用
      • 🔊JSON.parse()
      • 🔊JSON.stringify()
      • 🔊JSON5
    • 📖总结

😊各位小伙伴们,新文章出炉了!!!



🚩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中不能使用八进制和十六进制表示数字,但可以使用eE来表示10的指数。

{
    "number1":1,
    "number2":2,
    "number3":3
}

🔊布尔值

JSON中的布尔值只有两个,即truefalse

{
    "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.cityperson["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].namedata["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,我们可以更好地处理和操作数据。


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

😀别忘了给我关注~~😀

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6601.html
标签
后端
评论
会员中心 联系我 留言建议 回顶部
复制成功!