JavaScript中带大括号的箭头函数导致map()返回undefined的原因及return语句的使用规则咨询

嘿，这个问题我太熟了！当初刚摸箭头函数的时候我也踩过一模一样的坑，给你好好唠唠为啥会这样：

箭头函数其实有两种写法，这两种写法的返回规则完全不一样：

• 不带大括号的「简洁体」箭头函数：这种写法下，箭头后面的表达式会被自动返回，不需要手动写return。比如你可以把正确代码简化成这样：

  const names = users.map(user => user.name);
  

  这里user.name是一个表达式，箭头函数会自动把它的结果返回给map，所以能得到正确的名字数组。

• 带大括号的「块体」箭头函数：一旦你用{}把函数代码包起来，JavaScript就会把它当成一个常规的函数代码块来处理——这时候它不会自动返回任何值，除非你显式写出return语句。

你写的错误代码就是这种情况：

const names = users.map((user) => { user.name; });

这里大括号里的user.name;只是一个单独的表达式，你没有告诉函数要把这个值返回出去，所以这个箭头函数每次执行完都会默认返回undefined，map遍历每个元素收集到的自然就是三个undefined了。

总结一下规则就好记了：

• 箭头函数用简洁体（无大括号）：自动返回箭头后的表达式结果
• 箭头函数用块体（有大括号）：必须手动写return才能返回值，否则默认返回undefined

内容来源于stack exchange