js解析与序列化json数据(二)序列化探讨


Posted in Javascript onFebruary 01, 2013

上一节我们讲解了JSON.stringify()的基本用法,这一节我们来重点探讨一下序列化。
JSON.stringify()除了要序列化的js对象外,还可以接收另外两个参数,这两个参数用于指定不同方式序列化js对象。第一个参数是过滤器,可以使一个数组,也可以是一个函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进。单独或组合使用这两个参数,可以更全面深入地控制JSON的序列化。
1、过滤结果
如果过滤器参数是数组,那么JSON.stringify()的结果中将只包含数组中列出的属性。如:

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114" 
}; 
var jsonText=JSON.stringify(student,["name","id"]); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="测试" /> 
</body> 
</html>

jsonText的值为
{"name":"Bill","id":"802020114"}
如果第二个参数是函数,行为会有一点不同。传入的函数接收两个参数,属性(键)名和属性值。根据属性(键)名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串。
为了改变序列化对象的结果,函数返回的值就是相应键的值。不过要注意,如果函数返回了undefined,那么相应的属性会被忽略。如:
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114", 
subject:["math","Chinese","English"] 
}; 
var jsonText=JSON.stringify(student,jsonConvert); 
} 
function jsonConvert(key,value) 
{ 
switch (key) 
{ 
case "name": 
return "Lily"; 
case "grade": 
return undefined; 
case "subject": 
return value.join(","); 
default : 
return value; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="测试" /> 
</body> 
</html>

这里函数过滤器根据传入的键来决定结果。如果键为name,就将其值设置为Lily;如果为grade就返回undefined来删除该属性;如果为subject,它是一个数组,就将它通过数组方法join()转化为以逗号连接的字符串。最后一定要提供default项,使其他的值都能够正常出现在结果中,不然就会出错,没有结果。实际上,第一次调用这个函数过滤器,传入的键是一个空字符串,而值就是student对象。上面的jsonText的值如下:
{"name":"Lily","age":12,"id":"0802020114","subject":"math,Chinese,English"}
在内部是按顺序遍历每一个对象每一个属性,所以公开key,value函数方法需要注意你的函数只有着两个参数才能起效,要理解函数的目的,就是在内部机制遍历每一个属性的时候让你来修改部分结果,并且是一次遍历每一个对象,这样在序列化对象中每一个对象都要经过过滤器。
2、字符串缩进
JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值,那么它表示的是每个级别缩进的空格数。如:
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114", 
subject:["math","Chinese","English"] 
}; 
var jsonText=JSON.stringify(student,null,8); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="测试" /> 
</body> 
</html>

保存在jsonText中的字符串为:
{ 
"name": "Bill", 
"age": 12, 
"grade": 3, 
"id": "0802020114", 
"subject": [ 
"math", 
"Chinese", 
"English" 
] 
}

JSON.stringify()在结果字符串中插入了换行符以提高可读性。只要传入有效的控制缩进的参数值,结果字符串就会包含换行符(只缩进而不换行意义不大)。最大缩进空格数位10,所有大于10的值都会自定转换为10。

如果缩进参数是一个字符串而非数值,则这个字符串将在JSON字符串中被用作缩进字符(不再使用空格)。如可以实现如下的效果:

{ 
*"name": "Bill", 
*"age": 12, 
*"grade": 3, 
*"id": "0802020114", 
*"subject": [ 
**"math", 
**"Chinese", 
**"English" 
*] 
}

同样字符串最长不能超过10个字符长。如果超过,结果中将只出现10个字符。
3、toJSON()方法
有时候JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求。在这些情况下,可以通过对象上调用toJSON()方法,返回其自身的JSON数据格式。如:
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114", 
subject:["math","Chinese","English"], 
toJSON:function(){ 
return this.name+"_"+this.id; 
} 
}; 
var jsonText=JSON.stringify(student); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="测试" /> 
</body> 
</html>

以上代码在student对象上定义了一个toJSON()方法,该方法返回name和id的组合。最后jsonText的值如下:
"Bill_0802020114"
toJSON()可以作为函数过滤器的补充,因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify(),序列化该对象的顺序是:
(1)如果存在toJSON()方法而且能够通过它取得有效值,则调用该方法。否则,按默认顺序执行序列化。
(2)如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值。
(3)对第(2)步返回的每个值进行相应的序列化。
(4)如果提供了第三个参数,执行相应的格式化。
无论是考虑滴定toJSON()方法,还是考虑使用函数过滤器,或者需要同时使用两者,理解这个顺序都是至关重要的。
Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
Jquery 扩展方法
May 06 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 #Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 #Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 #Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 #Javascript
js用Date对象处理时间实现思路及代码
Jan 31 #Javascript
document.all的一个比较完整的总结及案例
Jan 31 #Javascript
javascript对select标签的控制(option选项/select)
Jan 31 #Javascript
You might like
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python实现定时任务
2017/02/08 Python
Python实现随机选择元素功能
2017/09/14 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
百联网上商城:i百联
2017/01/28 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
房地产开发计划书
2014/01/10 职场文书
大学班长的职责
2014/01/27 职场文书
高中运动会广播稿
2014/09/16 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
志愿者个人总结
2015/03/03 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL