React中如何将行数据映射为列格式并编写通用动态转换函数

需求说明 #

输入为对象结构的数组，示例输入：

const data = [{id:1,name:"xyz"},{id:2,name:"abc"}]

需要将同字段的所有值聚合到对应字段下，输出格式如下：

[id:{1,2},name:{"xyz","abc"}]

要求函数通用，不需要提前硬编码字段名，可适配任意字段的对象数组输入。

实现代码 #

核心逻辑是先自动收集数组对象中所有出现的字段，再按字段遍历收集所有对应值，最后按格式拼接结果，字符串类型值会自动包裹双引号，数字、布尔值等非字符串类型直接输出原值：

function groupArrayByField(data) {
  // 空输入兜底
  if (!Array.isArray(data) || !data.length) return '[]'
  // 收集所有不重复的字段名
  const allFields = [...new Set(data.flatMap(item => Object.keys(item)))]
  // 按字段聚合值
  const fieldSegments = allFields.map(field => {
    const fieldValues = data.map(item => {
      const value = item[field]
      return typeof value === 'string' ? `"${value}"` : value
    })
    return `${field}:{${fieldValues.join(',')}}`
  })
  // 拼接为最终要求的格式
  return `[${fieldSegments.join(',')}]`
}

调用验证 #

用示例输入测试：

const inputData = [{id:1,name:"xyz"},{id:2,name:"abc"}]
console.log(groupArrayByField(inputData))
// 输出结果：[id:{1,2},name:{"xyz","abc"}]，完全匹配预期

函数支持动态扩展，如果后续输入数组的对象新增其他字段（比如age、address等），不需要修改函数代码，会自动识别字段完成聚合转换。

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