如何用JavaScript解析JSON数据

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，前后端交互时经常会用到JSON格式的数据。JavaScript原生提供了处理JSON的方法，无需额外引入库就能完成JSON数据的解析与生成。本文将详细介绍JavaScript中解析JSON数据的常用方法、注意事项以及实际使用示例。

JSON解析的核心方法

JavaScript中解析JSON数据主要使用JSON.parse()方法，该方法可以将符合JSON格式的字符串转换为对应的JavaScript对象或值。如果传入的字符串不符合JSON规范，该方法会抛出语法错误，因此使用时通常需要配合异常处理。

基本解析示例

下面是一个最简单的JSON字符串解析示例，我们将一个表示用户信息的JSON字符串转换为JavaScript对象：

// 定义符合JSON格式的字符串，注意属性名必须用双引号包裹
const jsonStr = '{"name": "张三", "age": 25, "isStudent": false, "hobbies": ["篮球", "阅读"]}';

try {
  // 使用JSON.parse()解析字符串
  const userObj = JSON.parse(jsonStr);
  console.log(userObj);
  // 输出：{ name: '张三', age: 25, isStudent: false, hobbies: [ '篮球', '阅读' ] }
  
  // 访问解析后的对象属性
  console.log(`用户姓名：${userObj.name}`); // 用户姓名：张三
  console.log(`用户年龄：${userObj.age}`); // 用户年龄：25
  console.log(`用户爱好：${userObj.hobbies.join('、')}`); // 用户爱好：篮球、阅读
} catch (error) {
  console.error('JSON解析失败：', error.message);
}

带reviver参数的复杂解析

JSON.parse()方法还支持第二个可选参数reviver，这是一个函数，会在每个键值对被解析后调用，可以用来转换解析后的值。比如我们可以把JSON中的日期字符串转换为Date对象，或者对数值做特殊处理：

// JSON字符串中包含日期字符串
const jsonWithDate = '{"title": "任务1", "createTime": "2024-05-20T08:30:00.000Z", "score": 95}';

try {
  const result = JSON.parse(jsonWithDate, (key, value) => {
    // 如果是createTime字段，转换为Date对象
    if (key === 'createTime') {
      return new Date(value);
    }
    // 如果是score字段，判断是否为数值类型后返回
    if (key === 'score' && typeof value === 'number') {
      return value >= 60 ? '及格' : '不及格';
    }
    // 其他字段直接返回原值
    return value;
  });
  
  console.log(result);
  // 输出：{ title: '任务1', createTime: 2024-05-20T08:30:00.000Z, score: '及格' }
  console.log(result.createTime instanceof Date); // true
} catch (error) {
  console.error('解析失败：', error.message);
}

解析异常的常见场景

并不是所有字符串都能被JSON.parse()正确解析，以下几种情况会导致解析失败：

• JSON字符串的属性名没有使用双引号，比如{name: "张三"}是错误的，正确应该是{"name": "张三"}
• 字符串中包含单引号包裹的属性名或字符串值，JSON规范只支持双引号
• 字符串末尾有多余的逗号，比如{"name": "张三",}会解析失败
• 包含undefined、函数、Symbol等JSON不支持的类型

下面的示例展示了错误JSON字符串的解析结果：

// 错误的JSON字符串，属性名没有双引号
const wrongJsonStr = "{name: '李四', age: 30}";

try {
  JSON.parse(wrongJsonStr);
} catch (error) {
  console.error('解析错误原因：', error.message);
  // 输出：解析错误原因： Unexpected token n in JSON at position 1
}

解析后的数据使用

JSON解析后得到的是普通的JavaScript对象或数组，可以像操作普通JS数据一样使用，比如遍历对象属性、筛选数组元素等：

// 解析JSON数组
const jsonArrayStr = '[{"id": 1, "product": "笔记本", "price": 4999}, {"id": 2, "product": "鼠标", "price": 89}]';

try {
  const productList = JSON.parse(jsonArrayStr);
  
  // 遍历数组打印商品信息
  productList.forEach(item => {
    console.log(`商品ID：${item.id}，名称：${item.product}，价格：${item.price}元`);
  });
  
  // 筛选价格大于100的商品
  const expensiveProducts = productList.filter(item => item.price > 100);
  console.log('价格大于100的商品：', expensiveProducts);
} catch (error) {
  console.error('解析失败：', error.message);
}

注意事项

在实际开发中解析JSON数据还需要注意以下几点：

• 不要信任来源不明的JSON字符串，恶意构造的JSON字符串可能会导致解析时出现安全问题，尽量只解析可信来源的数据
• 如果JSON数据来自服务端接口，建议先判断返回的状态码是否正确，再尝试解析响应内容
• 对于大体积的JSON数据，解析可能会占用较多内存，可根据实际需求做分片处理或者按需解析

拓展：JSON与对象的相互转换

除了JSON.parse()用于解析JSON字符串，JavaScript还提供了JSON.stringify()方法，可以将JavaScript对象转换为JSON格式的字符串，二者通常配合使用完成数据的序列化与反序列化：

const user = {
  name: "王五",
  age: 28,
  email: "test@ipipp.com"
};

// 对象转JSON字符串
const userJsonStr = JSON.stringify(user);
console.log(userJsonStr); 
// 输出：{"name":"王五","age":28,"email":"test@ipipp.com"}

// JSON字符串转对象（就是前面介绍的解析过程）
const parsedUser = JSON.parse(userJsonStr);
console.log(parsedUser.name); // 王五

JavaScriptJSON解析JSON.parse数据处理前端开发