javascript中遍历map和set最自然高效的方式是for...of循环,因其原生支持可迭代协议,无需转数组、内存占用小、性能好、语义清晰;遍历set直接获取唯一值,map默认返回[key, value]数组并支持解构。

JavaScript 中遍历 Map 和 Set 最自然、高效的方式就是使用 for...of 循环,因为它们原生支持可迭代协议(Iterable Protocol),无需转换为数组就能直接遍历,内存占用小、性能好、语义清晰。
遍历 Set 集合:直接获取每个唯一值
Set 的 for...of 遍历返回的是集合中每个元素本身(按插入顺序):
const mySet = new Set([1, 2, 3, 2, 4]);
for (const value of mySet) {
console.log(value); // 输出:1, 2, 3, 4(自动去重,顺序保留)
}
- 不需要调用
mySet.values()——mySet[Symbol.iterator] === mySet.values,二者等价 - 若需同时获取索引,可用
Array.from(mySet).entries(),但会创建新数组,不推荐高频或大数据量场景
遍历 Map 集合:默认返回 [key, value] 数组,解构更简洁
Map 的 for...of 默认遍历的是键值对([key, value])组成的数组,非常适合结构赋值:
const myMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const [key, value] of myMap) {
console.log(key, value); // 'a' 1, 'b' 2, 'c' 3
}
- 等价写法:
for (const entry of myMap.entries()),但冗余;myMap[Symbol.iterator] === myMap.entries - 如只需 key 或 value,可分别用
myMap.keys()或myMap.values()配合for...of,避免构造完整 entry
性能与注意事项:避免常见低效操作
相比 for...in(遍历对象属性,不适用)或转成数组再遍历(如 [...myMap]),for...of 是最优选:
- 不创建中间数组,节省内存,尤其对大集合明显
- 支持
break、continue、return(在函数内),控制灵活 - 不可用于普通对象(除非手动部署
Symbol.iterator),别误用在{}上 - 遍历时修改集合(如
delete或set)是安全的,但新增元素是否被遍历取决于引擎实现,应避免依赖该行为
对比其他方式:为什么 for-of 更推荐
以下写法虽可行,但各有短板:
-
myMap.forEach((v, k) => {...}):无法中途跳出循环(无break) -
Array.from(myMap).forEach(...):多一次全量拷贝,O(n) 时间 + O(n) 空间开销 for (let i = 0; i :Set/Map 不支持数字索引访问,会出错
所以,只要目标是逐个访问元素,for...of 就是最直接、最轻量、最符合语言设计意图的方式。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











