在开发过程中,经常会用到Json字符串,有时需要对前端传过来的json串解析,或者把前端数据以json字符串的形式传送给后端,下面我们来看一下各方面的应用。
1.JSON格式和JS格式
//JS对象
var person = {
name: "Jane",
age: 29
}
//JSON格式{}的JS对象,在在前台页面可以直接将其当做json对象使用
var personJson = {
"name": "Jane",
"age": 29
}
//JSON格式{{}}的JS对象,在在前台页面可以直接将其当做json对象使用
var personJson = {
"name": "Jane",
"age": 29,
"school": {
"name": "MerriMack College",
"location": "North Andover, MA"
},
"rank": "Third"
}
//JSON格式{[]}的JS对象,在在前台页面可以直接将其当做json对象使用
var bookList = {
"title": "Professional Ajax",
"year": 2009,
"authors": [
"Jane", "Maria", "Anna"
],
"edition": "2.0"
}
//JSON格式{[{}]}的JS对象,在在前台页面可以直接将其当做json对象使用
var bookList2 = {
"title": "Professional Ajax",
"year": 2009,
"authors": [
{"First": "Jane"},
{"Second": "Maria"},
{"Third": "Jack & Mac"}
],
"edition": "2.0"
}
2.JS中对json的操作
1)JS对象序列化为JSON字符串:stringify()
上述对象若在JS文件中定义,则都是JS对象格式,可以用如下去验证
console.log(typeof bookList2); //输出object
需要先对JS对象解析为JSON格式,才能传递给后台。
但是若在.json文件中获取到的,则是json字符串。
var jsonText = JSON.stringify(bookList2);
console.log(typeof jsonText); //输出string
!!!注释:JSON.stringify()默认情况下输出的JSON字符串不包含任何空字符串或缩进,所有函数及原型成员都被忽略,不体现在结果中。所有值为undefined的任何属性也会被跳过。
序列化时,可以过滤生成的json字符串结果:
var jsonText = JSON.stringify(bookList, ["title", "edition"]);
//输出{"title":"Professional Ajax","edition":"2.0"},其他项被省略
也可以给输出的json字符串添加空格或缩进符
console.log(JSON.stringify(bookList, null, 4)); //缩进符为4个空格
console.log(JSON.stringify(bookList, null, '---')); //缩进符为---
或通过函数,过滤生成的json字符串结果
//key代表键值,value代表数值
var jsonFilter = JSON.stringify(bookList, function(key, value) {
switch(key) {
case 'authors':
return value.join(","); //author中的数组,用","连接为字符串
case 'year':
return 5000; //输出的year改为5000,只改变键值,不改变value
case 'edition':
return undefined; //返回为undefined,则该属性会被忽略,不输出
default:
return value; //默认属性,一定要有!!
}
})
toJSON()方法
该方法在JS对象中调用,返回其自身的JSON数据格式。
var bookList = {
"title": "Professional Ajax",
"year": 2009,
"authors": [
"Jane", "Maria", "Anna"
],
"edition": "2.0",
toJSON: function () {
return this.title; //toJSON()方法==函数过滤器,则只返回title
}
};
console.log('bookList:' + JSON.stringify(bookList)); //输出 bookList:"Professional Ajax"
JSON.stringify()序列化对象的顺序:
1.如果JS对象中,有toJSON()方法,而且能通过它取得有效值,则调用该方法,否则,按默认顺序执行序列化。
2.如果提供了第二个参数,应用函数过滤器,传入函数过滤器的值是第(1)步的返回值,即toJSON()函数的返回值,等价于函数过滤器。
3.对于第(2)步返回的每个值进行序列化。
4.如果提供了第三个参数,执行格式化。
2)JSON对象解析为JS对象:parse()
在JS文件中定义的JS对象,可以先通过stringify()序列化为JSON字符串,再通过parse()解析为JS对象。
或从.json文件中获取数据,则可以直接使用JSON.parse()解析。
//bookList为JS对象
var jsonText = JSON.stringify(bookList);
var jsObject = JSON.parse(jsonText);
console.log(typeof jsObject); //输出object
!!!注释:虽然jsObject 与 bookList是两个相同的JS对象,但它们是两个独立的、没有任何关系的对象。
JSON.parse()解析选项
该方法也可以接收另一个参数,改参数是一个函数。
//JS对象
var bookList2 = {
"title": "Professional Ajax",
"year": 2009,
"edition": "2.0",
"releaseDate": new Date(2011, 6, 5)
};
//序列化JS对象为JSON字符串
var jsonText2 = JSON.stringify(bookList2);
//解析JSON字符串为JS对象,同时对Date进行处理
var book = JSON.parse(jsonText2, function (key, value) {
if (key == "releaseDate") {
return new Date(value); //把releaseDate对象解析为Date格式
} else {
return value;
}
})
//只有releaseDate为Date对象时,才能调用getFullYear()函数
console.log(book.releaseDate.getFullYear()); //输出2011
console.log(book.releaseDate); //输出标准Date格式 Tue Jul 05 2011 00:00:00 GMT+0800 (中国标准时间)
//!!!若是不采用上面的函数,对Date进行处理,解析为JS对象时,releaseDate的值是字符串
var book2 = JSON.parse(jsonText2);
console.log(book2.releaseDate.getFullYear()); //爆出错误
console.log(book2.releaseDate); //输出字符串 2011-07-04T16:00:00.000Z