forEach用于执行副作用且不返回新数组,map用于一对一转换并返回新数组,filter根据布尔值筛选并返回新数组;三者均不修改原数组,但forEach无法中断或链式调用,map和filter可组合使用。

forEach 只用来执行副作用,不产生新数组
forEach 是最基础的遍历方法,适合做日志打印、DOM 操作、发起请求这类“只执行不返回”的事情。它不会返回新数组,返回值永远是 undefined,所以别把它赋值给变量或链式调用。
常见错误:以为 forEach 能像 map 一样生成新数组,结果得到 undefined:
const arr = [1, 2, 3]; const doubled = arr.forEach(x => x * 2); // doubled 是 undefined
正确用法示例:
const users = [{name: 'Alice'}, {name: 'Bob'}];
users.forEach(user => console.log(user.name)); // 打印 Alice、Bob
users.forEach(user => user.active = true); // 原地打标(有副作用)- 不能用
break或return中断循环(想中断请改用for或some/every) - 不支持异步操作的顺序等待(
await在forEach回调里不会阻塞下一次迭代) - 性能上和传统
for循环接近,但多了函数调用开销
map 专门用来转换数据,必须返回新数组
map 的核心职责是“一对一映射”:输入一个数组,输出一个等长新数组,每个元素由回调函数返回值决定。它不修改原数组,也不关心回调是否产生副作用。
立即学习“Java免费学习笔记(深入)”;
典型误用:在 map 里只做 console.log 却忘了返回值,导致新数组全是 undefined:
const nums = [1, 2, 3];
const squares = nums.map(x => { console.log(x); }); // [undefined, undefined, undefined]正确写法必须显式 return 或用箭头函数简洁语法:
const nums = [1, 2, 3]; const squares = nums.map(x => x * x); // [1, 4, 9] const names = users.map(u => u.name); // ['Alice', 'Bob']
- 返回值必须存在;若回调无返回(或只写
{}而没加return),对应位置就是undefined - 适合纯函数式场景:输入确定 → 输出确定,便于测试和推导
- 和
forEach不同,map返回的新数组可直接参与链式调用(比如接filter)
filter 筛选数据,靠布尔返回值决定去留
filter 的回调函数必须返回布尔值:true 表示保留当前项,false(或 0、null、undefined 等 falsy 值)表示过滤掉。它也返回一个新数组,长度 ≤ 原数组。
容易踩的坑:
- 忘记写
return,比如arr.filter(x => { x > 2 })→ 实际返回空数组(因为代码块没返回值) - 误用赋值语句代替比较:
filter(x => x = 5)(这是赋值,永远真)而非x === 5 - 对对象属性判空不严谨:
user.name是''或undefined都会被滤掉,需明确判断逻辑
实用示例:
const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter(n => n % 2 === 0); // [2, 4]const activeUsers = users.filter(u => u.active && u.name?.trim());
filter 和 map 经常组合使用,比如先筛再转:
users.filter(u => u.age >= 18).map(u => u.email)
三者混用时要注意执行顺序和不可变性
链式调用中,filter → map → forEach 是合理顺序:先缩小数据集,再转换,最后执行动作。反过来(比如 forEach 放前面)就失去链式意义。
关键点:
-
map和filter都创建新数组,原数组不变;而直接用for循环配合push或splice会改变原数组 - 大量数据下,连续调用
filter+map会创建中间数组,内存开销比单次for循环大 - 如果需要同时筛选和转换(比如“找出偶数并平方”),用
reduce可能更高效,但可读性下降
真正容易被忽略的是:这三个方法对稀疏数组(如 [1, , 3])的处理——它们会跳过空位,不触发回调;而传统 for 循环会访问到 undefined 元素。这在处理 Canvas 像素、表格行数据时可能引发隐性 bug。











