json.parse怎么用

JSON.parse()：轻松解析JSON字符串的JavaScript指南

在JavaScript开发中,我们经常需要处理数据交换，而JSON（JavaScript Object Notation）作为轻量级的数据交换格式，因其简洁、易读的特性被广泛应用，但JSON数据在网络传输或存储时通常以字符串形式存在，我们需要将其转换为JavaScript对象或数组才能进行操作，这时，JSON.parse()方法就派上了用场，本文将详细介绍JSON.parse()的用法、注意事项及实际应用场景，帮你轻松JSON字符串解析技巧。

什么是JSON.parse()？

JSON.parse()是JavaScript内置的全局方法，属于JSON对象的一个静态方法，它的核心作用是：将符合JSON格式的字符串解析（转换）为对应的JavaScript值或对象，就是把“看起来像JSON的文本”变成“真正能用的JS数据”。

基本语法

JSON.parse()的基本语法非常简单：

JSON.parse(text[, reviver])

参数说明

text（必需）：要解析的JSON格式字符串，如果传入的字符串不符合JSON格式，会抛出SyntaxError错误。
reviver（可选）：一个转换函数（或称“修复函数”），该方法会在解析过程中对每个键值对调用一次，可以通过返回值修改解析后的值，或决定是否保留该键值对。

核心用法与示例

解析简单JSON字符串（基本数据类型）

JSON字符串可以表示JavaScript的基本数据类型（字符串、数字、布尔值、null），解析后会直接对应转换为JS的同类型值。

// 解析字符串
const str = '"Hello, JSON!"';
const parsedStr = JSON.parse(str);
console.log(parsedStr);        // 输出: "Hello, JSON!"（字符串类型）
console.log(typeof parsedStr); // 输出: "string"
// 解析数字
const numStr = '123.45';
const parsedNum = JSON.parse(numStr);
console.log(parsedNum);        // 输出: 123.45（数字类型）
console.log(typeof parsedNum); // 输出: "number"
// 解析布尔值
const boolStr = 'true';
const parsedBool = JSON.parse(boolStr);
console.log(parsedBool);        // 输出: true（布尔类型）
console.log(typeof parsedBool); // 输出: "boolean"
// 解析null
const nullStr = 'null';
const parsedNull = JSON.parse(nullStr);
console.log(parsedNull);        // 输出: null
console.log(typeof parsedNull); // 输出: "object"（注意：typeof null返回"object"是JS的历史特性）

解析JSON对象（复杂结构）

最常见的场景是解析JSON对象字符串,转换为JS对象。

const userStr = '{"name":"张三","age":30,"isStudent":false,"hobbies":["阅读","游泳"]}';
const userObj = JSON.parse(userStr);
console.log(userObj);
// 输出: { name: '张三', age: 30, isStudent: false, hobbies: ['阅读', '游泳'] }
console.log(userObj.name);     // 输出: "张三"
console.log(userObj.hobbies[1]); // 输出: "游泳"

解析JSON数组

JSON数组字符串会被转换为JS数组,数组元素可以是基本类型或嵌套的对象/数组。

const dataStr = '[1,"two",{"key":"value"},[3,4,5]]';
const dataArray = JSON.parse(dataStr);
console.log(dataArray);
// 输出: [1, "two", { key: "value" }, [3, 4, 5]]
console.log(dataArray[2].key); // 输出: "value"
console.log(dataArray[3][1]);   // 输出: 4

使用reviver函数修改解析结果

reviver函数允许我们在解析过程中对数据进行自定义处理，该函数接收两个参数：key（当前处理的键名）和value（当前处理的值），并返回修改后的值，如果返回undefined，则该键值对会被忽略。

示例1：日期字符串转换为Date对象

假设JSON字符串中存储了日期格式的字符串,我们希望解析时直接转换为Date对象：

