将数组按指定键转换为键值对对象-js教程-PHP中文网

将数组按指定键转换为键值对对象

本文介绍如何使用 JavaScript 的 reduce() 方法将包含对象的数组转换为以某个属性为键、原对象为值的普通对象，适用于需要快速查找或结构化数据的场景。

本文介绍如何使用 javascript 的 `reduce()` 方法将包含对象的数组转换为以某个属性为键、原对象为值的普通对象，适用于需要快速查找或结构化数据的场景。

在实际开发中，我们常遇到将数组结构转换为更便于访问的键值映射（Map-like）对象的需求。例如，给定一个学生信息数组，希望以 name 字段作为唯一标识，快速通过姓名获取对应学生对象——此时，将数组“扁平化”为以 name 为键的对象是最自然的解决方案。

上述需求可通过 Array.prototype.reduce() 高效实现：

const arr = [
  { name: 'abc', age: 15, roll_no: 25 },
  { name: 'def', age: 10, roll_no: 20 },
  { name: 'xyz', age: 16, roll_no: 18 }
];

const result = arr.reduce((acc, curr) => {
  acc[curr.name] = curr;
  return acc;
}, {});

console.log(result);
// 输出：
// {
//   abc: { name: 'abc', age: 15, roll_no: 25 },
//   def: { name: 'def', age: 10, roll_no: 20 },
//   xyz: { name: 'xyz', age: 16, roll_no: 18 }
// }

✅ 关键要点说明：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

reduce() 的初始值为一个空对象 {}，作为累加器（acc）；
每次迭代将当前对象的 curr.name 作为属性名，curr 本身作为属性值赋给 acc；
最终返回的是一个普通对象（非数组），因此原问题中期望输出的 [ abc: {...}, ... ] 语法在 JavaScript 中无效——方括号内不能直接写键值对；正确结果应为对象字面量 { abc: {...}, def: {...}, xyz: {...} }。

⚠️ 注意事项：

若 name 不唯一，后出现的对象会覆盖前一个，导致数据丢失；如需保留全部，可改用数组作为值（如 acc[curr.name] = acc[curr.name] || []; acc[curr.name].push(curr);）；
若键名含特殊字符或可能为 undefined/null，建议先校验 curr.name != null && typeof curr.name === 'string'；

替代方案包括 Object.fromEntries() + map()（ES2019+）：

const result = Object.fromEntries(arr.map(item => [item.name, item]));

该模式广泛应用于状态管理（如 Redux 中的 normalized state）、缓存构建及 API 响应预处理，是前端数据结构转换的核心技巧之一。