JS Map 转 JSON 时键名丢失（仅支持字符串键），如何保留原始键类型？

Question

JS `Map` 对象支持任意类型键（如 `Object`、`Function`、`Symbol`、`null` 等），但标准 `JSON.stringify()` 仅序列化对象的**字符串键**，对 `Map` 直接调用会返回空对象 `{}`，导致键类型与值全部丢失。这是前端开发中典型的「序列化失真」问题：原始 `Map` 的结构语义（如引用键、唯一性保证、插入顺序）在 JSON 中无法原生表达。常见误方案包括 `Object.fromEntries(map)`（强制转为字符串键，`[object Object]` 冲突）、手动遍历拼接（易忽略 `undefined`/`NaN`/`Symbol` 键的正确序列化）。根本矛盾在于 JSON 规范本身不支持非字符串键，因此必须引入**自定义序列化协议**——例如将键类型编码为元信息（如 `{"_type": "object", "_value": "...", "data": ...}`），或采用 `Map` → `[key, value]` 数组 + 类型标记的双层序列化策略。实际工程中需配套反序列化逻辑，并权衡可读性、兼容性与性能。

Answer 1

```html

一、现象层：Map 序列化失真——JSON.stringify(Map) 为何返回 {}？

JavaScript 中 Map 是原生可迭代集合，其键支持任意类型（Object、Function、Symbol、null、undefined、甚至另一个 Map）。但 JSON.stringify(new Map([[{}, 'a']])) 恒返回 {}。原因在于：JSON 规范仅定义对象（Object）为“字符串键→值”的无序映射，而 Map 不是普通对象，且 JSON.stringify 对非 Object / Array / 基本类型值调用时，会跳过不可枚举属性，并忽略所有 Symbol 键与非字符串键。

二、机制层：为什么 Object.fromEntries(map) 不是解药？

• Object.fromEntries(map) 将 Map 转为普通对象，但强制调用 key.toString() —— 导致 {a:1} 和 {b:2} 全部变成 "[object Object]" 键，发生哈希冲突；
• Symbol('x') → toString() 得 "Symbol(x)"，看似可用，但反序列化时无法还原原始 Symbol 实例（Symbol 是唯一且不可序列化的）；
• null、undefined、NaN 键在转为字符串后分别成为 "null"、"undefined"、"NaN"，彻底丢失类型语义与运行时行为。

三、设计层：自定义序列化协议的三种主流范式对比

范式	序列化形式	优势	缺陷
双层数组 + 类型标记	[["object", "…", "value1"], ["symbol", "Symbol(foo)", "value2"]]	结构扁平、易解析、兼容性高、支持循环引用标注	体积略大，需预定义类型编码表
元数据对象封装	{"_map": true, "entries": [{"_type":"function","_hash":"fn-3a7f","data":"…"}	语义清晰、可扩展字段（如插入顺序索引、版本号）、便于调试	嵌套深，JSON Schema 难统一，部分工具链不友好
Hybrid（键标准化 + 侧信道映射）	{"keys": [0,1], "values": [...], "keyTypes": ["object","symbol"], "keyRepr": ["{a:1}","Symbol(foo)"]}	压缩率高、利于 diff/patch、支持增量同步	实现复杂，需维护多维索引一致性

四、工程层：生产就绪的双向序列化实现（含 Symbol/Function/null 支持）

// ✅ 支持全部键类型：null, undefined, Symbol, Object, Function, NaN, -0, BigInt
function serializeMap(map) {
  const entries = [];
  for (const [k, v] of map) {
    const type = k === null ? 'null' :
                 k === undefined ? 'undefined' :
                 typeof k === 'symbol' ? 'symbol' :
                 typeof k === 'function' ? 'function' :
                 typeof k === 'object' ? 'object' :
                 typeof k === 'bigint' ? 'bigint' :
                 typeof k;
    const repr = type === 'symbol' ? k.toString() :
                 type === 'function' ? k.toString() :
                 type === 'object' && k !== null ? JSON.stringify(k) : String(k);
    entries.push([type, repr, JSON.stringify(v, customReplacer)]);
  }
  return JSON.stringify({ _map: true, entries });
}

function deserializeMap(json) {
  const { _map, entries } = JSON.parse(json, customReviver);
  if (!_map) throw new Error('Not a serialized Map');
  const map = new Map();
  for (const [type, repr, valueJson] of entries) {
    let key;
    switch (type) {
      case 'null': key = null; break;
      case 'undefined': key = undefined; break;
      case 'symbol': key = Symbol.for(repr.slice(7, -1)); break; // Symbol.for("foo")
      case 'function': key = eval(`(${repr})`); break; // ⚠️ 仅限可信源
      case 'object': key = JSON.parse(repr); break;
      default: key = JSON.parse(`{"v":${repr}}`).v;
    }
    map.set(key, JSON.parse(valueJson, customReviver));
  }
  return map;
}

五、架构层：Map 序列化在微前端与跨平台通信中的演进路径

graph LR
  A[原始 Map] --> B{序列化策略选择}
  B --> C[轻量级：JSON+TypeTag]
  B --> D[强一致性：MessagePack+Schema]
  B --> E[长连接场景：Protocol Buffer+自定义 KeyEncoder]
  C --> F[前端 localStorage / postMessage]
  D --> G[Node.js 微服务间 IPC]
  E --> H[Electron 主进程 ↔ 渲染进程 / WASM 模块]
  F --> I[本地持久化 + 快速恢复]
  G --> J[分布式状态同步 + 版本兼容]
  H --> K[零拷贝内存共享 + 键引用保真]

六、陷阱层：被忽视的 5 大边界案例

1. Map 中含 WeakMap 或 Proxy 键 → 无法深克隆，需运行时代理拦截；
2. 键为 document.getElementById('x') → 序列化后反序列化无法还原 DOM 引用，必须转为 selector 字符串并延迟 resolve；
3. 多个 Map 共享同一对象键 → JSON 层面无法表达引用关系，需引入全局 ID 映射表（类似 JSON-LD @id）；
4. 使用 Map.prototype.forEach 迭代时隐式依赖插入顺序 → 若序列化未保留 entry 数组顺序，反序列化后语义破坏；
5. 服务端 Node.js 使用 v8.serialize() 可保留键类型，但前端不兼容 → 跨端必须收敛到 JSON 子集协议。

七、演进层：TC39 提案进展与替代技术栈

截至 2024 年，Stage 3 提案 JSON Modules 与 Structured Clone API 已被 Chrome/Firefox 支持，后者可通过 navigator.clipboard.writeText(JSON.stringify(structuredClone(map))) 实现无损克隆（但不可跨域/跨线程直接传输）。此外，WebAssembly 的 JS<->WASM 边界正推动 Map 的二进制序列化标准（如 serde_wasm_bindgen 在 Rust/WASM 中对 Map 的 zero-cost 绑定）。

```