JavaScript ES6中.map()内调用.find()返回undefined的问题

嘿，这是个很常见的箭头函数细节问题，我来给你拆解清楚！

首先，咱们先看你用map的这段代码：

return valuesArray.map((objValue) => { Dataset.find(dataObj => dataObj.value === objValue) });

问题出在箭头函数的返回规则上：当你用大括号{}包裹箭头函数的代码块时，JavaScript不会自动返回代码块里的结果——你必须显式写return语句才行！

你现在的代码里，map的每个回调函数都没有返回值，所以默认返回undefined，最终整个map调用就会返回一个全是undefined的数组。

而你用forEach的方式是手动把find的结果推入新数组，forEach本身不关心回调的返回值，它只是执行遍历操作，所以你手动收集的结果自然是对的。

怎么修复map的代码？ #

有两种简单的方式：

1. 去掉大括号，用箭头函数的隐式返回：

return valuesArray.map(objValue => Dataset.find(dataObj => dataObj.value === objValue));

当箭头函数没有大括号时，它会自动返回箭头后面表达式的结果，这样find的匹配值就会被正确返回给map，生成你想要的数组。

2. 显式添加return语句：

return valuesArray.map((objValue) => { 
  return Dataset.find(dataObj => dataObj.value === objValue); 
});

如果一定要用大括号包裹代码块（比如后面要加更多逻辑），记得加上return把find的结果返回出去。

额外提醒 #

如果Dataset里可能存在没有匹配objValue的情况，find会返回undefined，这时候map生成的数组里也会包含undefined。如果想过滤掉这些无效项，可以再链式调用filter：

return valuesArray.map(objValue => Dataset.find(dataObj => dataObj.value === objValue))
  .filter(item => item !== undefined);

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