const dateStr = '{"event":"会议","date":"2023-10-01T10:00:00Z"}';
const dateObj = JSON.parse(dateStr, (key, value) => {
  if (key === 'date') {
    return new Date(value); // 将日期字符串转换为Date对象
  }
  return value; // 其他键值对保持不变
});
console.log(dateObj.date);       // 输出: 2023-10-01T10:00:00.000Z（Date对象）
console.log(dateObj.date instanceof Date); // 输出: true

示例2：过滤空值或敏感字段

假设JSON对象中有一些不需要的字段（如password），我们可以通过reviver过滤掉：

const userStr = '{"username":"李四","password":"123456","email":"lisi@example.com"}';
const safeUser = JSON.parse(userStr, (key, value) => {
  if (key === 'password') {
    return undefined; // 过滤掉password字段
  }
  return value;
});
console.log(safeUser);
// 输出: { username: '李四', email: 'lisi@example.com' }

常见错误与注意事项

使用JSON.parse()时，如果不注意格式规范，很容易抛出错误，以下是几个常见的“坑”：

传入非JSON格式的字符串

JSON.parse()要求字符串严格符合JSON标准，否则会抛出SyntaxError，常见的格式错误包括：

使用单引号（JSON标准要求双引号）
属性名不加引号
末尾有多余的逗号

// 错误示例1：使用单引号
const invalidStr1 = "{'name':'张三'}";
// JSON.parse(invalidStr1); // 抛出 SyntaxError: Unexpected token ' in JSON
// 错误示例2：属性名不加引号
const invalidStr2 = {name:"张三"}; // 注意：这不是字符串，但若写成字符串形式（如"{name:'张三'}"）也会报错
// JSON.parse("{name:'张三'}"); // 抛出 SyntaxError: Unexpected token n
// 错误示例3：数组末尾有多余逗号
const invalidStr3 = "[1,2,3,]";
// JSON.parse(invalidStr3); // 抛出 SyntaxError: Unexpected token ] in JSON at position 7

解决方法：确保JSON字符串使用双引号包裹属性名和字符串值，且没有多余的逗号，如果不确定格式，可以通过JSON.stringify()将JS对象转换为标准JSON字符串，再解析回来验证。

忽略循环引用

如果JS对象存在循环引用（如对象自身的某个属性指向自己），直接用JSON.stringify()转换为字符串时会报错，自然也无法用JSON.parse()解析。

const obj = {};
obj.self = obj; // 循环引用
const circularStr = JSON.stringify(obj); // 抛出 TypeError: Converting circular structure to JSON
// JSON.parse(circularStr); // 不会执行，因为上一步已报错

解决方法：处理循环引用需要特殊逻辑（如使用WeakMap标记已访问对象），或避免在存在循环引用的数据中使用JSON序列化/反序列化。

安全风险：JSON注入

如果JSON.parse()的输入来源不可信（如用户输入），恶意构造的JSON字符串可能导致“JSON注入”攻击（如篡改数据、执行恶意代码），虽然JSON.parse()本身不会执行JS代码，但解析后的对象可能被误用于危险操作。

// 恶意输入示例：覆盖对象属性
const maliciousInput = '{"__proto__":{"polluted":"恶意数据"}}';
const obj = {}; // 空对象
JSON.parse(maliciousInput); // 解析后，obj.__proto__.polluted被污染
console.log(obj.polluted);   // 输出: "恶意数据"（可能影响其他对象）

解决方法：对输入进行严格校验，或使用安全的解析库（如flatted）处理不可信数据。

实际应用场景

接收API响应

前端通过fetch或axios请求后端API时，响应体通常是JSON字符串，需要用JSON.parse()解析为JS对象：

fetch('https://api.example.com/users')
  .then(response => response.text()) // 先获取文本形式的响应
  .then(jsonStr => JSON.parse(jsonStr)) // 解析为JS对象
  .then(users => console.log(users))
  .catch(error => console.error('解析失败:', error));

本地存储数据

浏览器`localStorage

正文