0

0

javascript的map与set_与对象和数组相比有何优势?

狼影

狼影

发布时间:2026-01-04 22:02:03

|

891人浏览过

|

来源于php中文网

原创

map比object更适合存储键值对,因其支持任意类型键、保留插入顺序、size属性直接获取长度;set比array更适合去重和成员判断,因has()为o(1)且原生支持迭代器。

javascript的map与set_与对象和数组相比有何优势?

Map 比 Object 更适合存储键值对

Object 的键只能是字符串或 Symbol,而 Map 允许任意类型作键(包括对象、函数、null、甚至另一个 Map)。这意味着你不需要把对象转成字符串再拼接,避免了 {[object Object]}: value 这种不可靠的 key。

常见错误现象:用普通对象缓存 DOM 节点或 React 组件实例时,因为 obj[node] = data 实际触发了 node.toString(),所有节点都变成 "[object HTMLDivElement]",导致数据覆盖。

实操建议:

  • 需要以非字符串/非 Symbol 值为键时,必须用 Map,不能用 Object
  • Map 保留插入顺序,遍历时按添加顺序返回;Object 在 ES2015+ 虽也保留部分顺序,但对数字字符串键(如 "10""2")会自动排序,行为不一致
  • Map.size 是属性,Object.keys(obj).length 需计算,且无法包含不可枚举属性

Set 比 Array 更高效地做去重和成员判断

Array.includes() 是 O(n) 时间复杂度,而 Set.has() 是平均 O(1)。当你要高频判断某个值是否“存在”(比如防重复提交、状态白名单校验),Set 明显更快。

立即学习Java免费学习笔记(深入)”;

使用场景举例:监听多个事件源,只处理未见过的 ID;或维护一个动态更新的允许操作的用户角色集合。

拍我AI
拍我AI

AI视频生成平台PixVerse的国内版本

下载

实操建议:

  • 从数组创建去重集合:new Set([1, 2, 2, 3])Set {1, 2, 3},比 [...new Set(arr)]filter((v, i) => arr.indexOf(v) === i) 更简洁可靠
  • Set 不支持索引访问(没有 set[0]),也不能用 map / find 等数组方法,需先转为数组([...set])再操作 —— 这是易踩的坑
  • 若需保持插入顺序 + 快速查重 + 高频增删,Set 是比 Array.filter()Array.findIndex() 更优解

Map 和 Set 都原生支持迭代器,与 for…of 天然契合

MapSet 都实现了 Symbol.iterator,可直接用于 for...of、展开运算符、Array.from(),而普通对象要遍历自身可枚举属性还得靠 Object.entries()Object.keys() 中转。

性能影响:Map.keys()Map.values()Map.entries() 返回的是迭代器,不是新数组,内存更友好;而 Object.keys() 总是返回新数组,大量键时有额外开销。

实操建议:

  • 遍历键值对优先写
    for (const [key, value] of myMap) { ... }
    ,而不是
    for (const key of myMap.keys()) { const value = myMap.get(key); ... }
  • 需要解构赋值时:const [firstEntry] = myMap; 可直接取第一个 [key, value]Object 不支持这种写法
  • MapSet 的迭代器是“活”的:遍历时修改结构(如 map.set())不会报错,但行为未定义(不同引擎可能跳过或重复)—— 生产环境应避免边遍历边改

何时不该用 Map/Set?这些边界情况容易被忽略

Map 和 Set 不是万能替代品。它们不支持 JSON 序列化(JSON.stringify(new Map()) 得到 {}),也没有原型方法如 hasOwnPropertytoString 的自定义空间。

容易被忽略的点:

  • 如果只是静态配置映射(如 {'en': 'English', 'zh': '中文'}),用 Object 更轻量、可读性更好、支持点语法和解构,没必要上 Map
  • Set 无法存储重复值,但如果你需要计数(比如统计某 ID 出现次数),得用 Mapid → count,或用第三方 Multiset
  • IE11 不支持 Map/Set,需检查兼容性;即使用了 Babel,Map 的 polyfill 也无法完全模拟弱引用语义(如 WeakMap 的垃圾回收行为)

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

455

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1566

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

241

2024.02.23

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号