VueBloghyhero6

map 和 forEach

2025-11-17 / 2025-11-17 / 34次浏览
平时这俩个方法都是遍历数组之用,从来没有考虑打断的问题,
但是今天用GPT彻底纠正了一下,其实这俩是无法被打断的,俩个问题:

map:用来生成新数组;它会对所有元素调用回调,不能提前停。
forEach:用来遍历做副作用;同样不会被回调里的 return 停下。

副作用是指除了返回一个值以外对外部产生影响,
常见的
修改外部对象/变量
let a = 1;
let b = a++;
操作dom
element.textContent = 'Hello world';
在比如请求接口
fetch('/api/save', {...});
写入本地存储
Localstorage.setItem('token', token);

map 还是用副作用的就是生成数组,也算是改变操作的一部分。

而forEach就是纯纯的为了做副作用而做的这么一个遍历。

forEach 的特点是:
不返回新数组(返回值永远是 undefined);
只是对每个元素执行一次你给的回调函数;
很适合用来做副作用。

如果要硬停也不是不能停,
使用
try {
  [1,2,3,4].forEach(n => {
    if (n === 3) throw new Error('stop');
    console.log(n);
  });
} catch (e) { /* 中断到这里 */ }

throw 一个报错,还需要配合try catch

真正的循环体
需要可中断遍历 → 用 for...of
for (const n of [1,2,3,4]) {
  if (n === 3) break;  // 可以正常中断
  console.log(n);
}

想找到第一个满足条件的元素 → 用 find
const firstEven = [1,3,4,6].find(n => n % 2 === 0); // 4

想“遇到条件就停”且要布尔结果 → 用 some / every
some:遇到返回 true 就停止,结果为布尔值
const hasNegative = [3,5,-1,7].some(n => n < 0); // true(在 -1 处停止)

every:遇到返回 false 就停止
const allPositive = [3,5,-1,7].every(n => n > 0); // false(在 -1 处停止)

什么时候用谁(速查)
中途可 break/continue 的遍历
for...of

找第一个匹配项
find

判断“是否存在/全部满足”并可提前停
some / every

纯映射生成新数组(不提前停)
map

只做副作用,不关心结果(不提前停)
forEach