前端各类循环遍历 如何中断循环、跳过本次循环：精准掌控break、continue与异常处理

前言

在前端开发中，循环遍历是处理数据的核心操作。但不同的循环方法对流程控制（中断、跳过）的支持差异巨大，错误的使用会导致性能浪费甚至逻辑错误。本文将系统解析8类主流循环方法的中断控制技巧，涵盖同步/异步场景，提供可直接用于生产的解决方案。通过阅读本文，您将获得：

• 各循环方法的中断方案对比
• 异常处理的最佳实践
• 性能优化关键指标

---

目录

1. 基础循环结构

   • 1.1 for循环
   • 1.2 while/do-while循环

2. 数组高阶函数

   • 2.1 forEach
   • 2.2 map/filter
   • 2.3 some/every

3. ES6+迭代协议

   • 3.1 for…of
   • 3.2 迭代器对象

4. 对象遍历方法

   • 4.1 for…in
   • 4.2 Object.keys

5. 异步循环控制

   • 5.1 for await…of
   • 5.2 Promise循环

6. 性能对比与选型指南

---

1. 基础循环结构

1.1 for循环

中断与跳过机制：

• break：立即终止整个循环
• continue：跳过当前迭代，进入下一轮

// 示例：找到第一个负数后终止
const arr = [2, 4, -1, 8];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] < 0) {
    console.log('发现负数，终止循环');
    break;
  }
  if (arr[i] % 2 !== 0) continue;
  console.log('处理偶数:', arr[i]);
}

流程图

---

2. 数组高阶函数

2.1 forEach

原生不支持break/continue，但可通过异常模拟中断：

// 中断整个循环
try {
  [1, 2, 3].forEach(num => {
    if (num === 2) throw new Error('break');
    console.log(num); // 输出: 1
  });
} catch (e) {}

// 跳过单个迭代
[1, 2, 3].forEach(num => {
  if (num === 2) return; // 类似continue
  console.log(num); // 输出: 1,3
});

替代方案对比

方法	中断能力	性能损耗	代码可读性
异常抛出	✔️	高	差
some/every	✔️	低	优

---

2.3 some/every

利用返回值实现流程控制：

// some：找到符合条件则终止
[1, 2, 3].some(num => {
  if (num === 2) return true; // 触发终止
  console.log(num); // 输出: 1
});

// every：遇到false则终止
[1, 2, 3].every(num => {
  if (num === 2) return false;
  console.log(num); // 输出: 1
  return true;
});

---

3. ES6+迭代协议

3.1 for…of

支持与for循环相同的控制语句：

const iterable = [10, 20, 30];
for (const value of iterable) {
  if (value === 20) break;
  if (value % 3 === 0) continue;
  console.log(value); // 输出: 10
}

可迭代对象控制

const obj = {
  data: [1, 2, 3],
  *[Symbol.iterator]() {
    for (const num of this.data) {
      yield num;
    }
  }
};

for (const num of obj) {
  if (num === 2) break;
  console.log(num); // 输出: 1
}

---

4. 对象遍历方法

4.1 for…in

支持break/continue，但需注意原型链属性：

const obj = { a: 1, b: 2 };
Object.prototype.c = 3; // 会被枚举

for (const key in obj) {
  if (key === 'b') break;
  if (key === 'c') continue; // 过滤原型属性
  console.log(key); // 输出: a
}

安全遍历方案

for (const key in obj) {
  if (!obj.hasOwnProperty(key)) continue;
  // 处理自有属性
}

---

5. 异步循环控制

5.1 for await…of

处理异步迭代器，支持常规控制语句：

async function* asyncGen() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
}

(async () => {
  for await (const num of asyncGen()) {
    if (num === 2) break;
    console.log(num); // 输出: 1
  }
})();

5.2 Promise循环

使用递归实现中断：

function asyncLoop(arr) {
  let index = 0;
  function next() {
    if (index >= arr.length) return;
    return Promise.resolve(arr[index++])
      .then(val => {
        if (val === 'stop') return;
        console.log(val);
        return next();
      });
  }
  return next();
}

asyncLoop(['a', 'stop', 'b']); // 输出: a

---

6. 性能对比与选型指南

6.1 速度基准测试（百万次迭代）

方法	耗时(ms)	是否可中断
for	12	✔️
for…of	45	✔️
forEach	210	❌
some	18	✔️

6.2 选型决策树

---

总结与最佳实践

1. 优先使用for循环：性能最优且控制灵活
2. 避免在forEach中抛异常：改用some/every替代
3. 异步遍历首选for await…of：代码简洁且可控制
4. 对象遍历过滤原型属性：配合hasOwnProperty使用

立即应用示例：

// 高性能可中断遍历
const data = Array.from({length: 1e6}, (_, i) => i);
for (let i = 0; i < data.length; i++) {
  if (data[i] > 500) break;
  if (data[i] % 100 === 0) continue;
  process(data[i]);
}