Map和Set是什么_与对象和数组有何区别【教程】
发布时间 - 2026-01-28 00:00:00 点击率:次Map和Set是为高频查找、去重、映射设计的原生结构,非对象/数组替代品;Map键支持任意类型且保序,Set去重时间复杂度O(1),优于数组O(n²)。
Map 和 Set 是专门做查找的键值/唯一值容器
它们不是对象或数组的替代品,而是为高频查找、去重、映射关系设计的原生数据结构。用错场景(比如只存几个静态配置就硬套 Map)反而增加开销;该用却不用(比如频繁 includes 数组查重),性能会掉得明显。
为什么不能直接用对象代替 Map?
对象的 key 只能是字符串或 Symbol,而 Map 的 key 可以是任意类型——函数、对象、null、甚至另一个 Map。更关键的是:对象不保证插入顺序(尤其在旧引擎或非字面量创建时),而 Map 遍历一定按插入顺序返回。
- 错误写法:
const obj = {}; obj[{}] = 'a';→ 实际 key 被转成"[object Object]",多个空对象都撞成同一个 key - 正确写法:
const map = new Map(); map.set({}, 'a');→ 每个对象都是独立 key - 额外代价:对象要手动维护
size,Map直接有map.size
Set 去重比数组 filter + indexOf 快得多
Set 底层是哈希实现,add/has 平均时间复杂度是 O(1);而数组去重常用 arr.filter((v, i) => arr.indexOf(v) === i),每次 indexOf 都要遍历,整体是 O(n²)。
- 简单去重:
[...new Set(arr)]—— 清晰、快、一行解决 - 但注意:
Set只对原始值(string/number/boolean)和同一引用对象判等;[1,2] === [1,2]是 false,所以两个相同数组放进Set仍是两个元素 - 如果要深去重数组或对象,
Set不适用,得自己序列化或用库
别把 Map/Set 当万能筐,小心内存和可读性陷阱
它们没有数组的索引访问(map[0] 无效),也不支持 map.forEach 以外的高阶方法(如 map.map、filter)。想链式处理,得先转成数组(Array.from(map.values())),这会触发一次遍历+内存分配。
- 误用场景:只存 3 个配置项,却用
new Map([['host', 'a'], ['port', 80], ['ssl', true]])—— 对象更轻、可读性更好 - 真需要动态增删 + 快速查 key 时才上
Map;只要去重或存在性判断,优先Set - Node.js 早期版本(Map 的序列化(JSON.strin
gify)会丢失数据,必须手动展开;现在虽已支持,但跨环境传输仍建议转 plain object
最常被忽略的一点:Map 和 Set 的迭代器不可复用。调用一次 map.keys() 得到的迭代器,遍历完就耗尽了,再 for...of 就什么也不吐——不是 bug,是设计如此。需要多次遍历时,得重新调用方法或缓存为数组。
# js
# node.js
# node
# ssl
# 区别
# 为什么
# String
# Boolean
# Array
# Object
# NULL
# foreach
# Filter
# const
# 字符串
# 数据结构
# map
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
高端建站三要素:定制模板、企业官网与响应式设计优化
作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】
Laravel如何为API编写文档_Laravel API文档生成与维护方法
laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法
如何登录建站主机?访问步骤全解析
英语简历制作免费网站推荐,如何将简历翻译成英文?
焦点电影公司作品,电影焦点结局是什么?
如何制作一个表白网站视频,关于勇敢表白的小标题?
laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法
香港服务器建站指南:外贸独立站搭建与跨境电商配置流程
Linux系统命令中screen命令详解
微信小程序 wx.uploadFile无法上传解决办法
网易LOFTER官网链接 老福特网页版登录地址
香港网站服务器数量如何影响SEO优化效果?
jQuery 常见小例汇总
Android okhttputils现在进度显示实例代码
如何在阿里云域名上完成建站全流程?
Laravel如何使用.env文件管理环境变量?(最佳实践)
logo在线制作免费网站在线制作好吗,DW网页制作时,如何在网页标题前加上logo?
Laravel如何使用withoutEvents方法临时禁用模型事件
如何在云指建站中生成FTP站点?
如何快速生成专业多端适配建站电话?
如何在阿里云购买域名并搭建网站?
韩国服务器如何优化跨境访问实现高效连接?
Android中Textview和图片同行显示(文字超出用省略号,图片自动靠右边)
Python正则表达式进阶教程_复杂匹配与分组替换解析
实现点击下箭头变上箭头来回切换的两种方法【推荐】
WEB开发之注册页面验证码倒计时代码的实现
Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程
如何用AI帮你把自己的生活经历写成一个有趣的故事?
东莞专业网站制作公司有哪些,东莞招聘网站哪个好?
活动邀请函制作网站有哪些,活动邀请函文案?
edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】
html5如何实现懒加载图片_ intersectionobserver api用法【教程】
如何在IIS中新建站点并解决端口绑定冲突?
Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】
香港服务器网站卡顿?如何解决网络延迟与负载问题?
如何破解联通资金短缺导致的基站建设难题?
如何用VPS主机快速搭建个人网站?
Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】
如何用PHP工具快速搭建高效网站?
如何快速搭建高效WAP手机网站?
Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】
深圳网站制作平台,深圳市做网站好的公司有哪些?
文字头像制作网站推荐软件,醒图能自动配文字吗?
jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】
Laravel Fortify是什么,和Jetstream有什么关系
Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践


