如何满足 lint 规则“array-callback-return”？答案

【问题标题】：How to satisfy the lint rules 'array-callback-return'?如何满足 lint 规则“array-callback-return”？
【发布时间】：2017-08-18 18:04:14
【问题描述】：

这是我的第一个剪辑：

const planLimits = {plan1: {condition1: 50, ...}}

function initialisePlanLimits(planLimits) {
  const limits = new Map();
  Object.keys(planLimits).map((planId) => (
    const limitMap = new Map(Object.entries(planLimits[planId]));
    limits.set(planId, limitMap);
  ));
  return limits;
}

linter 标记此错误：error Expected to return a value in this function array-callback-return

于是我改成了这个版本：

function initialisePlanLimits(planLimits) {
  const limits = new Map();
  Object.keys(planLimits).map((planId) => (
    limits.set(planId, new Map(Object.entries(planLimits[planId])))
  ));
  return limits;
}

它抛出另一个错误Unexpected parentheses around single function argument having a body with no curly braces arrow-parens

我的问题：

1) 我认为我可以通过在咖喱括号内添加return null 来修复我的第一个版本。但是有没有更好、更优雅的方式呢？在这种情况下，虚假的 return 语句没有意义

2) 为什么第二个版本失败了？不是和第一版一样吗？

【问题讨论】：

标签： ecmascript-6 eslint

【解决方案1】：

如果我使用forEach 而不是map，则不会导致array-callback-return lint 错误

 Object.keys(planLimits).forEach((planId) => (
    const limitMap = new Map(Object.entries(planLimits[planId]));
    limits.set(planId, limitMap);
  ));

【讨论】：

【解决方案2】：

TLDR：ESLint 和函数返回值

此问题是由于使用 map() 时未返回值引起的，请参阅文档中的 results 是如何预期的...

map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。（来源：MDN WebDocs。）

JavaScript 中的问题演示

有了这个JS的代码示例，它显示了一组元素......

  var newarray = [];
  array.map( (item, index) => {
      newarray.push('<li>' + item + '</li>');
  });

我收到此错误...

  Expected to return a value in arrow function  array-callback-return

如果我向上述函数添加一个返回值，错误就会消失，如下所示：

  var newarray = array.map( (item, index) => {
      return '<li>' + item + '</li>';
  });

`map()` - 那我为什么要使用它呢？

您也可以在 MDN 文档的其他地方清楚地看到，返回的是，“一个新数组，每个元素都是回调函数的 [返回值] 的结果。”所以，如果你使用map()，同时使用return returnvalue也是一个很好的主意！

map() 是一个强大的工具。不要把那个工具扔掉。

【讨论】：

链接的线程不支持这个答案。它谈到了 Pascal，其中“函数”与“过程”不同。在 JavaScript 中，无论是否返回值，两者都称为“函数”。
@Thomas 你是对的！感谢您指出了这一点。我只是在编辑这个答案的过程中，所以我省略了该部分，并更正了Map() MDN 网络链接以正确指向map() func，并进一步清理了我的示例。

【解决方案3】：

嗯，公认的答案提倡使用“forEach”，这是真的。请阅读下面来自ESLint documentation的解释，

Array 有多种过滤、映射和折叠的方法。如果我们忘记在这些回调中写 return 语句，那可能是一个错误。如果您不想使用 return 或不需要返回的结果，请考虑改用 .forEach。

【讨论】：