昆山便宜做网站正规的计算机培训机构

直接使用 Map 会遇到的问题及解决方案

直接使用 Map 会导致数据丢失，因为 JSON.stringify 无法序列化 Map。以下是详细分析及解决方法：

---

1. 问题复现

// 示例代码
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); // 输出 `{}`，数据丢失！

---

2. 根本原因
   • 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))

---

注意事项

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

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

3. 嵌套对象：如果 Map 的值包含不可序列化对象（如 Date），需额外处理。

---

通过手动转换 Map 和数组，可以在不修改现有存储函数的情况下安全使用 Map！