这一篇文章主要是总结有关JSON的解析和序列化的知识点,我也是刚开始学习JSON,如果发现有什么问题的话,欢迎给我指出。还有一些知识点没有总结全,还需完善。
注:如果还不了解JSON的话可以看我的上一篇文章,里面有关于JSON的定义和语法的总结
前言
早期的JSON解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript语法的子集,因此eval()函数可以解析、解释并返回JavaScript对象和数组。ECMAScript 5对解析Json的行为进行规范,定义了全局对象JSON。支持这个对象的浏览器有IE8+、Firefox 3.5+、Safari4+、Chrome和Opera10.5+。对于较早版本的浏览器可以使用一个shim:https://github.com /douglascrockford/JSON-js。在旧版本的浏览器中,使用eval()对JSON数据结构求值存在风险,因为可能会执行一些恶意代码。对于不能原生支持JSON解析的浏览器,使用这个shim是最佳的选择。
JSON对象有两个方法:stringify()和parse()。在最简单的情况下,SON.stringify( ) —— 将对象序列化为JSON
字符串JSON.parse( ) —— 将JSON数据解析为Javascript对象
JSON.stringify()——序列化
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
语法
JSON.stringify(value[, replacer[, space]])
参数说明
- value:必需, 一个有效的 JSON 对象。
- replacer:可选。用于转换结果的函数或数组。
如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:”“。
如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。 - space: 可选,文本添加缩进、空格和换行符,
如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:\t。
实例:
1、第一个参数value一个有效的 JSON 对象
var json={
"no":null,//null
"age":22,//数字
"boolean":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var jsonText=JSON.stringify(json) //第一个参数value设置为json
console.log(jsonText);
控制台输出:
{"no":true,"age":22,"name":"angle","love":["eat","drink","play","happy"],"people":[{"name":"aa","age":18},{"name":"bb","age":19},{"name":"cc","age":20}]}
2、第三个参数space字符串的缩进
var json={
"no":null,//null
"age":22,//数字
"name":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var jsonText=JSON.stringify(json,null,4)//第三个参数设置为4,使得每行缩进四个字符
console.log(jsonText);
控制台打印结果:
{
"no": null,//每行缩进四个字符,可以改变数字查看效果
"age": 22,
"name": "angle",
"love": [
"eat",
"drink",
"play",
"happy"
],
"people": [
{
"name": "aa",
"age": 18
},
{
"name": "bb",
"age": 19
},
{
"name": "cc",
"age": 20
}
]
}
3、第二个参数replacer是过滤器(可为数组或函数)
(1)replacer为函数时(传入的函数接收两个属性,属性(键)名和属性值):
var json={
"no":null,//null
"age":22,//数字
"boolean":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var jsonText=JSON.stringify(json,function(key,value){
switch(key){
case "age"://key为age时值改为18
return 18;
case "name"://key为name时,通过返回undefined删除该属性
return undefined;
default://一定要提供default项,使其他值可以显示在结果中
return value;
}
},4//第二个参数设置为函数,第三个参数设置为4
)
console.log(jsonText);
控制台打印结果:
{
"no": null,
"age": 18,
"boolean": true,
"love": [
"eat",
"drink",
"play",
"happy"
],
"people": [
{
"age": 18
},
{
"age": 18
},
{
"age": 18
}
]
}
(2)replacer为数组时,JSON.stringify( )的结果将只包含数组中列出的属性
打印出来的键值对顺序根据数组里值的顺序
var json={
"no":null,//null
"age":22,//数字
"boolean":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var jsonText=JSON.stringify(json,["age","people","boolean","name"],4)
console.log(jsonText);
控制台打印结果
{
"age": 22,
"people": [
{
"age": 18,
"name": "aa"
},
{
"age": 19,
"name": "bb"
},
{
"age": 20,
"name": "cc"
}
],
"boolean": true,
"name": "angle"
}
JSON.parse()——解析
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法
JSON.parse(text[, reviver])
参数说明:
- text:必需, 一个有效的 JSON 字符串。
- reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
返回:
一个对象、数组或原始值。该返回值是从s中解析的(还有可能被reviver修改过)
实例:
1、第一个参数text:一个有效的 JSON 字符串
例如我们从服务器接收了以下数据:
{
"no":null,//null
"age":22,//数字
"boolean":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var json={
"no":null,//null
"age":22,//数字
"boolean":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var jsonText=JSON.stringify(json);//现将对象序列化
var obj=JSON.parse(jsonText);//进行解析
document.write(obj+"<br/>")//输出obj
for(var i in obj){//对象只能用for...in循环,不能用for(;;)循环
document.write(i+":"+obj[i]+"<br/>");//输出obj里面内容
}
//通过双重循环输出people这个对象数组
var arr=obj["people"];
for(var i=0;i<arr.length;i++){
for(var j in arr[i])
document.write(j+":"+arr[i][j]+"<br/>");//输出的j值为对象的属性名
}
输出结果:
[object Object]//obj是一个object对象
no:null
age:22
boolean:true
name:angle
love:eat,drink,play,happy
people:[object Object],[object Object],[object Object]//无法直接输出people这个对象数组
name:aa//通过双重循环输出people这个对象数组
age:18
name:bb
age:19
name:cc
age:20
2、第二个参数reviver是过滤器(可为数组或函数)
var json={
"no":null,//null
"age":22,//数字
"boolean":true,//布尔
"name":"angle",//字符串
"love":["eat","drink","play","happy"],//数组1
"people": [
{ "name":"aa" , "age":18 },
{ "name":"bb" , "age":19},
{ "name":"cc" , "age":20 }
]//数组2
}
var jsonText=JSON.stringify(json);
var obj=JSON.parse(jsonText,function(key,value){
if(key=="no"){
return undefined;///key为name时,通过返回undefined删除该属性
}else if(key=="love"){
return value.join("**");//把数组中的所有元素放入一个字符串中,以**分隔开
}else{
return value;
}
})
for(var i in obj){
document.write(i+":"+obj[i]+"<br/>");
}
输出结果
age:22
boolean:true
name:angle
love:eat**drink**play**happy
people:[object Object],[object Object],[object Object]