TypeScript 如何优雅地将表头和值数组转换为对象列表？

最简实现 #

直接结合Array.map和Object.fromEntries即可写出非常简洁的转换逻辑，代码如下：

let heads : string [] = ["name", "addr", "age"];
let vals : string [][] = [["sam", "NY", "30"],["chris", "WY", "22"],["sue", "TX", "55"]];

const result = vals.map(valRow => 
  Object.fromEntries(heads.map((head, index) => [head, valRow[index]]))
)

执行后result就是你需要的目标结构。

类型安全的通用封装 #

如果需要复用这个逻辑，同时保证TypeScript类型推导正常，可以封装为泛型工具函数：

function zipToObjectList<K extends string>(keys: K[], values: string[][]): Record<K, string>[] {
  return values.map(valRow => 
    Object.fromEntries(keys.map((key, idx) => [key, valRow[idx]]))
  ) as Record<K, string>[]
}

// 调用示例
const result = zipToObjectList(heads, vals)
// 此时result的类型会自动推导为：{ name: string; addr: string; age: string }[]
// 编辑器可以正常提示字段，避免拼写错误

额外说明 #

如果实际场景中存在values子数组长度和keys长度不一致的情况，可以在取值时补充兜底逻辑，比如把valRow[idx]改为valRow[idx] ?? ''避免出现undefined值。

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