为何JavaScript的filter箭头函数无大括号生效，加大括号却失效？

这是箭头函数语法的一个常见坑点——箭头函数的两种写法有着关键区别：

• 当箭头函数直接跟表达式（不带大括号）时，会隐式返回这个表达式的结果，比如你最初的写法：

  const result = words.filter(word => word.length > 6);
  

  这里相当于自动帮你加了return，等价于return word.length > 6。

• 但当你用大括号包裹代码块时，箭头函数就不会自动返回值了，必须显式使用return语句来指定要返回的判断结果，否则函数默认返回undefined。而filter会把返回值转为布尔值，undefined对应false，所以所有元素都被过滤掉了，这就是你修改后代码不生效的原因。

正确的带大括号写法 #

只需要在大括号里加上return即可：

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => {
  return word.length > 6; // 显式返回判断结果
});
console.log(result); // 输出: ["exuberant", "destruction", "present"]

扩展：多行复杂计算的场景 #

既然你需要在大括号里写多行逻辑，比如中间做一些字符串处理、变量计算，只需要把所有逻辑写完后，最后return最终的判断条件就行。举个例子：

const result = words.filter(word => {
  // 第一步：把单词转成小写
  const lowerCaseWord = word.toLowerCase();
  // 第二步：计算处理后的单词长度（比如去掉非字母字符）
  const processedLength = lowerCaseWord.replace(/[^a-z]/g, '').length;
  // 第三步：返回最终的判断条件
  return processedLength > 6;
});

这样既可以写多行复杂逻辑，又能让filter正确识别每个元素是否符合条件。

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