🚀 如何优化JavaScript中的循环和条件语句

📅 发布于 2026年1月 | 👤 作者：博主 | 🏷️ 标签：JavaScript优化, 循环优化, 条件语句, 性能优化, Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

🔄 一、循环优化策略

1. 避免在循环条件中重复计算

// ❌ 反例（每次迭代都重新计算 .length）
for (let i = 0; i < arr.length; i++) { /* ... */ }

// ✅ 优化（缓存长度）
for (let i = 0, len = arr.length; i < len; i++) { /* ... */ }

// 或 for...of（更现代、简洁，且对 Array/TypedArray/Map/Set 优化良好）
for (const item of arr) { /* ... */ }

2. 优先使用 for...of 或 forEach，慎用 for...in

🌟 推荐循环方式：

3. 避免在循环内创建函数或对象

✅ 最佳实践：事件委托 + dataset（避免大量闭包）

4. 大数据量：考虑分片（Chunking）或 Web Worker

若需处理 >10k 条数据，同步循环会阻塞主线程 → 页面卡顿。

📋 分片原理

把 10,000 次循环拆成 10 片，每片 1,000 次。每执行完 1,000 次，就用 setTimeout(..., 0) 把下一片「排队」到任务队列末尾，让出主线程控制权 → 浏览器趁机渲染/响应用户事件。

✅ 方案：setTimeout 分片

function processChunk(items, chunkSize = 1000) {
  let i = 0;

  function doChunk() {
    const end = Math.min(i + chunkSize, items.length);

    for (; i < end; i++) {
      // 这里是实际处理逻辑（比如生成 DOM、计算等）
      // process items[i]
    }

    if (i < items.length) setTimeout(doChunk, 0);
    // 注意：不是立即执行，是「尽快但不阻塞」
  }

  doChunk();
}
🔧 进阶方案：

🧠 二、条件语句优化

1. 条件顺序：高频分支前置

JavaScript 引擎（如 V8）会对条件分支做预测优化，高频路径放前面可减少跳转开销：

// 假设 type 为 'A' 的概率 >90%
if (type === 'A') {
  // ...
} else if (type === 'B') {
  // ...
} else {
  // rare case
}

2. 多分支 → 用 Map 或 Object 查表代替 if-else/switch

方案 适用场景 特点
对象字面量 key 是固定字符串 V8 优化最好，简洁高效
Map 需要动态增删或 key 非字符串 支持任意类型 key，不影响原型链

方案一：对象查表法（Object Literal）

// ✅ 推荐：当 key 是「固定字符串」时，用纯对象最简洁高效
const operations = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b,
  mul: (a, b) => a * b,
  div: (a, b) => b !== 0 ? a / b : NaN,
  mod: (a, b) => a % b,
  pow: (a, b) => Math.pow(a, b),
};

function calculate(op, a, b) {
  const fn = operations[op];
  if (!fn) throw new Error(`Unknown operator: ${op}`);
  return fn(a, b);
}

方案二：Map 查表法

// ✅ 推荐：当需要「动态增删」或「key 非字符串」时
const operations = new Map([
  ['add', (a, b) => a + b],
  ['sub', (a, b) => a - b],
  // ... 其他操作
]);

// 动态注册新操作（插件系统常用！）
operations.set('sqrt', (a) => Math.sqrt(a));
operations.set(1001, specialHandler); // key 可以是 number！

function calculate(op, ...args) {
  const fn = operations.get(op);
  if (!fn) throw new Error(`Unknown operator: ${op}`);
  return fn(...args);
}

3. 避免深层嵌套 → 提前 return

// ❌ 深层嵌套
function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasPermission) {
        // 处理逻辑
      }
    }
  }
}

// ✅ 提前 return
function processUser(user) {
  if (!user) return;
  if (!user.isActive) return;
  if (!user.hasPermission) return;

  // 处理逻辑
}
🎯 核心优化原则：

← 返回首页