细说JSON字面量的解析与序列化
6.JSON字面量
===========
**知识点**
1.JSON的定义
2.JSON的解析与序列化
--------------------------------------------------------------
1.JSON的定义
-----------
- JSON: (javaScript Object Notation): js对象表示符号
- JSON: 是一种轻量级的数据交换格式, 非常便于网络传输
- JSON: 目前已经是通用的数据传输格式, 获得了几乎所有编程语言的支持
- JSON: 并不是新数据类型,它只是使用数组或对象字面量表示的数据集合
- JSON对象与普通js对象的区别:
1. 属性名,字符串,必须写在一对双引号中;
2. 只允许: 数值, 字符串, 布尔值, Null, 对象, 数组 六种数据类型
3. 只允许使用字面量方式来定义数据
--------------------------------------------------------------
2.JSON的解析与序列化
-----------------
- 解析: eval() 和 JSON.parse()
- 序列化: JSON.stringify()
--------------------------------------------------------------
### 示例代码: code/demo05.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON字面量</title>
</head>
<body>
<script>
// 'JSON' (javaScript Object Notation): js对象表示符号
// 'JSON' 是一种轻量级的数据交换格式, 非常便于网络传输
// 'JSON' 目前已经是通用的数据传输格式, 获得了几乎所有编程语言的支持
// JSON并不是新数据类型,它只是使用数组或对象字面量表示的数据集合
// JSON对象与普通js对象的区别:
// 1. 属性名,字符串,必须写在一对双引号中;
// 2. 只允许: 数值, 字符串, 布尔值, Null, 对象, 数组 六种数据类型
// 3. 只允许使用字面量方式来定义数据
var users = [
{
"name": "peter",
"age": 30,
"grade": {
"javascript": 80,
"php": 70
}
},
{
"name": "Tom",
"age": 20,
"grade": {
"javascript": 90,
"php": 60
}
},
{
"name": "Jack",
"age": 25,
"grade": {
"javascript": 40,
"php": 50
}
}
];
// 验证json是否是js对象?
console.log(typeof users); // Object
console.log(users instanceof Object); // true
// 访问json中的数据
console.log(users[0].name);
console.log(users[1].grade.javascript);
// json非常适合前后端的数据交互,例如后端通过php/java等生成一个json格式的字符串
var stu = '{"name": "小岳岳", "grade":{"javascript":60,"php":80}}';
//前端接收到这个json格式的字符串之后,将它解析还原来js对象
//1. 使用 eval(), 将json字符串放在一对圆括号中,做为表达式直接求值
var data1 = eval('('+ stu +')');
console.log(typeof data1); // Object
console.log(data1.name);
console.log(data1.grade.php);
//2. eval()方法且有风险,推荐使用JSON.parse()
var data2 = JSON.parse(stu);
console.log(typeof data2); // Object
console.log(data2.name);
console.log(data2.grade.php);
// 与JSON.parse()功能相反的还有一个方法: JSON.stringify()
// 将json对象序列化为一个json格式的字符中,进行传输或者存储
var mobile = {
"brand": "华为P20",
"price": 3899
};
console.log(mobile.brand + ': ' + mobile.price);
// 转为json字符串
var jsonStr = JSON.stringify(mobile);
console.log(typeof jsonStr);
console.log(jsonStr);
// 当然,还可以将它还原成js对象
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.brand);
</script>
</body>
</html>
```
