0

0

javascript中Map和Set是什么_与对象和数组有何区别【教程】

夜晨

夜晨

发布时间:2026-01-23 15:51:08

|

214人浏览过

|

来源于php中文网

原创

map/set不可替代对象/数组,因键类型任意、严格区分值类型、o(1)查增删、保持插入顺序、无原型污染、正确处理nan;对象键强制转字符串、无序、性能差。

javascript中map和set是什么_与对象和数组有何区别【教程】

Map 为什么不能用普通对象 {} 替代

因为对象的键会强制转成字符串,而 Map 允许任意类型作键——包括 DOM 元素、函数、nullundefined,甚至两个不同但结构相同的对象也能区分。

常见错误现象:obj[divEl] 实际变成 obj["[object HTMLDivElement]"],多个节点全挤进同一个键,缓存彻底失效。

  • 需要缓存按钮展开状态?const cache = new Map(); cache.set(buttonEl, { expanded: true }) ✅;用对象就崩
  • 键是数字 42 还是字符串 "42" 很关键?Map 严格区分;对象里 obj[42] === obj["42"]
  • 要快速知道存了多少条?map.size 是 O(1);Object.keys(obj).length 每次都新建数组,O(n)

Set 去重和查存在,为什么比 Array.includes() 快得多

Set 底层是哈希表,set.has(x) 平均时间复杂度是 O(1);数组的 includes()indexOf() 是线性扫描,O(n)。

性能影响在数据量大时特别明显:10 万用户 ID 中查一个是否存在,set.has(id) 几乎无感;arr.includes(id) 可能卡顿半秒以上。

一帧秒创
一帧秒创

基于秒创AIGC引擎的AI内容生成平台,图文转视频,无需剪辑,一键成片,零门槛创作视频。

下载

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

  • 数组去重别再写 arr.filter((v, i) => arr.indexOf(v) === i),一行搞定:[new Set(arr)]
  • 防重复提交?if (!pendingRequests.has(url)) { pendingRequests.add(url); /* 发请求 */ } ✅;用数组每次都要遍历
  • 注意:对象去重无效——new Set([{a:1}, {a:1}]) 会存两个,因为每次 {} 都是新引用;要用同一对象才能命中

哪些场景必须用 Map/Set,硬套对象或数组会出错

不是“更高级”,而是“非它不可”。对象和数组在这几类需求下语义模糊、行为不可靠、甚至直接崩溃。

  • 缓存 DOM 状态:nodeCache.set(div, { dirty: true }) → 用对象就全变成 "[object HTMLDivElement]",覆盖掉
  • 实时在线用户列表:onlineUsers.add(userId) + onlineUsers.delete(userId) + onlineUsers.has(userId),高频增删查,顺序不重要但性能敏感 → Set 最稳
  • 权限白名单:const allowed = new Set(['read', 'edit']); if (allowed.has(action)) { ... } → 比 ['read','edit'].includes(action) 更快、更清晰、不依赖数组方法兼容性
  • LRU 缓存实现:map.keys().next().value 能直接拿到最早插入项 → 对象没有插入顺序保证,无法可靠实现

容易被忽略的关键细节

Map 和 Set 不是语法糖,它们有独立内存模型和行为规范。很多坑不是写错了,而是没意识到它们和对象/数组的底层差异。

  • Set 不支持索引访问:mySet[0]undefined;要取第 n 个值,得先转数组:[...mySet][n]
  • Map 没有原型污染风险:map.get('constructor') 安全;但 obj.constructor 可能被覆盖或继承干扰
  • 对象键对 NaN 不友好(obj[NaN] = 1; obj[NaN]undefined),而 SetMap 用 SameValueZero 算法,NaN 能正确识别为相同值

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
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

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

846

2023.08.22

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

562

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

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

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

1566

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

649

2023.11.24

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万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

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