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代码检验、检验、美化、格式化工具：

json在线格式化工具：

在线xml/json互相转换工具：

json代码在线格式化/美化/压缩/编辑/转换工具：

在线json压缩/转义工具：

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

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