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

JavaScript 中的 JSON 处理（解析和字符串化）

JSON（JavaScript 对象表示法）是一种轻量级数据交换格式，易于人类阅读和编写，也易于机器解析和生成。 JavaScript 提供了内置方法用于将 JSON 字符串解析为对象以及将对象转换为 JSON 字符串。

---

1.解析 JSON 字符串

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

语法

JSON.parse(text[, reviver]);

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

示例

A.简单解析

const jsonString = '{"name": "John", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // Output: John
console.log(parsedData.age);  // Output: 30

B.使用 Reviver 功能
reviver 函数可用于自定义解析过程。

const jsonString = '{"name": "John", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // Convert birth year to age
  }
  return value;
});
console.log(parsedData.birthYear); // Output: 34

错误处理

始终将 JSON.parse() 包装在 try...catch 块中以处理无效的 JSON。

const invalidJson = "{name: 'John', age: 30}"; // Invalid JSON (keys must be in quotes)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

---

2.字符串化 JavaScript 对象

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

语法

JSON.stringify(value[, replacer[, space]]);

• value：要字符​​串化的对象。
• Replacer（可选）：用于过滤属性的函数或数组。
• 空格（可选）：添加缩进以提高可读性。

示例

A.简单的字符串化

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // Output: {"name":"John","age":30}

B.使用替换函数
替换函数过滤或转换对象的属性。

const data = { name: "John", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // Exclude passwords
  return value;
});
console.log(jsonString); // Output: {"name":"John","age":30}

C.添加缩进
space 参数使用缩进格式化输出。

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// Output:
// {
//   "name": "John",
//   "age": 30
// }

错误处理

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

const circularObject = {};
circularObject.self = circularObject;
try {
  JSON.stringify(circularObject);
} catch (error) {
  console.error("Cannot stringify circular object:", error.message);
}

---

3.实际用例

A.向服务器发送数据

在 HTTP 请求中发送 JavaScript 对象之前将其转换为 JSON 字符串。

const data = { name: "John", age: 30 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

B.将数据存储在本地存储

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

const data = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // Storing data

const userData = JSON.parse(localStorage.getItem("user")); // Retrieving data
console.log(userData.name); // Output: John

C.深度复制对象

使用 JSON 方法创建对象的深层副本（不适用于函数或循环引用）。

JSON.parse(text[, reviver]);

---

4. JSON 和 JavaScript 对象之间的差异

JSON	JavaScript Object
Text format (string)	In-memory data structure
Keys must be strings (quoted)	Keys can be strings or symbols
Cannot store methods/functions	Can store methods/functions

---

5.总结

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

掌握 JSON 处理是构建现代数据驱动的 Web 应用程序的一项重要技能。

嗨，我是 Abhay Singh Kathayat！
我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的 JSON 处理：解析和字符串化的详细内容。更多信息请关注PHP中文网其他相关文章！