全面解析JavaScript中的循环方法：forEach、for-in与for-of
本文深入解析JavaScript中三种主流循环方法。传统for循环虽通用但代码冗长；ES5引入的forEach简化了数组遍历，但无法使用break或continue中断；for-in专为对象 enumerable 属性设计，用于数组易引发问题；ES6新增的for-of功能强大，支持数组、字符串、DOM集合及生成器，且支持const声明，是推荐的现代遍历方式。
JavaScript循环概述
JavaScript是一种直译式脚本语言，具备动态类型和弱类型特性，基于原型机制并内置支持类型系统。其解释器即JavaScript引擎，作为浏览器核心组件之一，广泛应用于客户端脚本开发。该技术最早应用于HTML网页，旨在为静态页面增添动态交互功能。
传统for循环
JavaScript已有20多年历史，传统数组循环方式如下：
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}forEach方法及其局限
自JavaScript ES5版本起，语言内置了forEach方法供开发者使用：
myArray.forEach(function (value) {
console.log(value);
});这种写法显著简化了代码，但也存在局限性：在循环过程中无法使用break语句或continue语句来中断或跳过迭代。
for-in循环与对象遍历
JavaScript中还存在另一种循环机制：for-in。
for-in循环的设计初衷是遍历具有“enumerable”（可枚举）属性的对象：
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"尽管技术上也可以利用它来遍历数组，但通常不建议这样做：
for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}不推荐使用for-in遍历数组，因为与对象不同，数组的索引并非普通属性，而是代表重要数值序列的关键指标，使用for-in可能导致非预期行为。
综上所述，for-in主要用于遍历拥有字符串键名的对象。
for-of循环详解
接下来介绍for-of循环。
JavaScript ES6引入了for-of循环，它既比传统for循环更为简洁，又弥补了forEach和for-in在功能上的不足。
以下是for-of的基本语法结构：
for (var value of myArray) {
console.log(value);
}虽然for-of的语法形式与for-in相似，但其功能更为丰富，能够处理多种可迭代对象。
以下是for-of循环的具体应用示例：
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30在循环变量声明中，可以使用const替代let，从而确保循环体内的变量为不可修改的静态常量。
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30for-of的应用场景
此外，for-of还可以用于遍历字符串：
let iterable = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3它同样适用于遍历DOM集合（DOM collection）。
对于DOM集合如NodeList，此前讨论如何遍历NodeList时较为繁琐，现在可以直接利用for-of循环简化操作：
// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");
for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}对于拥有enumerable属性的普通对象，for-of不能直接遍历。
若需遍历普通对象的属性，可结合内置的Object.keys()方法实现：
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}生成器遍历
for-of还支持遍历生成器（generators）。
我们可以对生成器函数进行循环遍历：
function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}至此，关于JavaScript中forEach、for-in及for-of循环方法的全面解析介绍完毕。如需了解更多相关js循环方法内容，请搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53