JS 数组所有变态遍历・完整案例 + 场景 + 对比

1. forEach + try/catch 强行中断（变态跳出）

需求

遍历数组，遇到 3 立刻停止，forEach 原生不能 break

复制代码

const arr = [1, 2, 3, 4, 5];
try {
  arr.forEach(item => {
    if (item === 3) throw "停止遍历";
    console.log(item); // 输出 1 2
  });
} catch (e) {}

场景：老代码必须用 forEach，又要中断；业务不推荐
缺点：抛异常、可读性差

2. some /every 伪装可控遍历（最实用的变态）

需求：遍历到 3 停止

复制代码

const arr = [1, 2, 3, 4];
arr.some((v) => {
  console.log(v); // 1 2 3
  return v === 3; // return true 立刻停止
});

场景：需要遍历 + 中途终止，不想写 for 循环
对比：every 是 return false 停止

3. reduce 万能全家桶：一次遍历 = 过滤 + 映射 + 求和（重点）

需求：过滤价格 > 100，价格 ×2，同时算总价

普通写法（遍历 3 次，性能差）

复制代码

const goods = [
  { name: "a", price: 80 },
  { name: "b", price: 150 },
  { name: "c", price: 200 },
];
const filterArr = goods.filter((i) => i.price > 100);
const mapArr = filterArr.map((i) => ({ ...i, price: i.price * 2 }));
const total = mapArr.reduce((s, i) => s + i.price, 0);

reduce 变态写法（只遍历 1 次，性能高）

复制代码

const res = goods.reduce(
  (acc, cur) => {
    if (cur.price > 100) {
      const newItem = { ...cur, price: cur.price * 2 };
      acc.list.push(newItem);
      acc.sum += newItem.price;
    }
    return acc;
  },
  { list: [], sum: 0 }
);
// res.list 处理后数组，res.sum 总价

场景：大数据列表、一次遍历做多个操作、性能优化

4. 手动迭代器 Symbol.iterator（底层控制）

需求：精细控制每一步遍历，可暂停

复制代码

const arr = [1, 2, 3];
const it = arr[Symbol.iterator]();
let result;
while (!(result = it.next()).done) {
  console.log(result.value); // 1 2 3
}

场景：手写框架、Generator、自定义迭代对象、底层原理

递归解构遍历（纯函数式，无 for 循环）

const loop = ([x, ...xs]) => {
if (!x) return;
console.log(x);
loop(xs);
};
loop([1, 2, 3]);

场景：树形结构、扁平化数组、面试考察递归 + 解构
缺点：数据量大栈溢出

6. map + filter + reduce 链式套娃（连续运算）

需求：大于 2 的数 ×10 后求和

复制代码

const total = [1, 2, 3, 4, 5]
  .filter((v) => v > 2)
  .map((v) => v * 10)
  .reduce((s, v) => s + v, 0);
console.log(total); // 120

场景：简单数据处理，可读性好，但多次遍历

终极使用对照表

日常业务：for / for...of / forEach / map/filter/reduce 正常用
要中断遍历：优先 some，不用 try/catch
大数据、多操作合并：用 reduce 一次遍历
底层 / 手写源码：手动迭代器、递归