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
  • 额外代价:对象要手动维护 sizeMap 直接有 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.mapfilter)。想链式处理,得先转成数组(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响应的最佳实践