如何将JavaScript数组数据转换为指定结构的键值对对象

实现逻辑说明 #

核心逻辑是遍历原数组，逐一把每个元素的name属性值作为结果对象的键，对应需要的数值属性（本场景为starCount）作为键对应的值即可，以下是几种常用实现方式：

方法1：reduce 实现（最常用简洁写法） #

reduce 是数组转聚合结果的首选方法，初始值传空对象，遍历过程中逐次给对象挂载键值对：

const data = [
  { name: 'hcs_utils', starCount: 0 },
  { name: 'K', starCount: 0 },
  { name: 'Heroes of Wesnoth', starCount: 0 },
  { name: 'Leiningen', starCount: 1 },
  { name: 'TearDownWalls', starCount: 1 }
]

const result = data.reduce((res, item) => {
  res[item.name] = item.starCount
  return res
}, {})

运行后得到的结果结构和需求完全匹配：

{
  "hcs_utils": 0,
  "K": 0,
  "Heroes of Wesnoth": 0,
  "Leiningen": 1,
  "TearDownWalls": 1
}

方法2：for 循环实现（兼容性最佳） #

如果需要兼容极低版本JS环境，直接用基础for循环遍历即可，逻辑无依赖：

const result = {}
for (let i = 0; i < data.length; i++) {
  const currentItem = data[i]
  result[currentItem.name] = currentItem.starCount
}

方法3：Object.fromEntries 实现（ES2022+ 极简写法） #

支持ES2022及以上标准的环境中，可以先把数组映射为[键, 值]格式的二维数组，再直接通过Object.fromEntries转成对象：

const result = Object.fromEntries(
  data.map(item => [item.name, item.starCount])
)

注意事项 #

由于JS对象的键具有唯一性，如果原数组中存在多个name值相同的元素，后遍历到的元素值会覆盖前序同键的值。如果需要做同名值累加等自定义逻辑，只需在赋值步骤增加对应处理即可，例如统计同名项目总star数的写法：

// 同名starCount累加示例
const countResult = data.reduce((res, item) => {
  res[item.name] = (res[item.name] ?? 0) + item.starCount
  return res
}, {})

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