直接使用 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！