【前端基础】JSON 的常用方法详解

JSON 是前端开发中使用最广泛的数据格式之一，特别是在前后端交互、数据存储和状态管理中发挥着至关重要的作用。本文将全面解析 JSON 的两大核心方法 JSON.stringify 和 JSON.parse，并通过示例和实际应用场景，帮助你快速掌握其用法和注意事项。

一、JSON 是什么？

JSON，全称为 JavaScript Object Notation，是一种轻量级的数据交换格式，以键值对（Key-Value）的形式表示数据。它的设计初衷是为了简洁和易读，因此在前后端数据通信中被广泛采用。

以下是一个典型的 JSON 数据示例：

{
  "name": "Alice",
  "age": 25,
  "skills": ["JavaScript", "React", "CSS"],
  "isDeveloper": true
}

在前端开发中，JSON 通常用于：

• 与后端进行数据通信（如 AJAX 请求的响应数据）。
• 在浏览器中存储和操作数据（如 localStorage 和 sessionStorage）。
• 配置文件（如前端框架的配置）。

二、JSON 的两大核心方法

JSON.stringify()

方法概述

JSON.stringify() 用于将 JavaScript 对象或数组转换为 JSON 格式的字符串。

语法

JSON.stringify(value, replacer, space);

• value：要转换的 JavaScript 对象或值。
• replacer（可选）：一个函数或数组，用于筛选哪些属性会包含在 JSON 字符串中。
• space（可选）：指定输出的缩进格式，方便阅读。可以是数字（表示空格数）或字符串（表示缩进字符）。

示例 1：基本用法

const obj = { name: "Alice", age: 25, skills: ["JavaScript", "React"] };

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出：{"name":"Alice","age":25,"skills":["JavaScript","React"]}

示例 2：格式化输出

通过指定 space 参数，可以让 JSON 输出更加美观。

const formattedJson = JSON.stringify(obj, null, 2);
console.log(formattedJson);
/*
输出：
{
  "name": "Alice",
  "age": 25,
  "skills": [
    "JavaScript",
    "React"
  ]
}
*/

示例 3：筛选属性

使用 replacer 参数，可以选择性地包含某些属性。

const filteredJson = JSON.stringify(obj, ["name", "skills"]);
console.log(filteredJson);
// 输出：{"name":"Alice","skills":["JavaScript","React"]}

JSON.parse()

方法概述

JSON.parse() 用于将 JSON 格式的字符串转换为 JavaScript 对象。

语法

JSON.parse(text, reviver);

• text：要解析的 JSON 字符串。
• reviver（可选）：一个函数，用于在返回对象之前对其属性进行转换。

示例 1：基本用法

const jsonString = '{"name":"Alice","age":25,"skills":["JavaScript","React"]}';

const obj = JSON.parse(jsonString);
console.log(obj);
// 输出：{ name: 'Alice', age: 25, skills: [ 'JavaScript', 'React' ] }

示例 2：使用 reviver 参数

通过 reviver 函数可以对解析结果进行处理。

const jsonString = '{"name":"Alice","age":25,"skills":["JavaScript","React"]}';

const parsedObj = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + 5; // 修改年龄
  }
  return value;
});
console.log(parsedObj);
// 输出：{ name: 'Alice', age: 30, skills: [ 'JavaScript', 'React' ] }

三、JSON 方法的实际应用场景

场景 1：与 localStorage 配合使用

JSON 常用于存储和读取浏览器的本地数据。

const user = { name: "Alice", age: 25, isDeveloper: true };

// 存储数据
localStorage.setItem("user", JSON.stringify(user));

// 读取数据
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser);
// 输出：{ name: 'Alice', age: 25, isDeveloper: true }

场景 2：与后端交互

在前后端通信中，JSON 是默认的交换格式。以下是一个典型的 AJAX 请求示例：

fetch("https://api.example.com/user")
  .then((response) => response.json()) // 解析 JSON 格式的响应
  .then((data) => {
    console.log(data); // 使用 JavaScript 对象处理数据
  });

场景 3：格式化 JSON 数据

在调试过程中，可以使用 JSON.stringify 格式化 JSON 数据以便更好地观察。

const response = { status: "success", data: { id: 1, name: "Alice" } };

console.log(JSON.stringify(response, null, 2));
/*
输出：
{
  "status": "success",
  "data": {
    "id": 1,
    "name": "Alice"
  }
}
*/

四、常见注意事项

1. JSON 格式要求严格

• 属性名必须使用双引号包裹。
• 值可以是字符串、数字、布尔值、对象、数组或 null。
• JSON 不支持函数、undefined 或循环引用。

以下是一个无效的 JSON 示例：

{
  name: "Alice", // 属性名未加双引号
  age: undefined // 不支持 undefined
}

2. 防止 XSS 攻击

在解析外部数据时，务必确保数据来源可信。如果 JSON 数据包含脚本，可能会导致 XSS 漏洞。

3. 大数据处理

对于大型 JSON 数据，建议分批处理或使用流式解析，以减少内存消耗。

推荐：

• JavaScript
• react
• vue