如何用Vanilla JS/ES6/ES7单行实现对象数组按性别过滤转换

先明确我们的需求：
原始数组：

[ { name: 'foo', gender: 'm' }, { name: 'bar', gender: 'f' }, { name: 'baz', gender: 'f' } ]

要转换成的目标结构：

[ { gender: 'f', names: [ { name: 'bar' }, { name: 'baz' } ] } ]

直接上单行解决方案 #

这里有两种简洁的写法，都能实现需求：

写法一（reduce版）

[arr.filter(item => item.gender === 'f').reduce((acc, { name }) => ({ gender: 'f', names: [...acc.names, { name }] }), { names: [] })]

写法二（map+合并版，可读性更强）

[Object.assign({ gender: 'f' }, { names: arr.filter(i => i.gender === 'f').map(({ name }) => ({ name })) })]

简单拆解一下逻辑 #

• 过滤环节：不管哪种写法，第一步都是用filter(item => item.gender === 'f')把所有性别为'f'的元素筛选出来，得到只包含女性的子数组。
• 重组环节：
  • 写法一用reduce逐步构建目标对象，初始值设为{ names: [] }，每一步把当前元素的name提取出来加入names数组，同时固定gender字段为'f'。
  • 写法二先通过map(({ name }) => ({ name }))把筛选后的元素转换成只含name的对象数组，再用Object.assign把这个数组和{ gender: 'f' }合并成目标对象。
• 最后一步：把生成的目标对象放进数组里，就得到了你想要的最终结构。

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