JavaScript中的JSON序列化与反序列化有哪些高级技巧?

掌握JSON序列化与反序列化的高级技巧,能有效处理复杂数据。1. 使用replacer函数可过滤敏感字段(如password)、转换日期为ISO格式,并预处理循环引用,避免序列化错误。2. reviver函数在反序列化时可自动将日期字符串还原为Date对象,或重建类实例,提升数据恢复精度。3. 针对循环引用,可通过WeakSet跟踪已见对象,返回“[Circular]”标识,防止JSON.stringify报错。4. 原生不支持Map、Set、Symbol和函数的序列化,但可用Array.from转换Map和Set,函数则通过字符串存储并谨慎使用eval还原。5. 自定义toJSON方法允许对象控制自身序列化行为,适合封装在类中,实现更内聚的数据输出逻辑。综合运用这些方法,可在保证安全与性能的前提下,扩展JSON处理能力,应对复杂场景。

javascript中的json序列化与反序列化有哪些高级技巧?

JavaScript中的JSON序列化与反序列化不只是JSON.stringify()JSON.parse()的简单调用。掌握一些高级技巧,能帮助你更灵活地处理复杂数据结构、避免常见陷阱,并提升性能和安全性。

1. 使用 replacer 函数精细控制序列化内容

在调用JSON.stringify()时,第二个参数可以传入一个replacer函数,用于决定哪些属性应该被序列化。

这个技巧特别适合过滤敏感字段或转换特定类型的数据。

排除某些字段:比如去掉对象中的passwordtoken 转换日期:将Date对象转为ISO字符串 处理循环引用前的预处理示例:

