首页 > web前端 > js教程 > 正文

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

碧海醫心
发布: 2024-12-17 22:43:23
原创
1080人浏览过

掌握 javascript 中的 json 处理:解析和字符串化

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

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

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); // 输出:john
console.log(parsedData.age);  // 输出:30
登录后复制

b. 使用 reviver 函数

立即学习Java免费学习笔记(深入)”;

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

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。

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 字符串。

语法

JSON.stringify(value[, replacer[, space]]);
登录后复制
  • value:待字符串化的对象。
  • replacer (可选):一个函数或数组,用于过滤属性。
  • space (可选):添加缩进以提高可读性。

示例

a. 简单字符串化

const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // 输出:{"name":"john","age":30}
登录后复制

b. 使用 replacer 函数

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

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}
登录后复制

c. 添加缩进

space 参数用于格式化输出

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 请求中。

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)); // 保存数据

const userData = JSON.parse(localStorage.getItem("user")); // 检索数据
console.log(userData.name); // 输出:john
登录后复制

c. 深拷贝对象

使用 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中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号