如何使用map等高阶数组方法将rows和columns转换为requiredObject结构

输入结构说明 #

对应示意图的两个输入变量结构如下：

• columns：列配置数组，每一项包含key（对应行数据的属性名）、title/label（列展示名称）字段
• rows：原始行数据数组，每一项是包含columns中所有key的业务数据对象

代码实现 #

我们可以结合map和reduce两个高阶数组方法完成转换，示例代码如下：

// 示例输入（和示意图结构对齐）
const columns = [
  { key: 'name', label: '姓名' },
  { key: 'age', label: '年龄' },
  { key: 'department', label: '部门' }
]
const rows = [
  { name: '张三', age: 25, department: '技术部', extra: '冗余字段' },
  { name: '李四', age: 30, department: '产品部', extra: '冗余字段' },
  { name: '王五', age: 28, department: '运营部', extra: '冗余字段' }
]

// 转换为目标requiredObject
const requiredObject = {
  // 保留列配置（可按需裁剪字段）
  columnList: columns.map(col => ({ key: col.key, label: col.label })),
  // 加工行数据，仅保留columns指定的字段
  rowList: rows.map(row => 
    columns.reduce((tempRow, col) => {
      tempRow[col.key] = row[col.key]
      return tempRow
    }, {})
  )
}

输出结果 #

运行上述代码后得到的结构如下：

{
  columnList: [
    { key: 'name', label: '姓名' },
    { key: 'age', label: '年龄' },
    { key: 'department', label: '部门' }
  ],
  rowList: [
    { name: '张三', age: 25, department: '技术部' },
    { name: '李四', age: 30, department: '产品部' },
    { name: '王五', age: 28, department: '运营部' }
  ]
}

如果你的目标结构是按列聚合数据，可以使用下面的实现：

const requiredObject = columns.reduce((res, col) => {
  res[col.key] = {
    label: col.label,
    values: rows.map(row => row[col.key])
  }
  return res
}, {})

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