在HTML5网页开发中，我们经常需要把后端返回的一组数据渲染成页面列表，或者批量修改某些DOM元素的状态。JavaScript提供了多种遍历数组的手段，其中最基础的是for循环，最简洁的是数组原型上的forEach方法。理解它们各自的运行机制，才能在不同业务场景下写出既正确又高效的代码。
一、for循环遍历数组列表
for循环是JavaScript最经典的遍历方式，它依靠一个计数器变量来访问数组的每一个索引。由于循环条件完全由开发者控制，因此具备极高的灵活性。在HTML5中，如果我们需要在遍历过程中根据条件提前结束，或者反向遍历，for循环是最直接的选择。
下面是一段使用for循环把数组内容生成HTML列表项的示例。代码先获取页面中的ul容器，然后依次创建li节点并填入文本。因为循环变量i可以随意控制，我们也能轻松跳过某些索引。
// 假设页面有一个 <ul id="list"></ul>
var dataList = ['苹果', '香蕉', '橙子', '西瓜'];
var ulEl = document.getElementById('list');
for (var i = 0; i < dataList.length; i++) {
// 跳过索引为1的元素
if (i === 1) {
continue;
}
var li = document.createElement('li');
li.textContent = (i + 1) + '号水果：' + dataList[i];
ulEl.appendChild(li);
}
for循环的优点非常明显：可以使用break和continue精确控制流程，也能在循环体内修改计数器实现复杂步进。但它的缺点在于写法相对繁琐，容易因边界条件写错而导致漏项或死循环。此外，当使用var声明循环变量时，还存在变量提升带来的作用域问题，现代开发更推荐用let替代。
二、forEach方法遍历数组列表
forEach是ECMAScript 5引入的数组高阶函数，它把遍历逻辑封装起来，开发者只需提供一个回调函数。在HTML5项目里，forEach让代码更声明式，可读性更好，特别适合单纯地对每个元素执行相同操作的场景。
下面的代码实现和前面for循环相同的列表渲染，但使用了forEach。注意回调函数的第一个参数是当前元素，第二个是索引。我们无法在forEach内部用break退出，只能靠return跳过本次执行。
// 同样假设页面有 <ul id="list"></ul>
var dataList = ['苹果', '香蕉', '橙子', '西瓜'];
var ulEl = document.getElementById('list');
dataList.forEach(function(item, index) {
if (index === 1) {
return; // 仅跳过本次，不能中断整个遍历
}
var li = document.createElement('li');
li.textContent = (index + 1) + '号水果：' + item;
ulEl.appendChild(li);
});
forEach的劣势在于缺乏流程中断能力，且它本身不支持链式调用返回新数组（和map不同）。如果在回调里写异步操作，例如发起fetch请求，forEach不会等待完成，这可能导致执行顺序不符合预期。对于需要中断或异步控制的场景，往往要改用for...of或for循环。
三、两者在HTML5开发中的对比与选用
从性能角度看，在元素数量较少时for和forEach差异可以忽略；但在超大列表渲染中，for循环少了函数调用开销，通常略快。从代码维护角度，forEach更不容易写出越界错误。我们可以参考下面的对照表来做技术选型。
| 特性 | for循环 | forEach方法 |
|---|---|---|
| 能否中途中断 | 能，用break | 不能，只能return跳过本次 |
| 异步支持 | 可配合await使用 | 回调内异步不阻塞外部 |
| 代码简洁度 | 较低，需写计数器 | 较高，逻辑集中 |
| 反向遍历 | 容易实现 | 需先reverse数组 |
实际写HTML5页面时，如果只是把接口数据塞进DOM，forEach足够清晰；若要根据用户勾选状态动态停止渲染，或要在循环里await接口，就应当使用for循环或for...of。理解这些差异，才能避免遍历逻辑引发隐蔽bug。
四、结合HTML5标签的完整示例
最后给出一个完整HTML片段，展示如何在页面加载后同时用两种方式遍历同一个数组，并分别输出到不同容器中。你可以把它存成html文件直接在浏览器打开观察效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>遍历示例</title>
</head>
<body>
<h3>for循环结果</h3>
<ul id="forList"></ul>
<h3>forEach结果</h3>
<ul id="eachList"></ul>
<script>
var fruits = ['苹果', '香蕉', '橙子'];
var forUl = document.getElementById('forList');
var eachUl = document.getElementById('eachList');
for (var i = 0; i < fruits.length; i++) {
var li = document.createElement('li');
li.textContent = 'for: ' + fruits[i];
forUl.appendChild(li);
}
fruits.forEach(function(value) {
var li = document.createElement('li');
li.textContent = 'forEach: ' + value;
eachUl.appendChild(li);
});
</script>
</body>
</html>
通过这个例子可以看到，两种遍历在操作DOM时写法都很直观。建议团队在代码规范里明确：简单映射用forEach，复杂控制流用for，这样既能保证可读性，也不牺牲灵活性。
HTML5JavaScriptforEach修改时间：2026-08-10 10:30:31