JavaScript的JSON處理Map的弊端詳解
更新時間：2025年05月01日 10:01:57 作者：墮落年代
這篇文章主要介紹了JavaScript的JSON處理Map的弊端,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
JavaScript的JSON處理Map的弊端
- 直接使用
Map會遇到的問題及解決方案 - 直接使用
Map會導(dǎo)致數(shù)據(jù)丟失，因為JSON.stringify無法序列化Map。
以下是詳細(xì)分析及解決方法：
問題復(fù)現(xiàn)
// 示例代碼
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); // 輸出 `{}`，數(shù)據(jù)丟失！根本原因
JSON.stringify不支持Map：Map對象會被轉(zhuǎn)換為空對象{}，導(dǎo)致數(shù)據(jù)丟失。JSON.parse無法還原Map：即使手動存儲Map的內(nèi)容，讀取時也無法自動恢復(fù)為Map。
解決方案（不修改存儲函數(shù)）
方法 1：存儲時手動轉(zhuǎn)換 Map 為數(shù)組
在調(diào)用 setValuePlan 前將 Map 轉(zhuǎn)換為數(shù)組，讀取時再轉(zhuǎn)回 Map。
示例代碼
// 保存 Map
const myMap = new Map();
myMap.set('user1', { name: 'Alice' });
myMap.set('user2', { name: 'Bob' });
// 轉(zhuǎn)換為數(shù)組 [[key1, value1], [key2, value2]]
const mapArray = Array.from(myMap.entries());
utilts.setValuePlan('myMap', mapArray); // ? 正確存儲
// 讀取時轉(zhuǎn)回 Map
const loadedArray = utilts.getValuePlan('myMap') || [];
const loadedMap = new Map(loadedArray); // ? 恢復(fù)為 Map方法 2：封裝工具函數(shù)
創(chuàng)建 Map 專用的存取函數(shù)，隱藏轉(zhuǎn)換邏輯。
示例代碼
// 保存 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'); // ? 恢復(fù)關(guān)鍵總結(jié)
| 步驟 | 操作 | 代碼示例 |
|---|---|---|
| 存儲 | 轉(zhuǎn)換 Map 為數(shù)組 | utilts.setValuePlan(key, Array.from(map.entries())) |
| 讀取 | 轉(zhuǎn)換數(shù)組為 Map | new Map(utilts.getValuePlan(key)) |
注意事項
- 數(shù)據(jù)兼容性：確保舊數(shù)據(jù)是數(shù)組格式（如
[[key1, value1], [key2, value2]]）。 - 空值處理：讀取時處理可能的
null或無效數(shù)據(jù)：
const mapArray = utilts.getValuePlan(key) || [];
- 嵌套對象：如果
Map的值包含不可序列化對象（如Date），需額外處理。 - 通過手動轉(zhuǎn)換
Map和數(shù)組，可以在不修改現(xiàn)有存儲函數(shù)的情況下安全使用Map！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
給大家詳細(xì)著整理了在JavaScript開發(fā)中大家經(jīng)常遇到的BUG和問題，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
基于javascript制作經(jīng)典傳統(tǒng)的拼圖游戲
這篇文章主要為大家詳細(xì)介紹了基于javascript制作拼圖游戲的相關(guān)內(nèi)容，經(jīng)典傳統(tǒng)的拼圖游戲是大家最喜愛的游戲之一，具有挑戰(zhàn)性，感興趣的小伙伴們可以參考一下2016-03-03
npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析
這篇文章主要為大家介紹了npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
關(guān)于better-scroll插件的無法滑動bug(2021通過插件解決)
這篇文章主要介紹了關(guān)于better-scroll插件的無法滑動bug(2021通過插件解決),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
waypoints的功能非常強(qiáng)大，一款用于捕獲各種滾動事件的插件，下面跟隨腳本之家小編一起學(xué)習(xí)JS庫之Waypoints的用法吧2017-09-09
下面小編就為大家?guī)硪黄獪\談javascript中遇到的字符串對象處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了BootStrap model彈出框的使用，介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
JavaScript中this的學(xué)習(xí)筆記及用法整理
在本篇文章里小編給大家整理的是關(guān)于JavaScript中this的使用以及代碼實例，需要的朋友們學(xué)習(xí)下。2020-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錄音，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
詳細(xì)談?wù)凧avaScript中循環(huán)之間的差異
JS循環(huán)語句也叫迭代語句,是一種特殊的語句,主要用于需要多次執(zhí)行的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript中循環(huán)之間的差異的相關(guān)資料,需要的朋友可以參考下2021-08-08