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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
JS实现简单的九宫格抽奖
Jun 28 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python 控制语句
2011/11/03 Python
在Python下尝试多线程编程
2015/04/28 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python实现图片插入文字
2019/11/26 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
村委会贫困证明
2014/01/14 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
周一问候语大全
2015/11/10 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android