亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript的JSON處理Map的弊端詳解

 更新時間：2025年05月01日 10:01:57   作者：墮落年代  
這篇文章主要介紹了JavaScript的JSON處理Map的弊端,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

JavaScript的JSON處理Map的弊端

  • 直接使用 Map 會遇到的問題及解決方案
  • 直接使用 Map 會導(dǎo)致數(shù)據(jù)丟失，因為 JSON.stringify 無法序列化 Map。

以下是詳細分析及解決方法：

問題復(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ù)組為 Mapnew 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)文章

  • JavaScript function 的 length 屬性使用介紹

    JavaScript function 的 length 屬性使用介紹

    函數(shù)的 length 得到的是形參個數(shù)，如果函數(shù)內(nèi)部是通過arguments 調(diào)用參數(shù)，而沒有實際定義參數(shù)的話， length 只會的得到0
    2014-09-09
  • js顯示文本框提示文字的方法

    js顯示文本框提示文字的方法

    這篇文章主要介紹了js顯示文本框提示文字的方法,涉及javascript鼠標事件及樣式操作的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
    2015-05-05
  • Javascript之旅 對象的原型鏈之由來

    Javascript之旅 對象的原型鏈之由來

    本人是Javascript菜鳥，下面是前幾天學(xué)習(xí)Javascript的旅程心得，希望對和我一樣的入門者有點用，也希望高手批評指正。
    2010-08-08
  • 通過JAVASCRIPT讀取ASP設(shè)定的COOKIE

    通過JAVASCRIPT讀取ASP設(shè)定的COOKIE

    通過JAVASCRIPT讀取ASP設(shè)定的COOKIE...
    2006-11-11
  • javascript 鍵盤事件總結(jié) 推薦

    javascript 鍵盤事件總結(jié) 推薦

    在進入正題前，我們看一下瀏覽器對于鍵盤的一些默認事件，這有助于我們用javascript截獲鍵盤事件。
    2009-12-12
  • JavaScript常用腳本匯總（二）

    JavaScript常用腳本匯總（二）

    本文給大家分享的javascript常用腳本有把JavaScript中的偽數(shù)組轉(zhuǎn)換為真數(shù)組、JavaScript設(shè)置主頁功能、JavaScript收藏功能、javascript檢測元素是否支持某個屬性代碼、創(chuàng)建和使用命名空間，有需要的小伙伴們快來看看吧。
    2015-03-03
  • JavaScript中的數(shù)組使用方法詳解

    JavaScript中的數(shù)組使用方法詳解

    JavaScript數(shù)組是一種特殊類型的對象,用于存儲多個值,數(shù)組中的每個值都有一個索引,索引從0開始,數(shù)組中的值可以是任何數(shù)據(jù)類型,包括數(shù)字、字符串、布爾值、對象和函數(shù),
    2024-10-10
  • javascript學(xué)習(xí)小結(jié)之prototype

    javascript學(xué)習(xí)小結(jié)之prototype

    本系列博文主要談一些在 javascript 使用中經(jīng)常會混淆的高級應(yīng)用，包括: prototype, closure, scope, this關(guān)鍵字. 對于一個需要提高自己javascript水平的程序員,這些都是必須要掌握的，本節(jié)主要介紹prototype.
    2015-12-12
  • JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)

    JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)

    函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。下面這篇文章主要給大家介紹了關(guān)于JavaScript中Hoisting(變量提升與函數(shù)聲明提升)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-08-08
  • 微信小程序?qū)崿F(xiàn)登錄注冊界面

    微信小程序?qū)崿F(xiàn)登錄注冊界面

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)登錄注冊界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-08-08

最新評論