JSON的全称是JavaScript Object Notation，中文叫JavaScript对象表示法，是一种基于文本的轻量级数据交换格式。它使用键值对的方式组织数据，看起来很像JavaScript中的对象字面量，但JSON本身是独立于语言的，任何编程语言都可以解析和生成JSON文本。前端把数据打包成JSON字符串发送给后端，后端再把JSON字符串解析成对象去处理，这是Web开发中最常见的协作模式。理解JSON的基本规则，掌握JavaScript中解析和生成JSON的方法，是每个前端开发者的基本功。
很多初学者容易把JSON和JavaScript对象混为一谈，其实两者有明显区别。JSON是一种纯文本格式，必须用双引号包裹所有的键名和字符串值，不允许出现单引号、注释、尾逗号等JavaScript语法。而JavaScript对象则是内存中的数据结构，可以有方法、有undefined等特殊值。本文会围绕JSON的语法定义，深入分析JavaScript中两个核心方法JSON.parse和JSON.stringify的工作机制，并指出容易踩的坑。
JSON的基本语法与数据类型
JSON的语法非常简洁，一共支持六种数据类型：字符串、数字、布尔值、null、数组和对象。字符串必须用双引号，数字可以是整数或小数，布尔值只能是true或false，null表示空值。数组用方括号包裹，元素之间用逗号分隔，对象用花括号包裹，键值对之间也用逗号分隔。整个JSON文档只能是一个对象或一个数组作为根节点，不能单独出现字符串或数字。
一个合法的JSON字符串看起来像这样：
{
"name": "张三",
"age": 25,
"isStudent": false,
"hobbies": ["篮球", "编程"],
"address": {
"city": "北京",
"zipCode": "100000"
}
}
注意上述内容在真实场景中会被转换成字符串形式，例如通过单引号包裹后传给JSON.parse。JSON要求键名必须加双引号，字符串值也必须加双引号，这一点和在JavaScript中定义对象时可以使用不加引号的键名完全不同。另外JSON中不允许出现undefined、函数、Symbol等类型，这些类型在被序列化时会被自动忽略或转换成null。
使用JSON.parse解析JSON字符串
在JavaScript中，把JSON字符串转换成JavaScript对象需要调用JSON.parse方法。它接收一个字符串参数，如果字符串是合法的JSON，就返回对应的对象或数组；如果格式错误，会抛出SyntaxError异常。在日常开发中，从后端接口获取到的数据往往是字符串，所以JSON.parse是前端处理数据的第一步。
下面是基本用法：
var jsonStr = '{"name":"李四","age":30,"isVip":true}';
var user = JSON.parse(jsonStr);
console.log(user.name); // 李四
console.log(user["age"]); // 30
JSON.parse还可以接收第二个参数，这个参数是一个函数，叫做reviver，可以在返回结果前对每个键值对进行二次处理。例如把字符串形式的日期字段转换成一个真正的Date对象：
var data = '{"name":"王五","birthday":"2020-01-01"}';
var obj = JSON.parse(data, function(key, value) {
if (key === "birthday") {
return new Date(value);
}
return value;
});
console.log(obj.birthday instanceof Date); // true
reviver函数可以灵活修改解析结果，但要注意它会被迭代调用，每次调用都会传入当前键和值。返回值会作为该键的新值，如果返回undefined，这个键会被删除。使用reviver可以实现反序列化时的数据清洗和类型转换。
使用JSON.stringify生成JSON字符串
与JSON.parse相反，JSON.stringify负责把JavaScript对象转换成JSON字符串。这是前端向服务器提交数据时最常见的行为。基本用法非常简单：
var user = { name: "赵六", age: 28, skills: ["JavaScript", "Vue"] };
var jsonText = JSON.stringify(user);
console.log(jsonText);
// 输出：{"name":"赵六","age":28,"skills":["JavaScript","Vue"]}
JSON.stringify会自动忽略值为undefined的属性、函数属性以及Symbol属性。如果对象上有toJSON方法，那么会优先调用这个方法，用它的返回值作为序列化结果。这在处理日期对象时特别有用，因为Date对象内置了toJSON方法，序列化时会被转换成ISO格式字符串。
JSON.stringify还支持两个可选参数。第二个参数可以是一个数组或函数，用于指定需要序列化的属性白名单或对值进行过滤。第三个参数是缩进空格数，让生成的字符串更易读。例如：
var product = { id: 1, name: "手机", price: 1999, desc: "某个描述" };
var jsonText = JSON.stringify(product, ["id", "name"], 2);
console.log(jsonText);
// 输出：
// {
// "id": 1,
// "name": "手机"
// }
第二个参数如果是函数，则称为replacer，它会在序列化过程中依次处理每个键值对，可以通过返回值控制输出值。如果返回undefined，则跳过当前属性。这种机制非常适合隐藏敏感信息或修改输出格式。
解析和生成JSON时的常见陷阱
第一个常见陷阱是循环引用。如果对象A有一个属性指向对象B，而对象B又有一个属性指回A，那么JSON.stringify会抛出TypeError错误，因为JSON不允许存在环。解决办法是在构造对象时避免互相引用，或者利用replacer在检测到循环引用时返回null。
第二个陷阱是NaN和Infinity。JSON不允许NaN和Infinity，序列化时会自动把它们转换成null。这可能导致数据失真。反序列化时，null不会自动转换回来，所以设计接口时尽量使用有限数值。
第三个问题是函数和undefined被自动忽略。这通常不会引起错误，但会让一些开发者感到意外。如果需要在JSON中传递函数，只能先手动把函数转换成字符串，再在另一端解析后使用eval或Function构造函数把字符串还原为函数，但是这样做存在安全风险，不建议在跨域或者不可信环境中使用。
第四个陷阱是日期对象的序列化。Date对象经过JSON.stringify之后会变成ISO格式字符串，例如"2023-05-01T00:00:00.000Z"，但JSON.parse不会自动把它还原成Date对象，只能得到一个字符串。如果希望保留日期类型，必须使用reviver函数手动转换，就像本文前面展示的那样。
var dateObj = new Date(); var json = JSON.stringify(dateObj); console.log(json); // "2025-01-01T00:00:00.000Z" var back = JSON.parse(json); console.log(back instanceof Date); // false，back是一个字符串
最后一个容易踩坑的地方是JSON字符串中的转义字符。当JSON用于表示包含换行、引号或反斜杠的文本时，这些特殊字符必须被正确转义。比如在字符串中嵌入双引号，要写成"，反斜杠要写成\。在JavaScript中书写JSON字符串时，还需要考虑JavaScript自身的转义规则，否则容易出现双重转义错误。
var raw = '{"message":"他说："你好\n世界""}';
var obj = JSON.parse(raw);
console.log(obj.message);
// 输出：他说："你好
// 世界"
这是一段包含转义字符的JSON字符串，解析后message内容中带有换行和引号。开发者需要清楚JSON语法中的转义和JavaScript字符串字面量的转义是两层不同的规则，稍不注意就会写错。
总的来说，JSON是Web开发中不可或缺的数据格式。JavaScript提供的JSON.parse和JSON.stringify极大地方便了数据的转换，但只有深入了解它们的参数和边界行为，才能写出健壮的代码。在实际项目中，建议封装通用的解析和序列化工具函数，统一处理日期转换、错误捕获和特殊字段过滤，这样既方便维护，也能减少重复劳动。掌握JSON的细节，会让你的前端功底更加扎实。
JSONJavaScriptparse_stringify修改时间：2026-08-16 07:03:14