在Immutable.js中按值分组后取组内首元素并扩展属性可行吗？

首先要告诉你，你提出的这种用groupBy()分组后，在map()里取分组首个元素并添加聚合属性的方案是完全可行的，而且你写的示例代码已经非常接近最终结果了，只需要小小的调整就能得到你想要的List结构。

修正后的完整代码 #

import { fromJS } from 'immutable';

const result = fromJS([ 
  {'id':1, 'x':2}, 
  {'id':2, 'x':3}, 
  {'id':2, 'x':4} 
])
.groupBy(item => item.get('id'))
.map(values => {
  // 取分组内的首个元素
  const firstItem = values.first();
  // 聚合分组内所有的x值，添加为新属性xs
  return firstItem.merge({
    xs: values.map(d => d.get('x'))
  });
})
// 关键：把groupBy返回的OrderedMap转换成List
.toList();

// 输出结果就是你期望的List结构
console.log(result.toJS());
// 输出：[ { id: 1, x: 2, xs: [ 2 ] }, { id: 2, x: 3, xs: [ 3, 4 ] } ]

为什么要加.toList()？ #

因为Immutable的groupBy()方法调用后返回的是一个OrderedMap（键是分组的id值，值是对应分组的List），而你期望的输出是一个List结构，所以最后通过.toList()就能把OrderedMap的值提取出来，转换成顺序一致的List。

额外说明 #

• 如果你的分组顺序很重要，不用担心，groupBy()会保留原数组中首次出现分组键的顺序，所以转换后的List顺序和原数据中id首次出现的顺序一致。
• merge()方法会安全地合并新属性到首个元素上，不会修改原Immutable对象（符合Immutable.js的不可变特性）。

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