javascript - 数组:有条件地映射元素

Question

我使用 Redux，我经常会用这样的表达式编写 reducer:

return users.map(user =>
  user.id !== selectedUserID ? user : {
    ... user,
    removed: false
  }
);

意图应该足够清楚:仅修改数组中具有给定 id 的项目，同时按原样复制其他项目。另请注意，排序很重要，否则我可以只使用 filter() 函数。

此片段触发了一个 no-confusing-arrow eslint 上的错误，这对我来说很有意义。这也可以通过在箭头函数体周围添加圆括号来轻松解决，所以这里没什么大不了的:

return users.map(user => (
  user.id !== selectedUserID ? user : {
    ... user,
    removed: false
  }
));

我也想通过prettier解析这段代码，它会自动删除箭头函数主体周围的括号，返回到代码段的版本 1。

这里显而易见的解决方案是以冗长的方式编写箭头函数:

return users.map(user => {
  if(user.id !== selectedUserID) {
    return user; // unmodified user
  }
  return {
    ... user,
    removed: false
  };
});

但老实说，我觉得它有点太笨拙了。

除了特定的上下文和使用的工具(eslint 和 prettier，可以不同地配置/关闭/等等)，有没有更好的写法？强>

在我最疯狂的梦想中，它存在一个函数，其签名类似于:

Array.mapIf(callback, condition)

循环数组中的所有元素，并仅对满足给定条件的元素调用回调函数，同时返回其他未修改的元素。

我显然可以自己编写这样的函数，但也许其他函数式语言中已经存在一些值得研究一般文化/灵感的东西。

Answer 1

没有这样的原生函数，因为你可以很容易地自己实现它:

const mapWhen = (p, f) => xs => xs.map(x => p(x) ? f(x) : x);

const users = [
  {id: 1, removed: true},
  {id: 2, removed: true},
  {id: 3, removed: true}
];

console.log(
  mapWhen(
    ({id}) => id === 2,
    user => Object.assign({}, user, {removed: false})
  ) (users)
);

我选择了 mapWhen作为名称而不是 mapIf ，因为后者意味着有一个 else分支机构。

使用成熟的函数式语言，您可能会使用 functional lense 来解决这个问题.然而，我认为 mapWhen对你的情况来说已经足够了，而且更惯用。