JavaScript 遍历机制深度对比：从传统循环到迭代器模式
forEach：函数式遍历的利与器
作为数组原型上的高阶方法，forEach 接收回调函数并传入三个参数：当前元素、索引位置、原数组引用。其设计哲学在于纯遍历——不返回任何值，仅执行副作用操作。
关键限制：无法通过 return 终止执行，亦不可用 break 或 continue。若强行中断，唯一途径是抛出异常（不推荐生产环境使用）。
const stock = [
{ product: "laptop", stock: 15 },
{ product: "mouse", stock: 0 },
{ product: "keyboard", stock: 8 }
];
// 模拟查找并中断的变通方案
function locateItem(dataset, target) {
let captured = null;
dataset.every((entry, pos, src) => {
console.log(`扫描位置 ${pos}: ${entry.product}`);
if (entry.product === target) {
captured = entry;
return false; // every 遇 false 即停
}
return true;
});
return captured;
}
// 手动实现 forEach 理解其本质
Array.prototype.customIterate = function (handler) {
for (let pos = 0; pos < this.length; pos++) {
handler.call(this, this[pos], pos, this);
}
};
map：数据转换的管道
map 与 forEach 参数签名相同，但核心差异在于返回值：map 必然生成等长新数组，每个元素由原元素经映射函数转换而来。
性能特征：V8 引擎对 map 有特定优化，在数据转换场景下通常优于手动 for 循环。注意：map 同样不可提前终止。
const catalog = [
{ sku: "A001", price: 299, currency: "CNY" },
{ sku: "B002", price: 89, currency: "CNY" }
];
// 转换为价格映射表
const priceMap = catalog.reduce((acc, { sku, price }) => {
acc[sku] = price;
return acc;
}, {});
// 或使用 Object.fromEntries + map
const priceLookup = Object.fromEntries(
catalog.map(({ sku, price }) => [sku, price])
);
for...of：迭代器协议的受益者
ES6 引入的 for...of 并非专为数组设计，而是迭代器协议（Iterator Protocol）的消费者。任何实现 Symbol.iterator 接口的对象均可被其遍历。
原生支持的数据结构包括：String、Array、TypedArray、Map、Set、arguments、DOM NodeList，以及生成器函数返回的生成器对象。
核心优势：支持 break、continue、return，语义清晰，避免索引操作。
// 普通对象无迭代器，直接遍历报错
const profile = { username: "dev", level: 5, role: "admin" };
// 手动实现迭代器使对象可遍历
const iterableProfile = {
data: profile,
[Symbol.iterator]() {
const entries = Object.entries(this.data);
let cursor = 0;
return {
next: () => {
const done = cursor >= entries.length;
return {
value: done ? undefined : entries[cursor++][1],
done
};
}
};
}
};
// 现在可以正常遍历
for (const value of iterableProfile) {
console.log(value); // "dev", 5, "admin"
}
for...in：属性枚举的考古工具
for...in 遍历的是可枚举属性名（字符串键），遍历顺序不保证，且会沿原型链向上查找。这是其区别于其他遍历方式的根本特征。
数组遍历时的陷阱：获取的是字符串索引而非数字，且可能包含原型链上的自定义属性。对象遍历时需配合 hasOwnProperty 过滤继承属性。
const config = {
apiEndpoint: "https://api.example.com",
timeout: 5000,
retries: 3
};
// 安全遍历对象自有属性
for (const prop in config) {
if (Object.prototype.hasOwnProperty.call(config, prop)) {
console.log(`${prop}: ${config[prop]}`);
}
}
// 现代替代方案：Object 静态方法
Object.entries(config).forEach(([key, val]) => {
console.log(key, val);
});
经典 for 循环：性能至上的最后堡垒
在需要极致性能或复杂控制流的场景，传统 for 语句仍有其价值：缓存长度、逆向遍历、步长调整等优化手段可精确控制执行过程。
const matrix = [[1, 2], [3, 4], [5, 6]];
// 优化模式：缓存长度，减少属性查找
for (let row = 0, total = matrix.length; row < total; row++) {
for (let col = 0, cols = matrix[row].length; col < cols; col++) {
if (matrix[row][col] > 4) break; // 灵活中断
console.log(matrix[row][col]);
}
}
决策矩阵
| 场景 | 推荐方案 | 避坑提示 |
|---|---|---|
| 纯遍历，无副作用 | for...of | 异步迭代用 for await...of |
| 数据转换生成新数组 | map | 避免嵌套 map，考虑 flatMap |
| 需要提前终止 | some/every/find | forEach 无法中断 |
| 对象属性遍历 | Object.keys + for...of | for...in 需过滤原型链 |
| 高频热点代码 | 优化后的 for 循环 | 先测量，再优化 |
