掌握 JavaScript 中的 JSON 处理：解析和字符串化

JavaScript JSON 处理：解析与字符串化详解

JSON (JavaScript 对象表示法) 是一种轻量级的数据交换格式，易于人类阅读和编写，也易于机器解析和生成。JavaScript 内置方法可实现 JSON 字符串与 JavaScript 对象的相互转换。

1. 解析 JSON 字符串

JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象。

语法

<code class="javascript">JSON.parse(text[, reviver]);</code>

• text：待解析的 JSON 字符串。
• reviver (可选)：一个函数，用于在返回解析后的对象之前对其进行转换。

示例

a. 简单解析

<code class="javascript">const jsonString = '{"name": "john", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // 输出：john
console.log(parsedData.age);  // 输出：30</code>

b. 使用 reviver 函数

立即学习“Java免费学习笔记（深入）”；

reviver 函数用于自定义解析过程。

<code class="javascript">const jsonString = '{"name": "john", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // 将出生年份转换为年龄
  }
  return value;
});
console.log(parsedData.birthYear); // 输出：34</code>

错误处理

务必使用 try...catch 块处理无效 JSON。

<code class="javascript">const invalidJson = "{name: 'john', age: 30}"; // 无效 JSON (键必须加引号)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("无效 JSON:", error.message);
}</code>

2. 字符串化 JavaScript 对象

JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

语法

<code class="javascript">JSON.stringify(value[, replacer[, space]]);</code>

• value：待字符串化的对象。
• replacer (可选)：一个函数或数组，用于过滤属性。
• space (可选)：添加缩进以提高可读性。

示例

a. 简单字符串化

<code class="javascript">const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // 输出：{"name":"john","age":30}</code>

b. 使用 replacer 函数

OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

下载

replacer 函数用于过滤或转换对象的属性。

<code class="javascript">const data = { name: "john", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // 排除密码
  return value;
});
console.log(jsonString); // 输出：{"name":"john","age":30}</code>

c. 添加缩进

space 参数用于格式化输出。

<code class="javascript">const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// 输出：
// {
//   "name": "john",
//   "age": 30
// }</code>

错误处理

对象中的循环引用会导致 JSON.stringify() 抛出错误。

3. 应用场景

a. 向服务器发送数据

将 JavaScript 对象转换为 JSON 字符串后再发送到 HTTP 请求中。

<code class="javascript">const data = { name: "john", age: 30 };
fetch("https://example.com/api", {
  method: "post",
  headers: { "content-type": "application/json" },
  body: JSON.stringify(data)
});</code>

b. 本地存储

使用 localStorage 以 JSON 格式保存和检索数据。

<code class="javascript">const data = { name: "john", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // 保存数据

const userData = JSON.parse(localStorage.getItem("user")); // 检索数据
console.log(userData.name); // 输出：john</code>

c. 深拷贝对象

使用 JSON 方法创建对象的深拷贝 (不适用于函数或循环引用)。

4. JSON 与 JavaScript 对象的差异

5. 总结

• 使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象。
• 使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串。
• JSON 在 Web 应用的数据交换中至关重要，尤其是在 API 和本地存储中。
• 始终处理 JSON 解析或字符串化过程中的错误。

熟练掌握 JSON 处理是构建现代数据驱动 Web 应用的关键技能。

作者：Abhay Singh Kathayat
全栈开发人员，精通前端和后端技术，使用多种编程语言和框架构建高效、可扩展且用户友好的应用。联系邮箱：kaashshorts28@gmail.com