JavaScript JSON 处理：解析与字符串化详解
JSON (JavaScript 对象表示法) 是一种轻量级的数据交换格式，易于人类阅读和编写，也易于机器解析和生成。JavaScript 内置方法可实现 JSON 字符串与 JavaScript 对象的相互转换。
1. 解析 JSON 字符串
JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象。
语法1
JSON.parse(text[, reviver]);
a. 简单解析
1
2
3
4
const jsonString = {"name": "john", "age": 30};
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // 输出：john
console.log(parsedData.age); // 输出：30
b. 使用 reviver 函数
立即学习“Java免费学习笔记（深入）”；
reviver 函数用于自定义解析过程。
1
2
3
4
5
6
7
8
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
务必使用 try...catch 块处理无效 JSON。
1
2
3
4
5
6
const invalidJson = "{name: john, age: 30}"; // 无效 JSON (键必须加引号)
try {
const data = JSON.parse(invalidJson);
} catch (error) {
console.error("无效 JSON:", error.message);
}
2. 字符串化 JavaScript 对象
JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
语法1
JSON.stringify(value[, replacer[, space]]);
a. 简单字符串化
1
2
3
const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // 输出：{"name":"john","age":30}
b. 使用 replacer 函数
replacer 函数用于过滤或转换对象的属性。
1
2
3
4
5
6
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}
space 参数用于格式化输出。
1
2
3
4
5
6
7
8
const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// 输出：
// {
// "name": "john",
// "age": 30
// }
对象中的循环引用会导致 JSON.stringify() 抛出错误。
3. 应用场景
a. 向服务器发送数据将 JavaScript 对象转换为 JSON 字符串后再发送到 HTTP 请求中。
1
2
3
4
5
6
const data = { name: "john", age: 30 };
fetch("https://example.com/api", {
method: "post",
headers: { "content-type": "application/json" },
body: JSON.stringify(data)
});
使用 localStorage 以 JSON 格式保存和检索数据。
1
2
3
4
5
const data = { name: "john", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // 保存数据
const userData = JSON.parse(localStorage.getItem("user")); // 检索数据
console.log(userData.name); // 输出：john
使用 JSON 方法创建对象的深拷贝 (不适用于函数或循环引用)。
4. JSON 与 JavaScript 对象的差异
JSON JavaScript 对象 文本格式 (字符串) 内存数据结构 键必须是字符串 (带引号) 键可以是字符串或 Symbol 无法存储方法/函数 可以存储方法/函数5. 总结
使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象。 使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串。 JSON 在 Web 应用的数据交换中至关重要，尤其是在 API 和本地存储中。 始终处理 JSON 解析或字符串化过程中的错误。熟练掌握 JSON 处理是构建现代数据驱动 Web 应用的关键技能。
作者：Abhay Singh Kathayat 全栈开发人员，精通前端和后端技术，使用多种编程语言和框架构建高效、可扩展且用户友好的应用。联系邮箱：kaashshorts28@gmail.com
以上就是掌握 JavaScript 中的 JSON 处理：解析和字符串化的详细内容，更多请关注php中文网其它相关文章！