JSON 是字符串格式而非 JavaScript 对象,语法严格(键名必须双引号、禁尾逗号、不支持函数等),解析需 try...catch,序列化会忽略 undefined/function/symbol 等值,与 localStorage/fetch 配合时须显式 stringify/parse。

JSON 是什么:不是 JavaScript 对象,是字符串格式
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,本质是**字符串**,不是对象。你看到的 { "name": "Alice", "age": 30 } 看似像 JS 对象,但只要它没被解析,就只是文本——这点常被误判,导致直接用点号访问报错:TypeError: Cannot read property 'name' of undefined。
它的语法比 JS 对象更严格:键名必须用双引号,不允许尾逗号,不能有函数、undefined、Date、RegExp 等值。
JSON.parse():解析失败时不会静默,必须捕获错误
JSON.parse() 把 JSON 字符串转为 JS 值。但它对非法格式零容忍,哪怕多一个空格或单引号都会抛 SyntaxError。
- 常见错误输入:
'{ name: "Alice" }'(键没双引号)、'{"age": }'(值缺失)、'{"time": new Date()}'(非法类型) - 务必用
try...catch包裹,尤其处理用户输入或第三方 API 返回时 - 可传入第二个参数
reviver函数,在解析过程中转换值,比如把 ISO 时间字符串转成Date对象
try {
const data = JSON.parse('{"name":"Alice","created":"2024-01-01"}', (key, value) => {
if (key === 'created') return new Date(value);
return value;
});
console.log(data.created instanceof Date); // true
} catch (err) {
console.error('JSON 解析失败:', err.message);
}
JSON.stringify():会忽略某些值,且不保证顺序
JSON.stringify() 把 JS 值转为 JSON 字符串。但它有明确的“丢弃规则”:
立即学习“Java免费学习笔记(深入)”;
-
undefined、function、symbol值在对象中会被忽略(数组里变成null) -
NaN和Infinity转为null - 对象的原型链、getter/setter、循环引用会直接报错
TypeError: Converting circular structure to JSON - 键名顺序不保证(尽管现代引擎大多按定义顺序,但规范未强制)
如需处理循环引用或自定义序列化逻辑,得自己实现替换函数或用第三方库(如 flatted)。
const obj = { a: 1, b: undefined, c: () => {}, d: NaN };
console.log(JSON.stringify(obj)); // {"a":1}
const arr = [1, undefined, 3];
console.log(JSON.stringify(arr)); // [1,null,3]
和 localStorage / fetch 配合时的典型陷阱
这两个场景最常出错:
-
localStorage.setItem('user', { name: 'Alice' })→ 实际存的是[object Object],因为没调用JSON.stringify -
fetch('/api')返回的response.body是流,必须先调用response.json()(它内部用JSON.parse),而不是直接JSON.parse(response.body) -
response.json()也抛错,比如服务器返回了 200 但内容是 HTML(如错误页),就会触发SyntaxError
安全写法是始终检查响应状态再解析,并对存储操作显式加解包:
// 存
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
// 取
const userStr = localStorage.getItem('user');
const user = userStr ? JSON.parse(userStr) : null;
// fetch
fetch('/api')
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
JSON 的边界很清晰:只负责字符串 ↔ JS 值的无损映射。一旦涉及日期、二进制、循环引用或自定义类实例,就得自己补逻辑——别指望它自动理解业务含义。











