当前位置：首页 > news >正文

JavaScript的JSON处理Map的弊端

news 来源：原创 2025/4/24 15:04:51

直接使用 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），需额外处理。