欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript的JSON處理Map的弊端詳解

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

JavaScript的JSON處理Map的弊端

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

以下是詳細(xì)分析及解決方法：

問(wèn)題復(fù)現(xiàn)

// 示例代碼
const myMap = new Map();
myMap.set('user1', { name: 'Alice' });
myMap.set('user2', { name: 'Bob' });

// 保存 Map
utilts.setValuePlan('myMap', myMap); // 實(shí)際存儲(chǔ)的是空對(duì)象 `{}`

// 讀取 Map
const loadedMap = utilts.getValuePlan('myMap'); 
console.log(loadedMap); // 輸出 `{}`，數(shù)據(jù)丟失！

根本原因

  • JSON.stringify 不支持 Map：Map 對(duì)象會(huì)被轉(zhuǎn)換為空對(duì)象 {}，導(dǎo)致數(shù)據(jù)丟失。
  • JSON.parse 無(wú)法還原 Map：即使手動(dòng)存儲(chǔ) Map 的內(nèi)容，讀取時(shí)也無(wú)法自動(dòng)恢復(fù)為 Map。

解決方案（不修改存儲(chǔ)函數(shù)）

方法 1：存儲(chǔ)時(shí)手動(dòng)轉(zhuǎn)換 Map 為數(shù)組

在調(diào)用 setValuePlan 前將 Map 轉(zhuǎn)換為數(shù)組，讀取時(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); // ? 正確存儲(chǔ)

// 讀取時(shí)轉(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); // ? 存儲(chǔ)

const loadedMap = getMapValue('myMap'); // ? 恢復(fù)

關(guān)鍵總結(jié)

步驟操作代碼示例
存儲(chǔ)轉(zhuǎn)換 Map 為數(shù)組utilts.setValuePlan(key, Array.from(map.entries()))
讀取轉(zhuǎn)換數(shù)組為 Mapnew Map(utilts.getValuePlan(key))

注意事項(xiàng)

  • 數(shù)據(jù)兼容性：確保舊數(shù)據(jù)是數(shù)組格式（如 [[key1, value1], [key2, value2]]）。
  • 空值處理：讀取時(shí)處理可能的 null 或無(wú)效數(shù)據(jù)：
const mapArray = utilts.getValuePlan(key) || [];
  • 嵌套對(duì)象：如果 Map 的值包含不可序列化對(duì)象（如 Date），需額外處理。
  • 通過(guò)手動(dòng)轉(zhuǎn)換 Map 和數(shù)組，可以在不修改現(xiàn)有存儲(chǔ)函數(shù)的情況下安全使用 Map！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript function 的 length 屬性使用介紹

    JavaScript function 的 length 屬性使用介紹

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

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

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

    Javascript之旅 對(duì)象的原型鏈之由來(lái)

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

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

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

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

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

    JavaScript常用腳本匯總（二）

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

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

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

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

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

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

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

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

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

最新評(píng)論