数组方法返回undefined问题：为何无法获取匹配的数组元素？

先逐个拆解你遇到的问题：

1. forEach 为什么返回 undefined？ #

forEach 数组方法的设计就是没有返回值，它只负责遍历数组执行回调逻辑，不管你在回调里 return 什么，最终 forEach 都会返回 undefined，所以你把它赋值给变量自然拿不到结果。

2. filter 返回空数组的原因？ #

你的 filter 回调里漏了 return 语句：

const name = dragons.filter(element => {
    element.includes("John"); // 这里没有return，默认返回undefined，被视为false
});

filter 需要回调返回一个布尔值，来决定当前元素是否保留。你只执行了判断但没返回结果，回调默认返回 undefined，会被当成 false，所以所有元素都被过滤掉，得到空数组。

3. 函数里用 forEach 还是返回 undefined？ #

同样的问题：forEach 不会帮你返回结果，而且回调里的 return 只会终止当前回调的执行，不会让外层函数返回值。你的外层 name 函数没有任何 return 语句，所以调用它自然返回 undefined。

4. forEach 里定义的变量外层访问不到？ #

你在 forEach 的回调里用 const name = element 定义的变量，是回调函数的局部变量，作用域只在这个回调内部，外层根本访问不到这个变量，所以外层的 name 要么没定义，要么就是之前的 undefined。

正确的写法 #

需求是返回包含"John"的所有名字组成的数组，用 filter 就可以，补全 return 就行：

const dragons = ['Tim', 'Johnathan', 'Sandy', 'Sarah'];
const matchedNames = dragons.filter(element => {
    return element.includes("John");
});
// 或者更简洁的箭头函数写法
const matchedNames = dragons.filter(element => element.includes("John"));

这样就能得到 ['Johnathan']，完全符合你的需求。

如果只需要找第一个匹配的元素，可以用 find，但它返回单个元素而不是数组：

const firstMatch = dragons.find(element => element.includes("John")); // 得到"Johnathan"

内容的提问来源于stack exchange，提问作者diegossn