数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

JavaScript解析及序列化JSON的方法实例分析

来源:脚本之家  责任编辑:小易  

本文实例讲述了JavaScript解析及序列化JSON的方法。分享给大家供大家参考,具体如下:

JSON 之所以这么流行,是因为 JSON 数据结构可以被解析为 JavaScript 对象。JSON 之前的 XML 数据结构要被解析,需要先解析成 DOM 文档,然后再从中提取出数据。相比之下,JSON 数据结构方便多咯O(∩_∩)O~

所以 JSON 就成为 web 开发中,用于数据交换的事实标准。

1 JSON 对象

早期的 JSON 解析器是使用 JavaScript 的 eval() 函数。因为 JSON 是 JavaScript 语法的子集,所以 eval() 函数可以解析并返回 JavaScript 对象。但使用这个函数存在风险,因为有可能会被执行一些恶意的代码!ECMAScript 5 定义了全局对象 JSON。支持这个对象的浏览器有 IE8+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10.5+。而旧版的浏览器建议使用 JSON-js 库。

JSON 对象有两个方法:

1. stringify(),会把 JavaScript 对象序列化为 JSON 字符串。
2. parse(),会把 JSON 字符串解析为原生的 JavaScript 对象。

<script type="text/javascript">
var book = {
  title: "music",
  authors: ["deniro"],
  edition: 1,
  year: 2017
};
var jsonText = JSON.stringify(book);
console.log(jsonText);
var bookCopy = JSON.parse(jsonText);
console.log(bookCopy);
</script>

默认情况下,JSON.stringify() 输出的字符串不包含任何空格字符以及缩进。而且所有的函数以及原型成员都会被有意忽略。此外,值为 undefined 的属性也会被跳过。所以结果中都是值为有效的属性。

注意:上面代码中的 book 与 bookCopy 虽然具有相同的属性,但它们是两个独立的、没有任何关系的对象。

如果传给 JSON.parse() 的字符串不是有效的 JSON 字符串,就会抛出错误。

2 序列化选项

JSON.stringify() 还可以接收另外两个参数。第二个参数是过滤器,可以是数组,也可以是函数;第三个参数表示是否在 JSON 字符串中保留缩进。

2.1 过滤结果

如果过滤器的参数是数组,那么结果中将只会包含这个数组所列出的属性:

<script type="text/javascript">
var book = {
  title: "music",
  authors: ["deniro"],
  edition: 1,
  year: 2017
};
//过滤结果
var jsonTextAfterFilter=JSON.stringify(book,["title","edition"]);
console.log(jsonTextAfterFilter);//{"title":"music","edition":1}
</script>

如果过滤器的参数是函数,那么这个函数会接收两个参数,属性名和属性值。属性名只能是字符串,如果它所对应的属性值不是键值对结构的值时,那么属性名可以是空字符串。这个函数的返回值就是相应属性名对应的值。如果函数返回 undefined,那么相应的属性就会被忽略:

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017
  };
  var jsonText = JSON.stringify(book, function (key, value) {
    switch (key) {
      case "authors":
        return value.join(",");
      case "year":
        return 10000;
      case "edition":
        return undefined;
      default :
        return value;
    }
  });
  console.log(jsonText);//{"title":"music","authors":"deniro","year":10000}
</script>

注意:一定要提供 default 选项,这样才能保证其他的值都能正常地出现在结果中。

Firefox 3.5 和 3.6 有一个 bug,在将函数作为方法的第二个参数时,只有返回 undefined 有效,而返回其他任何值都会在结果中包含相应的属性,Firefox 4 修复了这个 bug。

2.2 字符串缩进

JSON.stringify() 的第三个参数可以控制结果中的缩进和空白符。如果这个参数是数值,那么就表示是缩进的空格数,比如这里要缩进 4 个空格:

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017
  };
  var jsonText = JSON.stringify(book, null, 4);
  console.log(jsonText);
</script>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码,运行结果如下:

除了缩进,JSON.stringify() 也在结果中添加了换行符,这提高了 JSON 字符串的可读性。最大缩进空格数为 10,超过这个值都会被自动转为 10。

如果缩进参数是一个字符串,那么它会作为 JSON 字符串的缩进字符:

<script type="text/javascript">
var book = {
  title: "music",
  authors: ["deniro"],
  edition: 1,
  year: 2017
};
var jsonTextWithIndent=JSON.stringify(book,null,"--");//传入缩进字符
console.log(jsonTextWithIndent);
</script>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码,运行结果如下:

缩进字符串最长不能超过 10,如果超过了这个值,结果中就只会出现前 10 个字符。

2.3 toJSON() 方法

有时候,JSON.stringify() 不能满足某些对象的自定义序列化的要求。这时,我们可以使用对象上的 toJSON() 方法,返回其自身的 JSON 数据格式。

可以为任何对象添加 toJSON() 方法:

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017,
    toJSON: function () {
      return this.title;
    }
  };
  var jsonText = JSON.stringify(book);
  console.log(jsonText);//"music"
</script>

可以让 toJSON() 方法返回任何序列化的值;也可以返回 undefined,这时如果包含它的对象嵌入在另一个对象中,那么这个对象的值就会变成 null,如果包含的它的对象是顶级对象,那么这个对象就是 undefined

一个对象传入 JSON.stringify() 时,序列化该对象的顺序是这样的:
①. 如果存在 toJSON() 方法而且能通过它取得有效值时,就调用该方法。
②. 如果提供了第二个参数,就应用这个函数过滤器,传入这个过滤器的值是上一步返回的值。
③. 对第二步返回的每个值进行相应的序列化。
④. 如果提供了第三个参数,就执行相应的格式化操作。

3 解析选项

JSON.parse() 也可以接收第二个参数,它是一个函数,这个函数会在每个键值对上调用,这个函数被称为还原函数,它接收一个键和一个值,需要一个返回值。

如果这个还原函数返回 undefined,就表示要从结果中删除相应的键;如果返回其他值,则会将该值插入到结果中。在将日期字符串转换为 Date 对象时,经常要用到这个函数:

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017,
    releaseDate: new Date(2017, 6, 2)
  };
  var jsonText = JSON.stringify(book);
  var bookCopy = JSON.parse(jsonText, function (key, value) {
    if (key == "releaseDate") {
      return new Date(value);
    } else {
      return value;
    }
  });
  console.log(bookCopy.releaseDate.getFullYear());
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS:这里再为大家推荐几款相关的json在线工具供大家参考:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:


  • 本文相关:
  • js解析与序列化json数据(一)json.stringify()的基本用法
  • js解析与序列化json数据(二)序列化探讨
  • json序列化和反序列化方法解析
  • java中fastjson生成和解析json数据(序列化和反序列化数据)
  • js解析与序列化json数据(三)json的解析探讨
  • java下利用jackson进行json解析和序列化示例
  • 实例解析json反序列化之objectmapper(自定义实现反序列化方法)
  • json序列化与解析原生js方法且ie6和chrome测试通过
  • python使用json序列化datetime类型实例解析
  • json键值对序列化和反序列化解析
  • 页面调用单个swf文件,嵌套出多个方法。
  • es6中array.copywithin()函数的用法实例详解
  • jsonp跨域的原理解析及其实现介绍
  • 人民币数字转换成大写形式
  • js+html5实现的自由落体运动效果代码
  • javascript实现的右下角弹窗实例
  • javascript 数组循环引起的思考
  • javascript实现table表格隔行变色的方法
  • javascript实现在下拉列表中显示多级树形菜单的方法
  • javascript实现公历转农历功能示例
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved