JS中的JSON（秒懂如何操作JSON）
码农白衣 2024-07-26 09:05:06 阅读 77
目录
一、JSON介绍
1.概念
2.主要特点
3.优点
4.使用JSON的原因
使用 XML
使用 JSON
二、JSON语法
三、JSON使用
1.JSON的序列化
2.解析（parse) JSON
3.序列化（Stringify）JSON
四、JSON实例
1.用户信息
2.本地存储
五、JSON应用场景
六、总结
一、JSON介绍
1.概念
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的语法子集，但是独立于编程语言。JSON格式可以用来在网络中传输数据，也可以存储数据。JSON采用键值对的方式表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或者null。
2.主要特点
简洁性（Simplicity）：JSON的语法简洁清晰，易于阅读和编写。它由简单的键值对、数组和值组成，比起XML等其他数据格式更为简洁。
可读性（Readability）：JSON数据易于理解和解释，它使用了人们熟悉的键值对的形式，而且可以通过缩进来表示数据的层级结构，提高了可读性。
跨语言兼容性（Language Independence）：JSON是一种独立于编程语言的数据格式，可以被几乎所有编程语言支持。因此，无论是哪种编程语言，都可以轻松地解析和生成JSON格式的数据。
数据结构（Data Structure）：JSON支持复杂的数据结构，包括对象和数组的嵌套，可以表示各种形式的数据。这种灵活性使得JSON在应用程序之间传输复杂数据时非常有用。
可扩展性（Extensibility）：JSON格式是可扩展的，可以根据需要定义新的数据类型或数据结构。虽然JSON本身提供了基本的数据类型，但是它可以通过约定来支持更复杂的数据模型。
网络友好（Network Friendly）：JSON数据通常比XML等其他数据格式更小，因此在网络传输时占用的带宽更少，速度更快，对于移动设备或者网络带宽有限的环境尤其适用。
3.优点
简洁易读：JSON使用简单的文本格式表示数据，易于阅读和编写。跨平台兼容：JSON是一种通用的数据格式，可以在不同编程语言和平台之间进行数据交换。易于解析和生成：JSON数据可以轻松地被解析和生成，几乎所有编程语言都有相关的解析器和生成器。支持复杂数据结构：JSON支持嵌套的对象和数组，可以表示复杂的数据结构。
4.使用JSON的原因
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
读取 XML 文档使用 XML DOM 来循环遍历文档读取值并存储在变量中
使用 JSON
读取 JSON 字符串用 eval() 处理 JSON 字符串
二、JSON语法
JSON（JavaScript Object Notation）的语法相对简单，主要由以下几个部分组成：
对象（Object）：对象是一组无序的键值对（key-value pairs），用花括号 <code>{} 包裹起来。每个键值对之间用逗号 , 分隔。键和值之间使用冒号 : 分隔。键必须是字符串，而值可以是字符串、数字、布尔值、数组、对象或者null。示例：
{
"name": "John",
"age": 30,
"isStudent": false,
"languages": ["JavaScript", "Python", "Java"],
"address": {
"city": "New York",
"country": "USA"
},
"email": null
}
数组（Array）：数组是一组有序的值的集合，用方括号 [] 包裹起来。数组中的每个值之间用逗号 , 分隔。值可以是字符串、数字、布尔值、数组、对象或者null。示例：
["apple", "banana", "orange", 42, true, null]
值（Value）：值可以是字符串、数字、布尔值、数组、对象或者null。示例：
字符串："Hello, World!"数字：42布尔值：true 或 false数组：[1, 2, 3]对象：{"key": "value"}null：null
字符串（String）：字符串是一系列Unicode字符的序列，用双引号 " 包裹起来。示例："Hello, World!"
数字（Number）：数字可以是整数或浮点数的表示，不包含其他格式（如十六进制数、八进制数等）。示例：42 或 3.14
布尔值（Boolean）：布尔值表示真（true）或假（false）的值。示例：true 或 false
空值（null）：表示空值或缺失值。示例：null
JSON的语法规则包括：
键和字符串必须使用双引号 " 包裹。键值对之间使用冒号 : 分隔。键值对之间使用逗号 , 分隔。数组中的元素之间使用逗号 , 分隔。JSON文本必须包含在大括号 {} 或方括号 [] 中。
JSON是一种轻量级的数据交换格式，易于理解和编写，被广泛用于数据交换和存储。
三、JSON使用
1.JSON的序列化
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
var obj = {
name:"why",
age : 18,
friend:{
name:"kobe"
}
}
console.log(obj.name,obj.age)
// 1.将obj对象进行序列化
var objJSONString = JSON.stringify(obj)
console.log(objJSONString)
// 2.将对象存储到LocalStorage
localStorage.setItem("info",objJSONString)
var item = localStorage.getItem("info")
console.log(item,typeof item)
//3.将字符串转回到对象(反序列化)
var newObj = JSON.parse(item)
console.log(newObj)
</script>
</body>
</html>
2.解析（parse) JSON
解析JSON意味着将JSON格式的字符串转换为对应的数据结构，如对象、数组等。在大多数编程语言中，这个过程通常由一个名为parse的函数来完成。例如，在JavaScript中，可以使用JSON.parse()函数来解析JSON字符串，将其转换为相应的JavaScript对象。示例如下：
const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // 输出: { name: 'John', age: 30 }
3.序列化（Stringify）JSON
序列化JSON意味着将数据结构，如对象、数组等，转换为JSON格式的字符串。在大多数编程语言中，这个过程通常由一个名为stringify的函数来完成。例如，在JavaScript中，可以使用JSON.stringify()函数来序列化JavaScript对象为JSON格式的字符串。示例如下：
const jsonObject = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // 输出: '{"name":"John","age":30}'
四、JSON实例
1.用户信息
创建一个包含一些用户信息的JSON对象，然后将其解析为JavaScript对象，最后将JavaScript对象序列化为JSON字符串。
// 创建一个包含用户信息的JSON对象
const userJSON = `{
"name": "Alice",
"age": 25,
"email": "alice@example.com",
"address": {
"city": "New York",
"zipcode": "10001"
},
"hobbies": ["reading", "traveling", "photography"]
}`;
// 解析JSON字符串为JavaScript对象
const userObj = JSON.parse(userJSON);
// 输出解析后的JavaScript对象
console.log(userObj);
// 访问JavaScript对象中的属性
console.log(`Name: ${userObj.name}`);
console.log(`Age: ${userObj.age}`);
console.log(`Email: ${userObj.email}`);
console.log(`City: ${userObj.address.city}`);
console.log(`Zipcode: ${userObj.address.zipcode}`);
console.log("Hobbies:");
userObj.hobbies.forEach(hobby => console.log(`- ${hobby}`));
// 创建一个JavaScript对象
const newUserObj = {
name: "Bob",
age: 30,
email: "bob@example.com",
address: {
city: "Los Angeles",
zipcode: "90001"
},
hobbies: ["coding", "playing guitar"]
};
// 序列化JavaScript对象为JSON字符串
const newUserJSON = JSON.stringify(newUserObj);
// 输出序列化后的JSON字符串
console.log(newUserJSON);
我们首先创建了一个包含用户信息的JSON字符串。然后，我们使用JSON.parse()方法将JSON字符串解析为JavaScript对象，并打印该对象的内容。接着，我们访问JavaScript对象中的属性，并演示了如何访问嵌套对象和数组。接下来，我们创建了一个新的JavaScript对象，并使用JSON.stringify()方法将其序列化为JSON字符串。最后，我们打印了序列化后的JSON字符串。
2.本地存储
将数据存储到浏览器的本地存储中，并在需要时检索和更新该数据。
// 检查浏览器是否支持本地存储
if (typeof(Storage) !== "undefined") {
// 如果支持本地存储
// 从本地存储中获取用户数据
let userData = localStorage.getItem("user");
// 检查是否已经保存了用户数据
if (userData) {
// 如果已经保存了用户数据，则解析为JavaScript对象
userData = JSON.parse(userData);
console.log("已从本地存储中获取用户数据:", userData);
} else {
// 如果没有保存用户数据，则创建一个新的用户对象
userData = {
name: "Alice",
age: 25,
email: "alice@example.com"
};
console.log("未找到本地存储中的用户数据，创建新用户数据:", userData);
}
// 更新用户数据
userData.age = 26;
console.log("更新后的用户数据:", userData);
// 将更新后的用户数据保存到本地存储
localStorage.setItem("user", JSON.stringify(userData));
console.log("已将更新后的用户数据保存到本地存储");
} else {
// 如果浏览器不支持本地存储，则输出错误消息
console.log("抱歉，您的浏览器不支持本地存储功能");
}
我们首先检查浏览器是否支持本地存储。如果支持，则尝试从本地存储中获取名为"user"的数据。如果找到了该数据，则将其解析为JavaScript对象，并输出到控制台。如果没有找到数据，则创建一个新的用户对象，并将其保存到本地存储中。接着，我们更新了用户数据的年龄，并将更新后的数据重新保存到本地存储中。如果浏览器不支持本地存储，则输出相应的错误消息。
五、JSON应用场景
Web开发：JSON在Web开发中被广泛用于客户端与服务器端之间的数据交换。前端通常通过Ajax请求从服务器获取JSON格式的数据，并将其解析后在网页上进行展示或交互。
API通信：许多Web服务通过RESTful API或GraphQL等方式提供数据。这些API通常以JSON格式返回数据，因为JSON易于解析且支持复杂的数据结构，如嵌套对象和数组。
配置文件：许多应用程序使用JSON格式来存储配置信息，例如软件的偏好设置、插件配置等。JSON的易读性使得用户可以轻松编辑配置文件。
移动应用开发：JSON常用于移动应用的数据存储和交换，例如在iOS和Android应用中使用JSON格式的数据与服务器通信，或在应用中存储本地数据。
数据存储：某些小型应用程序或原型可能使用JSON作为数据存储格式，尤其是对于小规模的数据集，它比传统的数据库更加简单和灵活。
日志记录：有些系统会将日志以JSON格式记录，以便后续分析和处理。JSON的结构化特性使得日志信息更容易被解析和理解。
配置API响应：API通常会以JSON格式返回请求的响应，包括成功消息、错误消息、数据等。开发人员可以根据API响应中的JSON数据来处理请求结果。
六、总结
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在不同系统之间进行数据传输和存储。以下是关于JSON的一些重要知识点的总结：
格式：
JSON采用键值对的方式存储数据。键（key）必须是字符串，值（value）可以是字符串、数字、布尔值、数组、对象或null。数据以大括号{}包裹表示对象，以中括号[]包裹表示数组。
特点：
简洁：JSON数据结构简单明了，易于理解和编写。易读性：JSON数据易于阅读和解析，适合人类阅读和编写。与语言无关：JSON是一种语言无关的数据格式，几乎所有编程语言都支持JSON的解析和生成。
用途：
在Web开发中用于客户端与服务器之间的数据传输。API通信的数据格式，常见于RESTful API和GraphQL。配置文件的存储格式，易于人类编辑和解析。移动应用开发中的数据存储和交换格式。日志记录的数据格式，便于后续分析和处理。
解析与生成：
在JavaScript中，可以使用JSON.parse()将JSON字符串解析为JavaScript对象。可以使用JSON.stringify()将JavaScript对象转换为JSON字符串。
示例：
{
"name": "John",
"age": 30,
"isStudent": false,
"friends": ["Alice", "Bob"],
"address": {
"city": "New York",
"country": "USA"
},
"nullValue": null
}
总的来说，JSON作为一种轻量级、简洁、易读的数据交换格式，在各种应用场景中都有着广泛的应用，并且是现代软件开发中不可或缺的一部分。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。