这篇文章主要介绍了JavaScript解析及序列化JSON的方法,结合实例形式分析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.lovean.com/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.lovean.com/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.lovean.com/code/HtmlJsRun测试上述代码运行效果。

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

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

JSON在线格式化工具:
http://tools.lovean.com/code/jsonformat

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

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

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

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

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

最新资讯
国家邮政局监测数据:“618”旺季行业揽件31.9亿

国家邮政局监测数据:“

国家邮政局监测数据预计,“618”活动期间,全行业揽收快
深圳无人机年交易额突破400亿元 无人机企业超360家

深圳无人机年交易额突

截至2018年底,全市无人机企业超过360家,消费类无人机占
马斯克降成本应对围剿 特斯拉两年累计裁员近8000人

马斯克降成本应对围剿

随着今年第一季度财报的公布,特斯拉股价也持续阴跌。截
PayPal宣布COO年末离职 将探索其他创业机会

PayPal宣布COO年末离

PayPal周四宣布,其首席运营官Bill Ready将在今年年末离
传大型银行正与Facebook沟通 或将参与加密货币项目

传大型银行正与Facebo

据彭博社报道,美国几家大银行或有机会参与Facebook的加
谷歌放弃平板电脑业务 取消两款开发中产品

谷歌放弃平板电脑业务

歌发言人周四宣布,该公司将正式放弃平板电脑业务,并取消
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编