javascript JSON是什么_如何解析和序列化_技术教程

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":"2025-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 字符串。但它有明确的“丢弃规则”：

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));