JavaScript的JSON处理Map的弊端详解

 更新时间:2025年05月01日 10:01:57   作者:堕落年代  
这篇文章主要介绍了JavaScript的JSON处理Map的弊端,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

JavaScript的JSON处理Map的弊端

  • 直接使用 Map 会遇到的问题及解决方案
  • 直接使用 Map 会导致数据丢失,因为 JSON.stringify 无法序列化 Map

以下是详细分析及解决方法:

问题复现

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

根本原因

  • JSON.stringify 不支持 MapMap 对象会被转换为空对象 {},导致数据丢失。
  • 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()))
读取转换数组为 Mapnew Map(utilts.getValuePlan(key))

注意事项

  • 数据兼容性:确保旧数据是数组格式(如 [[key1, value1], [key2, value2]])。
  • 空值处理:读取时处理可能的 null 或无效数据:
const mapArray = utilts.getValuePlan(key) || [];
  • 嵌套对象:如果 Map 的值包含不可序列化对象(如 Date),需额外处理。
  • 通过手动转换 Map 和数组,可以在不修改现有存储函数的情况下安全使用 Map

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript function 的 length 属性使用介绍

    JavaScript function 的 length 属性使用介绍

    函数的 length 得到的是形参个数,如果函数内部是通过arguments 调用参数,而没有实际定义参数的话, length 只会的得到0
    2014-09-09
  • js显示文本框提示文字的方法

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

    这篇文章主要介绍了js显示文本框提示文字的方法,涉及javascript鼠标事件及样式操作的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • Javascript之旅 对象的原型链之由来

    Javascript之旅 对象的原型链之由来

    本人是Javascript菜鸟,下面是前几天学习Javascript的旅程心得,希望对和我一样的入门者有点用,也希望高手批评指正。
    2010-08-08
  • 通过JAVASCRIPT读取ASP设定的COOKIE

    通过JAVASCRIPT读取ASP设定的COOKIE

    通过JAVASCRIPT读取ASP设定的COOKIE...
    2006-11-11
  • javascript 键盘事件总结 推荐

    javascript 键盘事件总结 推荐

    在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件。
    2009-12-12
  • JavaScript常用脚本汇总(二)

    JavaScript常用脚本汇总(二)

    本文给大家分享的javascript常用脚本有把JavaScript中的伪数组转换为真数组、JavaScript设置主页功能、JavaScript收藏功能、javascript检测元素是否支持某个属性代码、创建和使用命名空间,有需要的小伙伴们快来看看吧。
    2015-03-03
  • JavaScript中的数组使用方法详解

    JavaScript中的数组使用方法详解

    JavaScript数组是一种特殊类型的对象,用于存储多个值,数组中的每个值都有一个索引,索引从0开始,数组中的值可以是任何数据类型,包括数字、字符串、布尔值、对象和函数,
    2024-10-10
  • javascript学习小结之prototype

    javascript学习小结之prototype

    本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用,包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的,本节主要介绍prototype.
    2015-12-12
  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。下面这篇文章主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • 微信小程序实现登录注册界面

    微信小程序实现登录注册界面

    这篇文章主要为大家详细介绍了微信小程序实现登录注册界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论