数组：有条件地映射元素

Question

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

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

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

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

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

我也想通过prettier解析这段代码，自动去掉箭头函数体周围的括号，回到sn-p的版本1。

这里明显的解决方案是用详细的方式编写箭头函数：

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

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

除了特定的上下文和使用的工具（eslint 和 prettier，可以进行不同的配置/关闭/其他），有没有更好的方法来编写这个？强>

在我最疯狂的梦想中，它存在一个签名类似于：

Array.mapIf(callback, condition)

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

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

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 足以满足您的情况并且更惯用。

Answer 2

在 ruby​​ 中你会返回类似的东西

users.dup.select {|u| u.id == selected_user_id }.each {|u| u.removed = false }

dup 在这种情况下很重要，因为在 Redux 中您希望返回一个新数组而不修改原始数组，因此您首先必须创建原始数组的副本。见https://stackoverflow.com/a/625746/1627766（注意讨论和这个很相似）

在你的情况下，我会使用：

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

const selectedUserId = 2;

console.log(
  users.map(
    (user) => ({
      ...user,
      removed: (user.id !== selectedUserId ? false : user.removed)
    })
  )
);

Answer 3

如有必要，您可以使用Object.assign 添加属性。

return users.map(user =>
    Object.assign({}, user, user.id === selectedUserID && { removed: false })
);

Answer 4

我将提供这个作为@ftor 实用答案的补充——这个 sn-p 展示了如何使用泛型函数来完成某种结果

const identity = x =>
  x

const comp = ( f, g ) =>
  x => f ( g ( x ) )
  
const compose = ( ...fs ) =>
  fs.reduce ( comp, identity )
  
const append = ( xs, x ) =>
  xs.concat ( [ x ] )

const transduce = ( ...ts ) => xs =>
  xs.reduce ( compose ( ...ts ) ( append ), [] )

const when = f =>
  k => ( acc, x ) => f ( x ) ? k ( acc, x ) : append ( acc, x )

const mapper = f =>
  k => ( acc, x ) => k ( acc, f ( x ) )

const data0 =
  [ { id: 1, remove: true }
  , { id: 2, remove: true }
  , { id: 3, remove: true }
  ]

const data1 =
  transduce ( when ( x => x.id === 2)
            , mapper ( x => ( { ...x, remove: false } ) )
            )
            (data0)
            
console.log (data1)
// [ { id: 1, remove: true }
// , { id: 2, remove: false }
// , { id: 3, remove: true }
// ]

但是，我认为我们可以通过更通用的行为来改进 when，我们需要的只是一些发明类型 Left 和 Right 的帮助——在这段摘录之后展开完整的代码 sn-p

const Left = value =>
  ({ fold: ( f, _ ) =>
       f ( value )
  })

const Right = value =>
  ({ fold: ( _, f ) =>
       f ( value )
  })

// a more generic when
const when = f =>
  k => ( acc, x ) => f ( x ) ? k ( acc, Right ( x ) ) : k ( acc, Left ( x ) )

// mapping over Left/Right
mapper ( m =>
  m.fold ( identity                         // Left branch
         , x => ( { ...x, remove: false } ) // Right branch
         ) ) 

const Left = value =>
  ({ fold: ( f, _ ) =>
       f ( value )
  })
  
const Right = value =>
  ({ fold: ( _, f ) =>
       f ( value )
  })

const identity = x =>
  x

const comp = ( f, g ) =>
  x => f ( g ( x ) )
  
const compose = ( ...fs ) =>
  fs.reduce ( comp, identity )
  
const append = ( xs, x ) =>
  xs.concat ( [ x ] )

const transduce = ( ...ts ) => xs =>
  xs.reduce ( compose ( ...ts ) ( append ), [] )

const when = f =>
  k => ( acc, x ) => f ( x ) ? k ( acc, Right ( x ) ) : k ( acc, Left ( x ) )

const mapper = f =>
  k => ( acc, x ) => k ( acc, f ( x ) )

const data0 =
  [ { id: 1, remove: true }
  , { id: 2, remove: true }
  , { id: 3, remove: true }
  ]

const data1 =
  transduce ( when ( x => x.id === 2 )
            , mapper ( m =>
               m.fold ( identity
                      , x => ( { ...x, remove: false } ) 
                      ) )
            )
            (data0)
            
console.log (data1)
// [ { id: 1, remove: true }
// , { id: 2, remove: false }
// , { id: 3, remove: true }
// ]

所以你的最终函数可能看起来像这样

const updateWhen = ( f, records, xs ) =>
  transduce ( when ( f )
            , mapper ( m =>
                m.fold ( identity
                       , x => ( { ...x, ...records } )
                       ) )
            ) ( xs )

你会像这样在你的 reducer 中调用它

const BakeryReducer = ( donuts = initState , action ) =>
  {
    switch ( action.type ) {
      case ApplyGlaze:
        return updateWhen ( donut => donut.id === action.donutId )
                          , { glaze: action.glaze }
                          , donuts
                          )
      // ...
      default:
        return donuts
    }
  }