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


Posted in Javascript onJanuary 04, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码,运行结果如下:

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

除了缩进,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.3water.com/code/HtmlJsRun测试上述代码,运行结果如下:

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

缩进字符串最长不能超过 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.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
Node.js操作系统OS模块用法分析
Jan 04 #Javascript
Node.js console控制台简单用法分析
Jan 04 #Javascript
Node.js JSON模块用法实例分析
Jan 04 #Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 #Javascript
Node.js assert断言原理与用法分析
Jan 04 #Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 #Javascript
原生javascript实现连连看游戏
Jan 03 #Javascript
You might like
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JavaScript触发器详解
2007/03/10 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python转换摩斯密码示例
2014/02/16 Python
Python yield 小结和实例
2014/04/25 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
方正Java笔试题
2014/07/03 面试题
西式婚礼主持词
2014/03/13 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
无传销社区工作方案
2014/05/13 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
学习心理学的体会
2014/11/07 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2014年后勤工作总结
2014/11/18 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
新郎接新娘保证书
2015/05/08 职场文书