如何修复ESLint提示的Array.prototype.map()箭头函数需返回值警告？

首先明确两个核心问题：

1. ESLint警告的根源：Array.prototype.map()的设计目的是转换数组元素、生成新数组，因此它的回调函数必须返回一个值。你当前的代码只是用map遍历数组做累加操作，没有返回值，触发了array-callback-return规则警告。
2. 箭头函数改()报错的原因：箭头函数的() => (...)是隐式返回语法，括号内只能放单个可求值的表达式（比如三元表达式），而if-else是语句块，不属于表达式，因此会报语法错误。

推荐解决方案 #

方案1：换用forEach（最贴合当前场景） #

如果你只是需要遍历数组执行累加这类副作用操作，forEach才是正确的选择——它不需要回调返回值，完全适配你的需求：

bills.forEach((bill) => {
  total += bill.val ? bill.val : 0;
});
// 或者简化写法
bills.forEach((bill) => {
  total += bill.val || 0;
});

方案2：用reduce直接完成累加（更符合语义） #

累加操作本质上是reduce的典型应用场景，它可以直接计算出结果，不需要额外声明外部变量total，也不会触发任何ESLint警告：

const total = bills.reduce((accumulator, bill) => {
  return accumulator + (bill.val || 0);
}, 0); // 第二个参数0是累加的初始值

甚至可以简化为隐式返回的写法：

const total = bills.reduce((acc, bill) => acc + (bill.val || 0), 0);

方案3：非要用map的话（不推荐） #

如果坚持使用map，只需给回调函数添加返回值即可满足ESLint规则，但这种做法不符合map的设计语义（生成新数组却不用），属于浪费内存的写法：

bills.map((bill) => {
  total += bill.val || 0;
  return bill.val; // 随便返回一个值即可，比如undefined、null都可以
});

为什么箭头函数改()会报错？ #

箭头函数的() => (...)语法是隐式返回单个表达式，而if-else是语句，不能直接放在括号里。如果想用隐式返回实现相同逻辑，需要把if-else转换成三元表达式（但依然不适合当前累加场景）：

// 仅作语法演示，不推荐用于累加操作
bills.map((bill) => (total += bill.val ? bill.val : 0));

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