devalue实战教程：如何轻松序列化Map、Set、BigInt等复杂数据类型
devalue实战教程如何轻松序列化Map、Set、BigInt等复杂数据类型【免费下载链接】devalueGets the job done when JSON.stringify cant项目地址: https://gitcode.com/gh_mirrors/de/devaluedevalue 是一个轻量级的 JavaScript 序列化库专治JSON.stringify搞不定的场景——Map、Set、BigInt、正则、日期、循环引用统统不在话下。本教程带你快速上手这个JSON.stringify 的替代方案从安装到实战10 分钟搞定复杂数据类型序列化。为什么 JSON.stringify 不够用先看看原生序列化的几个经典翻车现场数据类型JSON.stringify 的结果Map/Set{}内容全丢BigInt直接抛错 ❌undefined键被整个删掉NaN/Infinitynull循环引用抛出TypeError正则 / 日期只剩一个字符串如果你需要无损往返序列化后再还原出完全一致的值devalue 就是为此而生的。它由 Svelte 团队维护MIT 协议核心代码仅几个文件非常易读入口在 index.js序列化逻辑在src/stringify.js反序列化在src/parse.js。一键安装最快上手步骤通过任意包管理器安装即可npm install devalue如果你还想阅读源码或跑测试可以克隆仓库git clone https://gitcode.com/gh_mirrors/de/devalue核心用法stringify 与 parsestringify/parse的用法和 JSON 的完全对应直接替换即可import { stringify, parse } from devalue; const data { ids: new Set([1, 2, 3]), config: new Map([[theme, dark]]), bigNumber: 9007199254740993n }; const packed stringify(data); const restored parse(packed); // 和 data 完全一致Map 和 Set会被编码为带类型标签的数组如[Map, ...]、[Set, ...]BigInt编码为[BigInt,9007199254740993]还原时按标签重新构造类型和值都完整保留。它还能轻松处理这些钉子户循环引用obj.self obj也能正常序列化再还原重复引用[value, value]还原后仍是同一个对象引用相等♾️特殊数值NaN、Infinity、-0用内部哨兵值编码定义在src/constants.js往返不丢失Date、RegExp、URL、ArrayBuffer、TypedArray原生支持无需任何配置序列化 PromisestringifyAsync数据里有异步结果stringifyAsync会自动等待 Promise 并序列化其解析值const packed await stringifyAsync({ quick: data, slow: fetch(/api/slow).then((r) r.json()) });输出格式与stringify完全一致后续照常parse即可。自定义类型reducer 与 reviver想序列化自己的类实例给stringify传第二个参数reducer给parse传第二个参数reviver即可const packed stringify(new Vector(30, 40), { Vector: (v) v instanceof Vector [v.x, v.y] }); const vec parse(packed, { Vector: ([x, y]) new Vector(x, y) });reducer 返回真值即视为匹配reviver 负责按原样重建实例。这套机制在 README 中有完整示例也可以参考test/operations.test.js里的用法。unevalSSR 场景下的性能利器除了stringifydevalue 还提供了uneval直接把值变成一段 JavaScript 代码省去解析开销是服务端渲染SSR场景的首选。uneval({ message: hello }); // {message:hello}更关键的是安全uneval的输出做了转义能有效防止/script注入类 XSS 攻击——这一点JSON.stringify做不好。源码位于src/uneval.js安全细节见 README 的 XSS mitigation 一节。怎么选函数适用场景uneval输出体积最小适合 SSR 注入数据stringifyparse不方便 eval 的场景通用性最强序列化失败怎么排查遇到函数、Symbol 或未知对象时devalue 会抛出带path属性的错误直接告诉你问题值藏在数据的哪个位置catch (e) { console.log(e.path); // .object.array[0].get(key) }定位问题数据再补一个 reducer两分钟就能修复。小结devalue 是JSON.stringify的强力补充Map、Set、BigInt、正则、日期、循环引用一次搞定三个入口按需选择stringify/parse通用往返stringifyAsync处理 Promiseuneval面向 SSR自定义类型只需一对 reducer / reviver源码精简可读性极佳出问题可顺着src/stringify.js→src/parse.js一路查下去复杂数据类型序列化交给 devalue 就够了 【免费下载链接】devalueGets the job done when JSON.stringify cant项目地址: https://gitcode.com/gh_mirrors/de/devalue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考