使用forEach结合filterKey过滤数组时newArr为undefined的问题排查

嘿，这问题我太熟了！咱们先把根源说透，再给你实打实的修正方案～

问题根源：forEach的本质是「遍历执行」，而非「返回结果」 #

forEach 方法的设计目的只是遍历数组并执行回调——它本身没有返回值，默认会返回 undefined。所以你直接把 forEach 的执行结果赋值给 newArr，得到的必然是 undefined，这和你的回调逻辑对不对完全没关系！

举个你大概率写错的示例代码：

const arr = [1, 2, 3, 4, 5];
const filterKey = 3;
// 错误操作：把forEach的返回值（undefined）赋值给newArr
const newArr = arr.forEach(item => {
  if (item > filterKey) {
    return item; // 这里的return毫无意义，forEach根本不会收集它
  }
});
console.log(newArr); // 输出：undefined

正确的解决方案 #

根据你的需求，有两种靠谱的处理方式：

1. 优先用专门的filter方法（最推荐）

filter 就是为数组过滤场景量身定做的，它会遍历数组，自动收集所有让回调返回true的元素，最后返回一个全新的数组，完美匹配你的需求：

const arr = [1, 2, 3, 4, 5];
const filterKey = 3;
const newArr = arr.filter(item => item > filterKey);
console.log(newArr); // 输出：[4, 5]

2. 一定要用forEach的话，手动维护结果数组

如果出于某些原因必须用forEach，那你得先初始化一个空数组，然后在回调里手动把符合条件的元素加进去：

const arr = [1, 2, 3, 4, 5];
const filterKey = 3;
const newArr = []; // 先创建空数组存储结果
arr.forEach(item => {
  if (item > filterKey) {
    newArr.push(item); // 手动添加符合条件的元素
  }
});
console.log(newArr); // 输出：[4, 5]

总结 #

别再用forEach来做过滤啦，它不是干这个的！filter方法更简洁、语义更清晰，是这类场景的最佳选择。如果非要用forEach，记得自己初始化数组并手动填充结果～

内容的提问来源于stack exchange，提问作者Mat.Now