JavaScript JSON
前端 JavaScript DOM 和 BOM 学习目录
4. DOM attribute property style属性 className属性 classList属性 Data
在我们目前的开发中，我们的JSON 数据成为了一种十分重要的数据格式
是一种在我们的 服务端和客户端之间传递数据的一种数据格式
JSON的基本单位是键值对（Key-Value），其中键（Key）必须是字符串，值（Value）可以是字符串、数值、布尔值、对象、数组、null
JSON由来
-
JSON 全称为： JavaScript Object Notation，JavaScript对象符号
- JSON 是一种轻量级的资料交互格式，也可以说是我们的 JavaScript 的子集
- 在我们的很多的编程语言中都提供了一些对 JOSN 数据的转化方法
-
在我们的前后端实现交互的时候，也就是我们的 服务端和客户端之间的数据交互格式
- XML： 在早期的网络传输中，我们就是主要用的我们的XMl来实现的数据之间的交互
- Protobuf ：新出来的一种网络交互的格式，但是在前端中使用的还是十分少的，用于即时通讯时候传输数据
-
JSON 的使用的场景含有：
- Web开发：在客户端和服务器之间交换数据。
- API开发：作为API的响应和请求数据格式。
- 配置文件：存储配置信息。
- 数据存储：在NoSQL数据库中存储结构化数据
-
实际上的话，我们现在练习的前端项目中书写的一些数据的话，到后面和后端实现前后端交互的时候
- 我们数据是全部来自于后端提供的 api 接口请求回来的
- 后期的话，我们的发送网络去请求的方式含有： ajax | axios | fetch | websocket
- 通过向后端实现发送网络请求，从而实现获取得到我们需要渲染到前端页面的数据
-
后面为了我们的练习前后端的交互，这个时候为了解决我们的只会前端的人员准备了一个插件
- Json-Server 可以自己了解一下
JSON 基础语法
首先我们得 JSON 数据可以首先支持的数据格式是我们的： 对象吗，数组，字符串，数值，布尔值，null
但是只不过的话，JSON 数据格式的基本单位是我们的 键值对形式（key-value）,同时我们的键只能是字符串
JSON 不可以支持书写我们的注释，注释会报错
JSON 数据的优势以及缺点:
优点：
- 轻量级：结构简单，传输效率高。
- 跨平台：独立于语言，几乎所有编程语言都支持。
- 易于读写：人类可读性强，易于调试和维护。
缺点：
- 不支持注释：在编写和维护复杂数据时可能不够灵活。
- 不支持二进制数据：无法直接存储图像、视频等二进制文件。
- 不支持命名空间：可能导致不同应用程序之间的数据冲突
JSON 可以实现支持的值含有：
简单值: 数字型（Number）, 字符串（String，不支持单引号），布尔类型（Boolean）,null类型
对象值：是由我们的key,value组成的，键值对的格式，键必须使用我们的双引号实现包裹
数组值：数组值可以实现简单值，也可以是我们的对象值，数组值
{
"userInfos": [
{
"name": "juwenzhang",
"age": 18,
"height": 165,
"index": 1
},
{
"name": "76433",
"age": 18,
"height": 165,
"index": 2
},
{
"name": "水逆信封",
"age": 18,
"height": 165,
"index": 3
}
],
"userType": [
{
"type": "student",
"desc": "学生"
},
{
"type": "teacher",
"desc": "老师"
},
{
"type": "adult",
"desc": "青年"
},
{
"type": "worker",
"desc": "工作人员"
}
],
"major": [
{
"type": "Front-end",
"desc": "前端",
"index": 1
},
{
"type": "Back-end",
"desc": "后端",
"index": 2
}
]
}
JSON 的序列化和反序列化
JSON 序列化： 就是实现的是将JavaScript 中的比较复杂的数据类型转化为JSON格式的字符串的过程，这个就是JSON序列化
JSON 反序列化： 就是实现的是将我们的JSON字符串转化为JavaScript 中的数据格式的转化u过程
序列化的方法： JSON.stringify
反序列化方法： JSON.parse
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var obj = {
name: 'John Doe',
age: 16,
friend: {
name: 'John Div',
age: 16
}
}
// 开始实现将我们的对象存储到 LocalStorage 中
// 这个时候，我们就不可以直接实现存储我们的 JavaScript 中的数据，需要先实现序列化后再实现存储
// 将我们的 JavaScript 中的数据类型实现转化的话，就是通过的我们的 JSON.stringify 来实现序列化的
window.localStorage.setItem("localData", JSON.stringify(obj)) // 存储过程
var localData = window.localStorage.getItem("localData") // 取出数据的过程,但是取出来的是字符串
console.log(localData, typeof localData)
// 如果想要完全的可以向JavaScript 中的类型一样操作，这个时候就需要执行: 反序列化
console.log(JSON.parse(localData))
</script>
</body>
</html>
JSON stringify 和 parse方法补充
-
stringify 方法一共具有两个参数
- 第一个参数就是需要进行序列化的JavaScript 数据类型
- 第二个参数就是实现转化过程中的需要进行替换的操作 replacer
- 第三个参数就是指定预留的命名空间，默认 null， space
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var obj = {
name: 'John Doe',
age: 16,
friend: {
name: 'John Div',
age: 16
}
}
var str_json = JSON.stringify(obj)
console.log(str_json)
/**
* stringify
* 第一个参数就是需要进行序列化的JavaScript 数据类型
* 第二个参数就是实现转化过程中的需要进行替换的操作 replacer
* 第三个参数就是指定预留的命名空间，默认 null， space
*/
var str_json01 = JSON.stringify(obj, function (key, value) {
if (key === 'name') {
return 'juwenzhang'
}
return value
}, 2)
console.log(str_json01)
/**
* parse
* 参数1： 需要进行转化的 JSON 数据
* 参数2： 对JSON数据进行过滤的条件
*/
var str_obj = JSON.parse(str_json01, function (key, value) {
if (key === 'age') {
return value + 2
}
return value
})
console.log(str_obj)
</script>
</body>
</html>
同时使用我们的 JSON 格式的转换，我们还可以实现的前端的深拷贝
深拷贝和浅拷贝的话后面再来实现，现在你们的知识储备还是太少了