const user = {  name: "Alice",  password: "secret123",  lastLogin: new Date()};const json = JSON.stringify(user, (key, value) => {  if (key === 'password') return undefined; // 过滤掉  if (value instanceof Date) return value.toISOString();  return value;});// 结果不包含 password,日期为标准格式

2. 利用 reviver 函数在反序列化时重建对象

JSON.parse()的第二个参数是reviver函数,可用于在解析过程中转换值。

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

常用于将字符串化的日期自动还原为Date对象,或重构类实例。

示例:自动识别并恢复日期

const data = '{"name":"Bob","createdAt":"2023-08-15T10:00:00.000Z"}';const obj = JSON.parse(data, (key, value) => {  if (typeof value === 'string' && /^d{4}-d{2}-d{2}Td{2}:d{2}:d{2}/.test(value)) {    return new Date(value);  }  return value;});// obj.createdAt 是 Date 实例

3. 处理循环引用(Circular References)

默认情况下,包含循环引用的对象调用JSON.stringify()会抛出错误。

解决方法包括使用第三方库或自定义replacer来跳过重复引用。

手动处理循环引用的 replacer:

function getCircularReplacer() {  const seen = new WeakSet();  return (key, value) => {    if (typeof value === 'object' && value !== null) {      if (seen.has(value)) {        return '[Circular]';      }      seen.add(value);    }    return value;  };}const obj = { name: "John" };obj.self = obj;console.log(JSON.stringify(obj, getCircularReplacer())); // 输出:{"name":"John","self":"[Circular]"}

4. 序列化 Map、Set、Symbol 和函数的替代方案

原生 JSON 不支持 Map、Set、Symbol 和函数,但可以通过replacerreviver模拟序列化。

Map 可转为数组对:Array.from(map) Set 可转为数组:Array.from(set) 函数可保存为字符串,在reviver中用evalnew Function还原(注意安全风险)示例:序列化 Map

const map = new Map([['a', 1], ['b', 2]]);const str = JSON.stringify(Array.from(map)); // "[["a",1],["b",2]]"// 反序列化const recovered = new Map(JSON.parse(str));

5. 自定义 toJSON 方法实现对象级控制

任何对象都可以定义toJSON()方法,该方法会在JSON.stringify()执行时被自动调用。

这比外部replacer更内聚,适合封装在类中。

示例:为类定制输出格式

class User {  constructor(name, email, password) {    this.name = name;    this.email = email;    this.password = password;  }  toJSON() {    return {      name: this.name,      email: this.email,      role: 'user'    };  }}const user = new User("Tom", "tom@example.com", "pass");console.log(JSON.stringify(user)); // {"name":"Tom","email":"tom@example.com","role":"user"}

基本上就这些。合理使用 replacer、reviver 和 toJSON,再配合类型转换逻辑,就能应对大多数复杂场景。关键是理解 JSON 的边界,并在必要时扩展它的能力。

以上就是JavaScript中的JSON序列化与反序列化有哪些高级技巧?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1523392.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何构建一个支持多租户的云函数平台?
上一篇 2025年12月20日 15:52:55
JavaScript 的调试技巧:如何高效地使用断点与性能分析器?
下一篇 2025年12月20日 15:53:03

相关推荐

  • Java从文本文件随机读取并打印指定行数内容

    本文旨在指导读者如何使用java程序从文本文件中高效地读取多组固定行数的内容(如诗歌),并随机选择其中一组进行打印。教程将详细介绍如何利用`files.readalllines`、`random`和`list.sublist`等核心api,实现文件的整体读取、随机索引的生成以及特定内容块的提取与输出…

    2026年9月20日
    000
  • mysql如何启用query cache

    MySQL 5.7及之前版本可通过配置启用Query Cache以提升读取性能,首先确认支持性:执行SHOW VARIABLES LIKE ‘have_query_cache’,若返回YES则可继续。接着在my.cnf或my.ini的[mysqld]段添加query_cach…

    2026年9月20日
    200
  • edge浏览器”编写”功能(Copilot)怎么帮你润色文案_edge浏览器AI写作助手使用教程

    答案:通过Edge浏览器内置Copilot可实现文案润色。依次开启AI功能、登录账户,在文本框右键选择“使用Copilot改写”,可选正式、简短等语气风格,或通过侧边栏批量处理内容,提升写作效率。 如果您在撰写网页内容或文档时希望获得智能建议和语言优化,可以借助 Microsoft Edge 浏览器…

    2026年9月20日
    100
  • 如何为VSCode配置LaTeX环境,使其成为撰写学术论文的利器?

    首先安装LaTeX发行版和VSCode插件LaTeX Workshop,再配置XeLaTeX+BibTeX编译链,最后利用实时预览、反向搜索和代码片段等功能实现高效学术写作。 要在 VSCode 中配置 LaTeX 环境,打造高效的学术写作工具,关键在于正确安装和集成相关插件与编译工具。整个过程不复…

    2026年9月20日
    600
  • 小米Civi 3前置摄像头像素是多少 小米Civi 3自拍模式优化技巧

    小米Civi 3前置双3200万像素摄像头,配备78°f/2.0光圈主摄和100°超广角镜头,支持AF对焦与AI畸变矫正;通过切换镜头、开启4K拍摄、调节美颜、优化光线及启用EIS防抖,可显著提升自拍与Vlog画质表现。 小米Civi 3的前置摄像头配置在同级别中非常突出,自拍表现力强,配合一些使用…

    2026年9月20日
    100
  • Safari浏览器无法切换账号怎么办 Safari浏览器账号切换异常解决方法

    无法切换账号通常与系统设置、iCloud状态或缓存有关;2. 确保启用快速用户切换以实现多用户登录;3. 检查iCloud账户登录状态并同步Safari数据;4. 清除网站数据或使用无痕模式排除缓存问题。 如果你在使用Safari浏览器时遇到无法切换账号或切换异常的问题,这通常与系统用户设置、iCl…

    2026年9月20日
    100
  • 美篇如何添加背景音乐

    首先通过美篇内置音乐库或本地导入音频添加背景音乐,再调整自动播放与音量设置,确保阅读体验沉浸且不突兀。 如果您在编辑美篇文章时希望增加背景音乐以提升阅读体验,但不清楚具体操作步骤,可以按照以下方法进行设置。背景音乐能够为图文内容增添氛围,使读者获得更沉浸的浏览感受。 本文运行环境:iPad Air,…

    2026年9月20日
    100
  • PHP播放HLS视频流的方法_PHP播放HLS视频流方法

    答案:PHP通过权限控制和文件代理实现HLS流安全分发,前端使用HTML5视频标签和hls.js播放。具体描述:HLS将视频切为.ts片段并用.m3u8索引,PHP后端可校验用户权限、防止盗链,动态输出.m3u8或.ts内容;前端通过video标签加载stream.php?id=1,结合hls.js…

    2026年9月20日
    000
  • Java类的初始化顺序是怎样的 静态代码块和构造代码块先后

    Java类初始化顺序为:父类静态成员→子类静态成员→父类实例成员→父类构造函数→子类实例成员→子类构造函数,静态代码块仅加载时执行一次,构造代码块每次创建对象时执行,且均按书写顺序运行。 Java类的初始化顺序遵循一定的规则,理解这些顺序对掌握对象创建过程非常重要。当一个类被加载并创建实例时,各个代…

    2026年9月20日
    100
  • VSCode有哪些必备的插件?

    EditorConfig for VS Code统一代码风格,2. Prettier自动格式化多语言代码,3. ESLint检查JS/TS错误并集成Prettier,4. GitLens增强Git可视化,5. Path Intellisense补全文件路径,6. 括号高亮提升嵌套识别,7. Auto…

    2026年9月20日
    1000
  • Via浏览器怎么让地址栏显示完整的网址链接_Via浏览器显示完整网址的设置方法

    1、打开Via浏览器设置,进入高级设置中的地址栏选项,开启“显示完整网址”功能;2、在外观设置中关闭简洁模式或极简地址栏,以恢复协议头和路径显示;3、高级用户可借助自定义脚本强制输出完整URL,通过工具箱添加执行脚本实现。 如果您在使用Via浏览器时发现地址栏默认只显示域名而隐藏了完整的网址链接,可…

    2026年9月20日
    000
  • win11快速启动功能是灰色的无法更改怎么办_win11快速启动灰色无法修改解决方法

    1、快速启动选项灰色通常因休眠被禁用或组策略限制;2、通过管理员命令提示符执行powercfg /h on启用休眠;3、检查组策略中“要求使用快速启动”设置并调整为“未配置”;4、在电源选项中点击“更改当前不可用的设置”解锁选项;5、若仍无效,执行干净启动排除第三方软件冲突。 如果您尝试在Windo…

    2026年9月20日
    000
  • Java从文本文件随机读取多行连续内容的教程

    本教程旨在指导java开发者如何高效地从文本文件中随机读取并打印指定数量(例如5行)的连续内容,尤其适用于处理结构化文本块(如诗歌)。我们将探讨如何避免仅读取文件开头固定行数的局限,通过将文件内容一次性加载到内存并结合随机数生成器来精确选取所需的文本块,从而实现真正的随机性与灵活性。 引言与问题分析…

    2026年9月20日
    200
  • 如何调整VSCode的设置以获得最佳性能?

    合理配置VSCode可显著提升性能。1. 禁用不必要扩展,减少后台资源占用;2. 在settings.json中设置files.watcherExclude和search.exclude以降低CPU负载;3. 启用editor.renderLineHighlight和largeFileOptimiz…

    2026年9月20日
    500
  • ChatGPT代码会出错吗_AI编程中5个常见错误及解决方法

    AI编程中常见错误包括语法不匹配、逻辑遗漏、API误用、安全漏洞和集成困难,需通过版本明确、测试验证、文档核对、安全扫描和上下文补充等方式解决,结合人工审查与测试才能确保代码质量。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ ChatGP…

    2026年9月20日
    100
  • 或为《刺客信条:起源》相关!巴耶克与艾雅动捕同框

    面容虽被遮挡,但魅力依旧啊!AI 伴学 + 轻薄便携,联想小新平板 12.1,开售啦! 帅是帅,就是比较废指头 FK阿凯 1.4万 0 《刺客信条:起源》的粉丝们近日惊喜地发现,曾为巴耶克与艾雅配音并进行面部捕捉的演员——阿布巴卡尔·萨利姆(Abubakar Salim)与艾莉克斯·威尔顿·里根(A…

    2026年9月20日
    000
  • RBAC(基于角色的权限控制)实现方案

    rbac重要,因为它通过角色管理权限,简化了权限管理,提高了系统安全和管理效率。实现rbac时:1.设计数据库结构,定义用户、角色、权限表及中间表;2.在代码中实现权限检查和角色、权限的动态管理;3.优化性能,防止权限泄露,管理角色膨胀。 在探讨RBAC(基于角色的权限控制)实现方案之前,让我们先来…

    2026年9月20日
    000
  • 腾讯元宝AI便捷体验入口 腾讯元宝网页版在线入口

    腾讯元宝AI便捷体验入口为https://yuanbao.tencent.com,支持网页版、手机APP及微信小程序访问,提供智能问答、文档解析、内容生成等多功能服务。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 腾讯元宝AI便捷体验入口…

    2026年9月20日
    000
  • Android Activity与Fragment通信及视图访问的最佳实践

    本文旨在解决android开发中activity与fragment之间视图访问和数据通信的常见问题,特别是当使用bottom navigation activity模板时。我们将探讨为何不能直接在activity中访问fragment视图,并详细介绍如何利用fragment的生命周期方法(如`onv…

    2026年9月20日
    100
  • Redmi K70电池续航表现解析 Redmi K70充电优化技巧

    Redmi K70续航表现因使用习惯而异,重度使用亮屏5.5至6.5小时,日常通勤可撑一天;120W快充19分钟充满,建议随用随充、开启智能充电保护,并避免边充边玩大型游戏;通过开启自动亮度、降低分辨率至1.5K、限制后台高耗电应用可有效延长续航。 Redmi K70的续航到底怎么样,充电怎么用才最…

    2026年9月20日
    100

发表回复

登录后才能评论
关注微信