js里如何解析json数据

JavaScript中解析JSON数据的完整指南

在JavaScript开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读、易解析的特性，已成为前后端数据交互的主流方式，无论是从API接口获取数据，还是读取本地配置文件，都离不开JSON数据的解析，本文将详细介绍JavaScript中解析JSON数据的多种方法、注意事项及最佳实践。

什么是JSON？

JSON是一种基于JavaScript对象语法的文本格式，用于表示结构化数据，它采用键值对（key-value pair）的方式组织数据，支持多种数据类型，包括：

• 基本类型：字符串（需用双引号包裹）、数字、布尔值（true/false）、null
• 复合类型：对象（无序键值对集合，用包裹）、数组（有序值列表，用[]包裹）

示例JSON数据：

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["语文", "数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  },
  "nullValue": null
}

核心方法：JSON.parse()与JSON.stringify()

JavaScript原生提供了两个核心方法处理JSON数据：JSON.parse()（解析JSON字符串为JavaScript对象）和JSON.stringify()（将JavaScript对象转换为JSON字符串），本文重点解析JSON.parse()的使用。

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

JSON.parse()是JavaScript中解析JSON字符串的标准方法，它接收一个JSON格式的字符串参数,返回对应的JavaScript对象或值。

基本语法

JSON.parse(text[, reviver])

• text：必需，要解析的JSON字符串。
• reviver：可选，一个转换函数，会在每个键值对解析完成后调用，可对值进行自定义处理。

示例：基本解析

const jsonString = '{"name": "李四", "age": 30}';
const obj = JSON.parse(jsonString);
console.log(obj); // { name: "李四", age: 30 }
console.log(obj.name); // "李四"
console.log(obj.age); // 30

示例：解析包含数组和嵌套对象的JSON

const complexJson = `
{
  "id": 1001,
  "hobbies": ["reading", "coding"],
  "contact": {
    "email": "lisi@example.com",
    "phone": "13800138000"
  }
}
`;
const data = JSON.parse(complexJson);
console.log(data.hobbies[0]); // "reading"
console.log(data.contact.email); // "lisi@example.com"

示例：使用reviver函数处理数据

假设我们需要将JSON中的日期字符串转换为Date对象：

const jsonWithDate = '{"name": "王五", "birthDate": "1990-01-01"}';
const dataWithDate = JSON.parse(jsonWithDate, (key, value) => {
  if (key === "birthDate") {
    return new Date(value); // 将日期字符串转为Date对象
  }
  return value;
});
console.log(dataWithDate.birthDate); // Sat Jan 01 1990 08:00:00 GMT+0800 (中国标准时间)
console.log(typeof dataWithDate.birthDate); // "object"

JSON.stringify()：反向操作（对象转JSON字符串）

虽然本文主题是“解析JSON”，但JSON.stringify()作为反向操作，常用于将JavaScript对象序列化为JSON字符串，以便存储或传输。

const obj = { name: "赵六", age: 28 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"赵六","age":28}'

常见错误及解决方案

使用JSON.parse()时，若传入不符合JSON格式的字符串，会抛出SyntaxError,以下是常见错误及处理方法：

错误1：JSON字符串使用单引号

JSON规范要求字符串必须用双引号（）包裹，单引号会导致解析失败。

const invalidJson = "{'name': '钱七'}"; // 错误：单引号
try {
  JSON.parse(invalidJson);
} catch (error) {
  console.error("解析失败:", error.message); // "Unexpected token ' in JSON"
}

解决：将单引号改为双引号。

const validJson = '{"name": "钱七"}';
JSON.parse(validJson); // 正确

错误2：属性名未用双引号或使用引号嵌套

JSON中属性名必须用双引号包裹，且不能出现单引号嵌套双引号的情况。

const invalidJson = "{name: '孙八'}"; // 错误：属性名无引号
const invalidJson2 = '{"name": "周九"'}; // 错误：引号不匹配

解决：确保所有属性名用双引号包裹，且引号正确闭合。

const validJson = '{"name": "周九"}';

错误3：结尾使用分号或逗号

JSON字符串结尾不能有分号（），对象或数组结尾也不能有多余的逗号（）。

const invalidJson = '{"name": "吴十",}'; // 错误：对象结尾逗号
const invalidJson2 = '{"name": "郑十一"};'; // 错误：字符串结尾分号

解决：删除多余的分号或逗号。

const validJson = '{"name": "郑十一"}';

错误4：使用JavaScript特有语法

JSON不支持JavaScript特有的语法，如函数、undefined、Date对象等。

const invalidJson = '{"name": "王十二", sayHello: function() {}}'; // 错误：函数
const invalidJson2 = '{"data": undefined}'; // 错误：undefined

解决：移除不支持的语法，或将其转换为JSON支持的格式（如函数转为字符串，undefined转为null）。

const validJson = '{"name": "王十二", "sayHello": "function() {}"}';
const validJson2 = '{"data": null}';

错误处理：使用try-catch捕获异常

实际开发中，需对可能无效的JSON字符串进行异常处理，避免程序中断。

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("JSON解析错误:", error);
    return null; // 或返回默认值
  }
}
const result = safeParse('{"name": "冯十三"}');
console.log(result); // { name: "冯十三" }
const errorResult = safeParse('invalid json');
console.log(errorResult); // null

进阶技巧

解析JSON时保留函数（非标准方法）

JSON标准不支持函数，但某些场景下需要保留函数（如本地存储配置），可通过eval()或正则处理（不推荐，有安全风险）：

const jsonWithFunction = '{"name": "陈十四", "log": "console.log(name)"}';
const obj = eval(`(${jsonWithFunction})`); // 危险！仅用于可信数据
obj.log(); // "陈十四"

注意：eval()会执行任意代码，仅确保数据来源可信时使用，推荐改用专门的库（如JSONfn）。

处理大JSON文件的性能优化

对于大JSON文件（如超过10MB），直接JSON.parse()可能导致内存问题，可考虑：

• 流式解析：使用JSONStream等库逐块解析。
• Web Worker：在独立线程中解析，避免阻塞主线程。

  // 示例：使用JSONStream流式解析
  const JSONStream = require('JSONStream');
  const fs = require('fs');

fs.createReadStream('large-data.json') .pipe(JSONStream.parse('*.items')) // 解析items数组 .on('data', (item) => { console.log(item); // 逐条处理 });

### 3. 自定义JSON解析行为
通过`reviver`函数，可实现复杂的数据转换，如：  
- 将`"1"`转为数字`1`（默认JSON.parse已处理）。  
- 将特定字段转为枚举值。  
```javascript
const json = '{"status": "active", "role": "admin"}';
const data = JSON.parse(json, (key, value) => {
  if (key === "status") {
    return value === "active" ? 1 : 0;