为何JavaScript中filter函数带大括号返回undefined，不带则正常？

踩过这个坑的人来报到！这其实是箭头函数的隐式返回和显式返回的区别在搞鬼，我给你拆解清楚：

箭头函数的两种写法差异 #

箭头函数有两种常见写法，核心区别就是「要不要手动写return」：

• 不带大括号：隐式返回
  当箭头后面直接跟一个表达式时，JavaScript会自动把这个表达式的结果作为函数的返回值，不需要写return。比如你原来的代码：

  const test = (el) => el % 2 == 1
  

  这里el % 2 == 1是一个布尔表达式，它的结果会自动返回给filter，filter就能根据这个布尔值筛选出奇数，所以能得到正确的数组。

  同样，你的filterTest函数也是隐式返回：

  const filterTest = (nums) => nums.filter(test)
  

  nums.filter(test)的结果会被自动返回，所以调用filterTest(rain)能拿到筛选后的数组。

• 带大括号：必须显式写return
  一旦你给箭头函数加上大括号，就相当于把函数体变成了一个代码块。这时候JavaScript不会自动返回任何值，你必须手动用return语句指定要返回的内容，否则函数默认返回undefined。

  举个例子，如果你的代码变成这样：

  // 错误写法：加了大括号但没写return
  const filterTest = (nums) => { nums.filter(test) }
  

  这个filterTest函数里只执行了nums.filter(test)，但没有把结果返回出去，所以调用它就会得到undefined。

  再比如如果给test函数加了大括号：

  // 错误写法：加了大括号但没写return
  const test = (el) => { el % 2 == 1 }
  

  这个函数每次调用都返回undefined，而filter会把undefined当成false处理，最终筛选结果就是空数组。

关于Atom自动加大括号的问题 #

Atom的某些代码格式化插件（比如Prettier）默认可能会给箭头函数加上大括号，这时候你需要注意补全return语句，或者去插件设置里调整规则，允许单个表达式的箭头函数使用隐式返回（也就是不自动加括号）。

正确的带大括号写法 #

如果一定要用大括号，记得补上return：

const filterTest = (nums) => { 
  return nums.filter(test) 
}
const test = (el) => { 
  return el % 2 == 1 
}

这样就能和原来的代码得到一样的结果啦～

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