JavaScript中JSON的序列化与解析详解

本文通过具体实例介绍了JavaScript中解析及序列化JSON的技术方法，供读者参考。

JSON之所以广受欢迎，是因为其数据结构可以直接被解析为JavaScript对象。在JSON出现之前，XML数据需要先被解析为DOM文档，再从中提取数据，相比之下JSON的处理方式更为便捷。

因此，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格式，将会抛出错误。

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程序设计有所帮助。