首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript的JSON处理Map

JavaScript的JSON处理Map的弊端详解

2025-05-01 10:01:57 作者：堕落年代

这篇文章主要介绍了JavaScript的JSON处理Map的弊端,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

JavaScript的JSON处理Map的弊端

直接使用 Map 会遇到的问题及解决方案
直接使用 Map 会导致数据丢失，因为 JSON.stringify 无法序列化 Map。

以下是详细分析及解决方法：

问题复现

// 示例代码
const myMap = new Map();
myMap.set('user1', { name: 'Alice' });
myMap.set('user2', { name: 'Bob' });

// 保存 Map
utilts.setValuePlan('myMap', myMap); // 实际存储的是空对象 `{}`

// 读取 Map
const loadedMap = utilts.getValuePlan('myMap'); 
console.log(loadedMap); // 输出 `{}`，数据丢失！

根本原因

JSON.stringify 不支持 Map：Map 对象会被转换为空对象 {}，导致数据丢失。
JSON.parse 无法还原 Map：即使手动存储 Map 的内容，读取时也无法自动恢复为 Map。

解决方案（不修改存储函数）

方法 1：存储时手动转换 Map 为数组

在调用 setValuePlan 前将 Map 转换为数组，读取时再转回 Map。

示例代码

// 保存 Map
const myMap = new Map();
myMap.set('user1', { name: 'Alice' });
myMap.set('user2', { name: 'Bob' });

// 转换为数组 [[key1, value1], [key2, value2]]
const mapArray = Array.from(myMap.entries());
utilts.setValuePlan('myMap', mapArray); // ✅ 正确存储

// 读取时转回 Map
const loadedArray = utilts.getValuePlan('myMap') || [];
const loadedMap = new Map(loadedArray); // ✅ 恢复为 Map

方法 2：封装工具函数

创建 Map 专用的存取函数，隐藏转换逻辑。

示例代码

// 保存 Map
export function setMapValue(key, map) {
  const mapArray = Array.from(map.entries());
  utilts.setValuePlan(key, mapArray);
}

// 读取 Map
export function getMapValue(key) {
  const mapArray = utilts.getValuePlan(key) || [];
  return new Map(mapArray);
}

// 使用示例
const myMap = new Map();
myMap.set('user1', { name: 'Alice' });
setMapValue('myMap', myMap); // ✅ 存储

const loadedMap = getMapValue('myMap'); // ✅ 恢复

关键总结

步骤	操作	代码示例
存储	转换 Map 为数组	utilts.setValuePlan(key, Array.from(map.entries()))
读取	转换数组为 Map	new Map(utilts.getValuePlan(key))

注意事项

数据兼容性：确保旧数据是数组格式（如 [[key1, value1], [key2, value2]]）。
空值处理：读取时处理可能的 null 或无效数据：

const mapArray = utilts.getValuePlan(key) || [];

嵌套对象：如果 Map 的值包含不可序列化对象（如 Date），需额外处理。
通过手动转换 Map 和数组，可以在不修改现有存储函数的情况下安全使用 Map！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。