如何在tidy.js的groupBy后通过summarise实现字符串拼接？

在tidy.js中实现 #

tidy.js本身没有内置字符串拼接的汇总函数，但可以通过自定义逻辑实现需求。你可以在summarise中传入自定义函数，手动完成分组内的字符串拼接：

let myArr = [
  { group: 1, field: 'okay' },
  { group: 1, field: 'sir' },
  { group: 2, field: 'yes' },
  { group: 2, field: 'there' },
]

const result = tidy(myArr,
  groupBy('group', [
    summarise({
      allStrings: (group) => group.map(item => item.field).join(' ')
    })
  ])
)

console.log(result);

执行后会得到你期望的输出：

[
  { group: 1, allStrings: 'okay sir' },
  { group: 2, allStrings: 'yes there' }
]

核心逻辑是利用summarise支持自定义函数的特性，先提取分组内所有field字段的值，再用join(' ')完成字符串拼接。

原生JavaScript实现 #

如果不依赖tidy.js，原生JS可以直接通过Array.reduce完成分组拼接：

let myArr = [
  { group: 1, field: 'okay' },
  { group: 1, field: 'sir' },
  { group: 2, field: 'yes' },
  { group: 2, field: 'there' },
]

const grouped = myArr.reduce((acc, item) => {
  const key = item.group;
  if (!acc[key]) {
    acc[key] = { group: key, allStrings: '' };
  }
  acc[key].allStrings = acc[key].allStrings 
    ? `${acc[key].allStrings} ${item.field}` 
    : item.field;
  return acc;
}, {});

const result = Object.values(grouped);
console.log(result);

这段代码先通过reduce按group字段分组并拼接字符串，最后用Object.values将分组后的对象转为数组，得到目标结果。

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