JSON是一种数据交换格式,不是编程语言。
1、JSON格式与普通对象区别:
- 键必须用双引号包裹,单引号都不行,值是数字、true、null 可以不使用双引号,但是 undefined 必须加双引号作为字符使用。
- 不能包含函数。
- 也不能使用注释。
- 文件使用后缀.JSON格式.
2、JSON格式有三种写法:
第一种:字符串写法
"hello",
"null",
"true"
上面是错误的JSON字符格式,只能有一个字符串,多行字符报错
"hello"
第二种:对象形式
{
"name":"wang",
"age":18,
"shool":{
"shoolname":"diyizhongxue",
"address":"zhongguoqu"
},
"hobbies":["codding","playgame"]
}
第三种:数组格式
[
"abc",
123,
{
"name":"wang",
"age":144,
"hobbies":["codding","playgame"]
},
"true",
"null"
]
3、JSON序列化和反序列化
1. JSON序列化JSON.stringify(value, replacer, space)
**将对象转换成JSON字符串**
- value:要转换的数据,通常为对象和数组。
- replacer:函数或数组,函数用来装饰键值对,数组用来过滤
- space:用来缩进,是数字的时候表示缩进的空格数,是字符串的时候表示缩进显示字符
- 返回值是一个JSON字符串
let json = {
age:11,"name":"wang"}
let p = JSON.stringify(json,null,2)
console.log(p);
console.log(typeof p);
其实返回的是最外层带引号的字符串,只是被省略了,如下:
" {
"age": 11,
"name": "wang"
} "
2. JSON反序列化JSON.parse(string)
**将JSON字符串转换成对象** 返回值是一个对象
let json = {
age:11,"name":"wang"}
let p = JSON.stringify(json,null,2)
console.log(p);
console.log(typeof p);
let pobj = JSON.parse(p)
console.log(pobj);
4、JSON序列化时如果有函数和undefined,则忽略函数和undefined项。
let json = {
age:11,"name":"wang","und":undefined,"func":function(){
}}
let p = JSON.stringify(json,null,2)
console.log(p);
5、当localstorage和sessionstorage需要 JSON序列化和反序列化
本地存储和会话存储只能存储字符串,如果不是字符串,会调用toString方法转化为字符串,而对象调用toString,显示的是[object Object ]
<script type="text/javascript">
let obj = {
age:11,"name":"wang","und":undefined,"func":function(){
}}
localStorage.setItem('obj',obj)
</script>
可用 JSON.stringify( obj ) 进行转换
<script type="text/javascript">
let obj = {
age:11,"name":"wang","und":undefined,"func":function(){
}}
// localStorage.setItem('obj',obj)
localStorage.setItem('obj',JSON.stringify(obj))
</script>
当获取本地和会话存储时,返回的是字符串,需要转化为对象,用JSON.parse()
<script type="text/javascript">
let obj = {
age: 11,
"name": "wang",
"und": undefined,
"func": function() {
}
}
localStorage.setItem('objs', JSON.stringify(obj))
let pobj = localStorage.getItem('objs')
console.log(typeof pobj); // string
console.log(pobj); // "{"age":11,"name":"wang"}" 字符串
</script>
需要注意的是,当用JSON.parse()时需要将其放在外面包裹localStorage
<script type="text/javascript">
let obj = {
age: 11,
"name": "wang",
"und": undefined,
"func": function() {
}
}
localStorage.setItem('objs', JSON.stringify(obj))
// JSON.parse需要放在外面
let pobj = JSON.parse(localStorage.getItem('objs'))
console.log(typeof pobj);
console.log(pobj);
</script>
之后就可以用pobj.name调取里面的内容了。
6、JSON序列化和反序列化的深拷贝
<script type="text/javascript">
let obj = {
age: 11,
"name": "wang",
"und": undefined,
"func": function() {
}
}
// newobj是一个新对象,与obj没有关联
let newobj = JSON.parse(JSON.stringify(obj))
newobj.name='ljdlksflsj'
console.log(newobj);
console.log(obj);
</script>
序列化拷贝的缺点就是不能拷贝出函数