1.JSON的由来
在目前的开发中,JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式。
JSON的全称是JavaScript Object Notation(JavaScript对象符号):
- JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式,算是JavaScript的一个子集;
- 但是虽然JSON被提出来的时候是主要应用JavaScript中,但是目前已经独立于编程语言,可以在各个编程语言中使用;
- 很多编程语言都实现了将JSON转成对应模型的方式;
其他的传输格式:
- XML:在早期的网络传输中主要是使用XML来进行数据交换的,但是这种格式在解析、传输等各方面都弱于JSON,所以目前已经很
少在被使用了; - Protobuf:另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf,但是直到2021年的3.x版本才支持JavaScript,所
以目前在前端使用的较少;
目前JSON被使用的场景也越来越多:
- 网络数据的传输JSON数据;
- 项目的某些配置文件;
- 非关系型数据库(NoSQL)将json作为存储格式;
2.JSON基本语法
JSON的顶层支持三种类型的值:
- 简单值:数字(Number)、字符串(String,不支持单引号)、布尔类型(Boolean)、null类型;
- 对象值:由key、value组成,key是字符串类型,并且必须添加双引号,值可以是简单值、对象值、数组值;
- 数组值:数组的值可以是简单值、对象值、数组值;
{
"name": "coder",
"age": 18,
"friend": {
"name": "kobe"
}
}
3. JSON序列化
某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串,这样方便对其进行处理:
- 比如我们希望将一个对象保存到localStorage中;
- 但是如果我们直接存放一个对象,这个对象会被转化成 [object Object] 格式的字符串,并不是我们想要的结果;
JSON序列化方法
- stringify方法:将JavaScript类型转成对应的JSON字符串;
- parse方法:解析JSON字符串,转回对应的JavaScript类型;
那么上面的代码我们可以通过如下的方法来使用:
var obj = {
name: "coder",
age: 18,
friend: {
name: "kobe",
},
};
// 1.将obj对象进行序列化
var objJSONString = JSON.stringify(obj);
console.log(objJSONString); // {"name":"coder","age":18,"friend":{"name":"kobe"}}
// 2.将对象储存到localStorage
localStorage.setItem("info", objJSONString);
// 可以通过getItem获取到存储对象的字符串
var item = localStorage.getItem("info");
console.log(item); // {"name":"coder","age":18,"friend":{"name":"kobe"}}
// 3.将字符串转回到对象(反序列化)
var newObj = JSON.parse(item);
console.log(newObj); // {name: 'coder', age: 18, friend: {…}}
4.Stringify方法的补充
4.1 replace参数
JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串:
-
如果指定了一个 replacer 函数,则可以选择性地替换值;
-
var obj = { name: "coder", age: 18, friend: { name: "kobe", }, }; // 将字符串name值变为change再转为字符串 var objJSONString = JSON.stringify(obj, function (key, value) { if (key === "name") { return "change"; } return value; }); console.log(objJSONString); // {"name":"change","age":18,"friend":{"name":"change"}}
-
如果指定的 replacer 是数组,则可选择性地仅包含数组指定的属性;
-
var obj = { name: "coder", age: 18, friend: { name: "kobe", }, }; // 只将数组中的属性转为字符串 var objJSONString = JSON.stringify(obj, ["age"]); console.log(objJSONString); // {"age":18}
4.2 space参数
space参数表示以多少个空格进行换行, 使JSON字符串方便阅读
var obj = {
name: "coder",
age: 18,
friend: {
name: "kobe",
},
};
// 只将数组中的属性转为字符串
var objJSONString = JSON.stringify(obj, null, 2);
console.log(objJSONString);
如果对象本身包含toJSON方法,那么会直接使用toJSON方法的结果:
var obj = {
name: "coder",
age: 18,
friend: {
name: "kobe",
},
toJSON: function() {
return "change"
}
};
// 只将数组中的属性转为字符串
var objJSONString = JSON.stringify(obj, null, 2);
console.log(objJSONString); // change
5.parse方法的补充
JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。
- 提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。
var obj = {
name: "coder",
age: 18,
};
var objJSONString = JSON.stringify(obj);
// 转回对象时,并转换某些只,例如将age+2
var newObj = JSON.parse(objJSONString, function (key, value) {
if (key === "age") {
return value + 2;
}
return value;
});
console.log(newObj); // {name: 'coder', age: 20}
JSON的方法可以帮我们实现对象的深拷贝:
- 但是目前我们还没有了解什么是对象的拷贝、浅拷贝、深拷贝的概念;
- 我们会在JavaScript高级中学习;
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/120148.html