多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

devalue与JSON.stringify对比分析:10个关键差异点详解

devalue与JSON.stringify对比分析:10个关键差异点详解 devalue与JSON.stringify对比分析10个关键差异点详解【免费下载链接】devalueGets the job done when JSON.stringify cant项目地址: https://gitcode.com/gh_mirrors/de/devaluedevalue是一个轻量级 JavaScript 数据序列化库官方定位只有一句话Gets the job done when JSON.stringify cantJSON.stringify 搞不定时它能搞定。本文通过10 个关键差异点对比 devalue 与 JSON.stringify 在循环引用、特殊值、XSS 安全等场景下的真实表现帮你在选型时快速判断该不该换、怎么换。 对比总览一张表看懂差距场景JSON.stringify 的表现devalue 的表现循环引用❌ 抛Converting circular structure错误✅ 用索引引用完整还原NaN/Infinity/-0❌ 全部变成null✅ 哨兵值精确还原undefined❌ 对象属性里直接消失✅ 保留并可还原Map/Set❌ 变成空对象{}✅ 内容完整保留正则表达式❌ 变成{}匹配能力丢失✅ 保留 source 和 flagsDate⚠️ 变 ISO 字符串反序列化后是 string✅ 还原为真正的 Date 对象BigInt❌ 直接抛TypeError✅ 原生支持ArrayBuffer/ TypedArray❌ 变成{}✅ Base64 编码 视图支持XSS 防护❌/script原样输出可被注入✅ 自动转义危险字符自定义类型 / Promise❌ 无对应机制✅ reducers/revivers stringifyAsync 核心思路stringify/parse与JSON.stringify/JSON.parse一一对应API 心智负担几乎为零核心实现分别在src/stringify.js和src/parse.js。 10 个关键差异点详解1️⃣ 循环引用从直接报错到索引引用JSON.stringify 一遇到obj.self obj就抛错devalue 则把每个对象分配一个索引引用处只写索引号。例如自引用对象 stringify 后是[{message:1,self:0},hello]—— 其中的0表示指回第 0 项parse 后obj.self obj依然成立。2️⃣ NaN、Infinity、-0、undefined不再被吞掉JSON 里这些值要么变null要么直接丢失devalue 用一组哨兵常量编码-1undefined、-3NaN、-4Infinity、-6-0定义见src/constants.js反序列化时逐一精确还原Object.is(x, -0)都能通过。3️⃣ Map 与 Set从{}到完整保留JSON.stringify(new Set([a,b]))输出{}devalue 输出[Set,1,2],a,b这样的结构parse 后得到可继续 add/has/遍历的 Set。Map 同理键值对逐对还原。4️⃣ 正则表达式匹配能力不丢失JSON.stringify 把/abg/i变成{}devalue 输出[RegExp,ab,g]反序列化后是一个真正可用的正则source 与 flags 都在。5️⃣ Date字符串 vs 真日期对象JSON 路线下日期最终只是普通字符串devalue 用[Date,1970-01-01T00:00:00.000Z]打标parse 后是instanceof Date为真的日期对象链式调用getTime()等 API 不再需要自己判断。6️⃣ BigInt从抛错到原生支持JSON.stringify(10n)直接抛TypeErrordevalue 编码为[BigInt,10]跨前后端传大整数不再需要手写字符串中转。7️⃣ ArrayBuffer 与 TypedArray二进制也能传这两类值在 JSON 里统统变{}devalue 将 ArrayBuffer 编码为Base64TypedArray 直接复用底层 buffer 的引用还支持subarray这类子视图的正确还原。8️⃣ 重复引用去重输出更紧凑同一个对象在数据中出现多次时JSON.stringify 会完整拷贝多份devalue 通过引用表去重只序列化一次。uneval模式还会统计出现次数把高频对象提升为命名变量输出体积进一步压缩。9️⃣ XSS 防护服务端渲染的安全底线这是最容易被忽视的差异。把含用户输入的状态用 JSON.stringify 塞进script标签/script会原样输出、直接闭合标签注入恶意脚本devalue 会把、及行分隔符转义为\u003C等安全形式转义表见src/utils.js并且拒绝序列化函数、Symbol 和含__proto__的对象从源头堵死注入路径。 自定义类型 Promise 精准报错JSON 完全没有这三样能力reducers / revivers像 Vector 这样的自定义类也能序列化两端各传一份映射函数即可stringifyAsync直接序列化包含 Promise 的对象等待其 resolve 后把结果一并写入DevalueError.path序列化失败不再是一句模糊的报错而是精确路径如.object.array[0].get(key)定位问题一步到位。️ 两种使用方式stringify/parse 与 uneval模式输出形态适用场景stringify/parse标准 JSON外层数组不能用 eval 的环境如跨进程通信uneval可直接执行的 JS 代码追求最紧凑输出恢复数据无需任何解析代码uneval相当于 eval 的逆运算实现见src/uneval.js。注意用它从服务端发数据到客户端是安全的但不要用同样方式接收客户端回传的数据且 eval 时请使用间接调用以避免作用域泄露。 什么时候该用 devalue✅推荐场景服务端渲染如 SvelteKit向客户端传状态——devalue 正是 Svelte 生态出品内置 XSS 防护数据结构里含 Map、Set、Date、RegExp、BigInt需要序列化自引用对象或 Promise 结果⚠️谨慎场景跨语言传输JSON 可被任何语言解析devalue 输出面向 JS 运行时要求序列化格式跨版本稳定项目 README 的 Non-goals 明确声明不保证不同版本间的格式兼容需要人类可读的输出devalue 优先紧凑而非可读获取与运行本地 clone 仓库后可直接跑测试与基准测试git clone https://gitcode.com/gh_mirrors/de/devalue测试覆盖在test/目录性能对比脚本在benchmarking/目录方便你验证更紧凑、更快这两项目标是否成立。一句话总结如果你的数据长得像 JSON 但又不止于 JSONdevalue 值得放进工具链——它补上了 JSON.stringify 的 10 个缺口同时把安全默认值拉满了。【免费下载链接】devalueGets the job done when JSON.stringify cant项目地址: https://gitcode.com/gh_mirrors/de/devalue创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表