ES6教程之for循环和Map,Set用法分析
本文深入解析ES6新增的for-of循环语法及其与Map、Set数据结构的配合使用。通过对比传统for、forEach及for-in循环的局限性，阐述for-of在遍历数组、DOM节点及自定义对象时的优势。同时详细介绍Map的快速键值对存储特性与Set的去重机制，并提供实际代码示例，帮助开发者掌握ES6核心迭代与集合用法。
ES6循环与数据结构概述
本文通过具体实例，详细解析ES6中for循环以及Map、Set对象的实际应用方法，供读者参考学习。
在遍历数组元素时，许多开发者会首先想到传统的for循环方式。
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
然而，这种写法在ES5时代已被更简洁的forEach方法所取代，具体实现如下所示。
myArray.forEach(function (value) {
console.log(value);
});
尽管forEach写法更为精简，但其存在明显局限：无法使用break语句中途退出循环，也不能通过return语句提前终止迭代。
此外，还有开发者倾向于使用for-in循环，但其设计初衷并非用于数组遍历。
for (var index in myArray) {
console.log(myArray[index]);
}
for-in循环主要面向存储键值对的对象，其索引值为字符串类型（如“1”、“2”等）。由于字符串拼接特性，“1”+“2”的结果并非数值3，这可能导致逻辑错误。
for-of循环详解
for-of循环
为了兼容旧有代码习惯，同时提供新的迭代能力，ES6引入了全新的for-of循环语法。
for (var value of myArray) {
console.log(value);
}
通过对比for-in和for-of的执行结果，可以清晰看到两者在索引类型和取值上的差异。
var a = ["a","b","c","d","e"];
for (var idx in a) {
console.log( idx );
}// 0 1 2 3 4
for (var val of a) {
console.log( val );
}// "a" "b" "c" "d" "e"
for-of循环的应用范围不仅限于数组，还适用于DOM对象、Map对象以及Set对象。
接下来，我们将重点介绍Map和Set这两种新引入的数据结构。
Map与Set数据结构解析
Map与Set详解
JavaScript默认对象使用{}表示，但其键名必须为字符串。然而在实际开发中，使用Number或其他数据类型作为键的需求十分常见。
为解决这一限制，ES6规范正式引入了Map数据类型。
Map是一种具备极快查找速度的键值对存储结构。
以下是Map的基本使用示例。
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
可以看出，Map的has方法在判断键是否存在时，性能优于数组的indexOf方法。
Set与Map类似，同样维护一个键列表，但其核心特性是元素不可重复。
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
如示例所示，当尝试添加重复数据时，Set会自动过滤掉重复项。
那么，这两种数据结构的具体应用场景是什么？
Map适用于存储键值对数据，例如姓名与年龄的对应关系；而Set则适用于存储需要去重的目标集合，如学号列表。
for-of在对象遍历中的应用
for-of用于对象遍历
介绍完Map和Set后，我们来看看for-of如何作用于Set对象。
var uniqueWords = new Set(words);
for (var word of uniqueWords) {
console.log(word);
}
遍历Map对象时，由于数据以键值对形式存储，需要使用解构赋值分别获取key和value。
for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);
}
需要注意的是，for-of并不直接用于遍历普通对象的属性。若需遍历普通对象，可继续使用for-in，或采用以下替代方案。
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
希望本文所述内容能对ECMAScript程序设计有所帮助。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28