1. 什么是JSON?
JSON全称 (JavaScript Object Notation) ,是一种轻量级的数据交换格式。
因为JSON 本身就是参考JavaScript对象的规则定义的,其语法与JavaScript定义对象的语法相同。
简单的说JavaScript是JSON的主场啊,前端必会。
2. JSON的语法规则
1.数组(Array) 使用 []表示
//JSON格式中数组中的每个元素可以不相同
[0,null,false,['二','三','四'],'五']
2.对象(Object)用{}表示。
3.JSON中采用键值对的形式 即键名:键值
键名是字符串格式。
键值的类型可以为字符串,数值,布尔值,null,对象以及数组。
//举例 下面是一个JSON格式
{
"name":"憨八龟",
"age":27,
"sex":true,
"hobbies":["篮球","足球","保龄球","高尔夫球"]
}
3.JSON格式和XML格式的区别
XML
优点:
1.格式统一,符合标准;
2.容易与其他系统进行远程交互,数据共享比较方便。
缺点:
1.XML文件庞大,文件格式复杂,传输占带宽。
2.服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护。
JSON
优点:
1.数据格式比较简单,易于读写,格式都是压缩的,占用带宽小。
2.易于解析,客户端JavaScript可以简单的通过eval()进行JSON数据的读取。
缺点:
1.服务器端和客户端有不同的开发人员。它们必须协商对象的格式,这很容易造成错误。
4. JSON的转换
4.1 JSON.parse 字符串转对象
JSON的parse 方法可以将符和JSON规定的字符串转为对象
格式:JSON.parse(字符串名称,回调)
参数一 :需要传入的字符串
参数二(可选):参数二是一个函数,该函数有两个参数name和value,分别代表转化后键和值,当传入一个字符串后,JSON的每一组键值对都将调用此函数,该函数有返回值
通常由需要时我们会利用第二个参数,在转化为JSON对象的同时对数据做一些处理。
const str = '{"name":"憨八龟","age":38}';
// JSON.parse 把JSON格式的字符串转为对象
const obj = JSON.parse(str, (name, value) => {
if (name == "name") { //当属性名称为name时 修改值为憨八龟冲击波
value = "憨八龟冲击波"
} else if (name == "age") {
value = 18
}
//value必须return回来
return value
});
4.2 JSON.stringify对象转字符串
**序列化:**将JavaScript值转为JSON字符串这一过程称为序列化,转化后的值可以通过JSON.parse()转化回来
格式:JSON.stringify(value,replacer,space)
**value:**需要被转化的值,一般为对象或数组。如果是的话参数有name和value分别代表键和值。
replacer(可选):值为函数或数组。
如果为函数:则每一组键(属性名)/值(属性值)都会调用此函数,该函数会返回值,如果某一项属性值为undefined,那这一项会被忽略。
如果为数组,只有数组中存在的名称才能够被转换,转化后的数组顺序按replacer数组参数的顺序。
**space(可选):**该属性只是为了排版,方便阅读。通常是在JSON字符串中添加空白符或制表符等等
replacer参数为函数时:
参数为数组时:
代码部分
<!--
* @Author: 张
* @Description:JSON对象转字符串
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj = {
name: "憨八龟",
age: 11,
hello: "你是憨八龟",
you: undefined
}
// 参数一传入的值 参数二 函数或数组 参数三 占位符仅仅为了方便阅读
const jsonObjStr = JSON.stringify(obj, (name, value) => {
if (name == "age") {
value = 38
}
return value
}, "\t")
// console.log(jsonObjStr)
const arr = {
a: 0,
b: 1,
c: 2,
d: 3
}
const jsonArrStr = JSON.stringify(arr, ["c", "a", "b"], "\t")
console.log(jsonArrStr)
</script>
</body>
</html>
简单案例2:
const str = '{"name":"憨八龟","age":38}';
// JSON.parse 把JSON格式的字符串转为对象
const obj = JSON.parse(str);
console.log(obj);
// JSON.stringify() 把对象转为字符串
const jsonStr = JSON.stringify(obj)
console.log(jsonStr);
图:
5. JSON和XML之间的转换
很多人说JSON的诞生就是为了取代XML的,但是根据目前的情况下,两者各有各的发挥领域。所以我们还是需要学习一下两者之间的转换。
1.Vue转换需要安装和引用插件
npm install x2js
2.在入口函数中引入并挂载到原型
main入口文件
import x2js from 'x2js'
Vue.prototype.$x2js = new x2js()
3.使用方法
//xml转json
this.$x2js.xml2js()
//json转xml
this.$x2js.js2xml()