什么是Map和Set_javascript中新的数据结构怎么用？-js教程-PHP中文网

什么是Map和Set_javascript中新的数据结构怎么用？

php中文网

发布： 2025-12-13 18:45:07

原创

541人浏览过

Map 和 Set 是 JavaScript 中用于键值对存储和唯一值集合的内置数据结构；Map 支持任意类型键、插入顺序遍历及 O(1) 查找，Set 基于 SameValueZero 实现自动去重与高效存在性检查。

什么是map和set_javascript中新的数据结构怎么用？

Map 和 Set 是 JavaScript 中引入的两种新的内置数据结构，分别用于存储键值对和唯一值集合。它们比传统的 Object 和 Array 在特定场景下更高效、更语义清晰，也解决了老方法的一些限制（比如 Object 的键只能是字符串或 Symbol，而 Map 允许任意类型作键）。

Map：真正灵活的键值对容器

Map 类似于对象，但更通用——它的键可以是函数、对象、数字、字符串、甚至 null 或 undefined，且会严格按插入顺序遍历。

常用操作：

创建：const map = new Map()；也可传入可迭代项初始化：new Map([[1, 'a'], ['key', true]])
增/改：map.set(key, value)（返回 map 本身，支持链式调用）
查：map.get(key) 返回对应值，map.has(key) 判断是否存在
删：map.delete(key) 删除指定键；map.clear() 清空全部
遍历：map.keys()、map.values()、map.entries()，或直接用 for...of

例如：

const objKey = {};<br>
const map = new Map();<br>
map.set(objKey, '这是以对象为键的值');<br>
console.log(map.get(objKey)); // '这是以对象为键的值'

登录后复制

Object 做不到这点——它会把对象转成 "[object Object]" 字符串当键。

Set：自动去重的值集合

Set 存储一组不重复的值，不限类型，内部用 SameValueZero 算法判断是否重复（即 0 === -0，NaN === NaN，这点和 === 不同）。

立即学习“Java免费学习笔记（深入）”；

常用操作：

创建：const set = new Set()；也可传入数组等可迭代对象：new Set([1, 2, 2, 3]) → 自动去重为 {1, 2, 3}
添加：set.add(value)（同样返回 set 本身）
检查：set.has(value) 比 arr.includes() 在大数据量时更快（时间复杂度 O(1)）
删除：set.delete(value)；set.clear()
遍历：支持 for...of、set.forEach()，顺序按插入顺序

小技巧：快速去重数组 —— [...new Set([1,2,2,3])] // [1,2,3]

魔法映像企业网站管理系统

技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

查看详情

和 Object / Array 对比的关键区别

不是“替代”，而是“各司其职”：

用 Object：当需要静态结构、JSON 序列化、原型方法（如 toString）、或作为配置/字面量时
用 Map：当键不确定类型、需频繁增删、要保持插入顺序、或需要精确的 size 属性（map.size 是属性，Object 要手动算 Object.keys(obj).length）
用 Set：当核心需求是“唯一性”和“存在性检查”，比如过滤重复 ID、记录已访问状态、实现交集/并集运算

注意：Map 和 Set 都不继承自 Object，所以没有 hasOwnProperty 等方法，也不能被 JSON.stringify 直接序列化（需手动转换）。

实际小例子：用 Set 做简单防抖缓存

比如处理用户连续点击按钮，只让第一次生效，后续在 500ms 内忽略：

const clickedIds = new Set();<br>
function handleClick(id) {<br>
  if (clickedIds.has(id)) return;<br>
  clickedIds.add(id);<br>
  setTimeout(() => clickedIds.delete(id), 500);<br>
  // 执行业务逻辑<br>
}

登录后复制

比用对象或数组记录再遍历查找更简洁高效。

基本上就这些。Map 和 Set 不复杂，但容易忽略——用对了，代码会更干净、性能更稳、意图更明确。

以上就是什么是Map和Set_javascript中新的数据结构怎么用？的详细内容，更多请关注php中文网其它相关文章！