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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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 随机数的深入理解
2013/06/05 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
原生js轮播特效
2017/05/18 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
详解python中的Turtle函数库
2018/11/19 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
荣耀商城:HIHONOR
2020/11/03 全球购物
UNIX文件类型
2013/08/29 面试题
应届毕业生简历自我评价
2014/01/31 职场文书
小学信息技术教学反思
2014/02/10 职场文书
2014庆六一活动方案
2014/03/02 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
表扬信范文
2015/05/04 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android