如何在 JavaScript 中解析 JSON

JSON.parse()：将字符串转为对象

JSON.parse() 是 JavaScript 内置的 JSON 解析方法，将 JSON 字符串转换为 JavaScript 对象（或数组、原始值）。这是处理 API 响应、读取 JSON 配置等场景的基础操作。

// 基本解析 / Basic parsing
const jsonStr = '{"name": "Alice", "age": 30}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // "Alice"
console.log(obj.age);  // 30

// 解析数组 / Parsing arrays
const arr = JSON.parse('[1, 2, 3]');
console.log(arr[0]); // 1

// 解析嵌套结构 / Parsing nested structures
const nested = JSON.parse('{"user": {"name": "Bob", "scores": [95, 87]}}');
console.log(nested.user.scores[0]); // 95

JSON.stringify()：将对象转为字符串

JSON.stringify() 是 JSON.parse() 的逆操作，将 JavaScript 值转换为 JSON 字符串。第二个参数可以是 replacer（过滤/转换字段），第三个参数是缩进字符数（用于格式化）：

const obj = { name: "Alice", age: 30, joined: new Date() };

// 基本序列化 / Basic serialization
JSON.stringify(obj);
// '{"name":"Alice","age":30,"joined":"2025-01-01T00:00:00.000Z"}'

// 格式化输出（2空格缩进）
JSON.stringify(obj, null, 2);

// 只包含特定字段（replacer 为数组）
JSON.stringify(obj, ['name', 'age']);
// '{"name":"Alice","age":30}'

// 自定义转换（replacer 为函数）
JSON.stringify(obj, (key, value) => {
  if (typeof value === 'number') return value * 2;
  return value;
});

错误处理：JSON.parse 的异常捕获

JSON.parse() 在遇到无效 JSON 时会抛出 SyntaxError，必须用 try-catch 处理：

// 安全解析函数 / Safe parse function
function tryParseJSON(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    console.error('JSON parse error:', e.message);
    return null;
  }
}

// 带默认值的解析 / Parse with default value
function parseJSONWithDefault(str, defaultValue = {}) {
  try {
    return JSON.parse(str);
  } catch {
    return defaultValue;
  }
}

Fetch API 中的 JSON 处理

现代浏览器的 Fetch API 提供了 response.json() 方法，自动处理 JSON 解析：

// GET 请求
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json(); // 自动解析 JSON
}

// POST 请求发送 JSON
async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData), // 序列化请求体
  });
  return response.json();
}

JSON 的数据类型限制

JavaScript 与 JSON 的类型对应关系有一些需要注意的地方：Date 对象：JSON.stringify() 会将 Date 转换为 ISO 8601 字符串（如 "2025-01-01T00:00:00.000Z"），JSON.parse() 不会自动将其还原为 Date 对象，需要手动转换。undefined：JSON 中没有 undefined，JSON.stringify() 会忽略值为 undefined 的属性。函数：JSON 不支持函数，序列化时会忽略。NaN 和 Infinity：会被序列化为 null。

JSON Reviver：自定义解析逻辑

JSON.parse() 的第二个参数是 reviver 函数，允许在解析过程中对每个键值对进行自定义转换，常用来自动将日期字符串还原为 Date 对象：

const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;

function dateReviver(key, value) {
  if (typeof value === 'string' && dateRegex.test(value)) {
    return new Date(value);
  }
  return value;
}

const data = JSON.parse(jsonStr, dateReviver);
// 日期字段自动变为 Date 对象
console.log(data.createdAt instanceof Date); // true

处理大数字：BigInt 和精度问题

JavaScript 的 Number 类型最多精确表示 15-16 位十进制整数（Number.MAX_SAFE_INTEGER = 9007199254740991）。超过此范围的整数（常见于后端生成的雪花 ID 等）会在 JSON.parse() 时失去精度。

解决方案：让后端将大整数作为字符串返回；或者使用专门处理大数字的 JSON 库（如 json-bigint），它们在解析时将大数字转换为 BigInt 类型。这是与某些后端（特别是使用 64 位整数 ID 的 Java/.NET 后端）交互时需要注意的重要细节。