JavaScript JSON操作指南：stringify、parse及自定义序列化方法

JSON基础概念与数据类型

本文通过具体实例，详细解析JavaScript中常见的JSON操作技术，旨在为开发者提供实用的参考与指导。

1、JSON基础概念

JSON全称为JavaScript Object Notation（JavaScript对象表示法），是一种用于存储和交换文本数据的轻量级格式，基于JavaScript语法子集构建。其优势在于格式简洁、读写便捷且占用带宽较少。尽管与XML类似，但JSON在体积、解析速度及易用性方面表现更优。

需要明确的是，JSON仅是一种数据交换格式，不支持变量声明、函数定义或对象实例化。其数据组织形式为键值对，各数据项之间以逗号分隔。

2、JSON支持的数据类型

JSON支持的基础数据类型包括字符串、数值、布尔值以及null。需注意，JSON不支持JavaScript中的undefined类型。

JSON支持对象类型，表现为无序的键值对集合。

JSON支持数组类型，表现为有序的值列表。

3、JSON对象与JavaScript对象的区别

首先，JSON对象的属性名必须使用双引号包裹，尽量避免使用单引号，否则可能导致解析错误。

其次，JSON对象末尾不需要也不允许添加分号。

最后，JSON不支持JavaScript中的变量引用。

4、JSON数组与JavaScript数组的区别

同样地，JSON数组末尾无分号。

JSON数组也不支持变量引用。

JSON序列化与对象转换

5、JSON序列化技术

(1) JSON.stringify()方法

该方法用于将JavaScript对象（包括JSON对象）转换为JSON字符串。默认情况下，生成的JSON字符串不包含空格或缩进，且会自动忽略JavaScript对象中的函数定义及原型链属性。

此方法接收三个可选参数：过滤器（可以是函数或数组）、以及用于控制输出格式的缩进字符串或数字。


var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"]
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符将数组连接成一个字符串
  case "age":
    return value + 1;
  case "adult":
    return undefined;//返回undefined则删除此属性
  default:
    return value;//其他值正常显示
  }
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice","age":23,"adult":true,"friends":["Bruce", "Cindy"]}
alert(jsonText2);//{"name":"Alice","friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","age":24,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
  "name":"Alice",
  "age":23,
  "adult":true,
  "friends":[
    "Bruce",
    "Cindy"
  ]
}
*/

(2) toJSON()方法

该方法作为stringify()方法中第二个参数过滤器的补充机制。当默认的stringify()行为无法满足特定对象的自定义序列化需求时，可以通过在对象上定义toJSON()方法来实现。

序列化对象时的执行顺序如下：

1) 检查对象是否存在toJSON()方法，若存在且能返回有效值，则调用该方法；否则直接返回对象本身。
2) 如果提供了第二个参数（过滤器），则应用该函数过滤器，传入的值为上一步返回的结果。
3) 对第二步返回的每个值进行相应的序列化操作。
4) 如果提供了第三个参数（缩进），则执行相应的格式化输出。


var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"],
  toJSON:function(){
    return {"name":"Alice","id":23,"friends":["Bruce", "Cindy"]};
  }
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符将数组连接成一个字符串
  case "id":
    return value - 1;
  case "age":
    return value + 1;//返回undefined则删除此属性
  default:
    return value;//其他值正常显示
  }
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice", "id":23, "friends":["Bruce", "Cindy"]};
alert(jsonText2);//{"id":23,"friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","id":22,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
  "name":"Alice",
  "id":23,
  "friends":[
    "Bruce",
    "Cindy"
  ]
}
*/

JSON字符串解析方法对比

(3) eval()方法

这是将JSON字符串解析为JavaScript对象（JSON对象）的一种传统方法。


var JSText = eval('(' + '{"name":"Alice", "friends":["Bruce", "Cindy"]}' + ')');
alert(JSText.friends);//Bruce,Cindy

需要注意的是，eval方法仅在非严格模式下有效，在use strict模式下禁止使用此方法，存在安全风险。

(4) jQuery.parseJSON()方法

这是将JSON字符串解析为JavaScript对象（JSON对象）的另一种常见方法。

使用该方法前，必须先引入jQuery库文件。


var JSText = jQuery.parseJSON('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
alert(JSText.friends);//Bruce,Cindy

注意：自jQuery 3.0版本起，官方已弃用jQuery.parseJSON()方法。对于JSON字符串的解析，建议改用原生的JSON.parse()方法以确保兼容性和安全性。

(5) JSON.parse()方法

这是现代浏览器中推荐的将JSON字符串解析为JavaScript对象（JSON对象）的标准方法。

该方法接收两个参数：待解析的JSON字符串，以及一个可选的转换函数（replacer），该函数将在每个键值对上被调用以处理解析结果。

示例1：


var JSText1 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
var JSText2 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}', function(key, value) {
  if (key == "friends")
      return value.join("&");
    else
      return value;
});
alert(JSText1.friends);//Bruce,Cindy
alert(JSText2.friends);//Bruce&Cindy

注意：第一个参数必须是合法的JSON字符串，因此JSON对象的键名必须使用双引号包裹。

示例2：


var person = {
  name: "Alice",
  age: 23,
  birthday: new Date(1993, 12, 6)//保存了一个Date对象
};
var jsonText = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
alert(jsonText);//{"name":"Alice","age":23,"birthday":"1994-01-05T16:00:00:000Z"}
var JSText = JSON.parse(jsonText, function(key, value) {//解析在JSText中还原了Date对象，则JSText.birthdat属性中会保存一个Date对象
  if (key == "birthday")
    return new Date(value);
  else
    return value;
});
alert(JSText.birthday.getFullYear());//1994，已是Date对象，可以调用getFullYear()

此外，推荐几款实用的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程序设计工作有所帮助。

JavaScript JSON操作详解：序列化、解析与对象转换

JSON基础概念与数据类型

JSON序列化与对象转换

JSON字符串解析方法对比

实用工具推荐