在JavaScript开发中，对象数组是最常见的数据结构之一，很多时候我们需要把对象数组重新组织成以某个属性值为键的对象形式，方便后续的快速查找和数据操作。这种转换的核心是利用数组的迭代方法遍历原数组，同时动态生成目标对象的键名。
基础转换实现
最基础的场景是原对象数组中没有重复的待作为键的属性值，这时候可以使用Array.reduce方法来实现转换，reduce方法非常适合用来做这种累积型的数组转换操作。
// 原对象数组
const userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
// 以id为动态键转换对象
const userMap = userList.reduce((acc, cur) => {
// 动态键使用方括号语法生成
acc[cur.id] = cur;
return acc;
}, {});
console.log(userMap);
// 输出: { 1: { id: 1, name: '张三', age: 20 }, 2: { id: 2, name: '李四', age: 22 }, 3: { id: 3, name: '王五', age: 25 } }
处理重复键的场景
如果原数组中存在待作为键的属性值重复的情况，直接覆盖会导致数据丢失，这时候需要根据需求处理重复键，比如把相同键对应的对象放到一个数组里。
const scoreList = [
{ subject: '数学', score: 90, student: '张三' },
{ subject: '语文', score: 85, student: '张三' },
{ subject: '数学', score: 88, student: '李四' }
];
// 以student为动态键，相同学生的成绩放到数组里
const scoreMap = scoreList.reduce((acc, cur) => {
const key = cur.student;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(cur);
return acc;
}, {});
console.log(scoreMap);
// 输出: { 张三: [{ subject: '数学', score: 90, student: '张三' }, { subject: '语文', score: 85, student: '张三' }], 李四: [{ subject: '数学', score: 88, student: '李四' }] }
通用转换函数封装
为了复用转换逻辑，可以封装一个通用的转换函数，支持传入对象数组、键属性名，以及可选的重复键处理函数。
/**
* 对象数组转动态键对象
* @param {Array} arr 原对象数组
* @param {String} keyProp 作为键的属性名
* @param {Function} duplicateHandler 重复键处理函数，接收(已有值, 当前值)返回新值
* @returns {Object} 转换后的对象
*/
function arrayToDynamicKeyObj(arr, keyProp, duplicateHandler) {
return arr.reduce((acc, cur) => {
const key = cur[keyProp];
if (acc.hasOwnProperty(key) && typeof duplicateHandler === 'function') {
acc[key] = duplicateHandler(acc[key], cur);
} else {
acc[key] = cur;
}
return acc;
}, {});
}
// 测试重复键覆盖场景
const testArr = [
{ type: 'a', value: 1 },
{ type: 'b', value: 2 },
{ type: 'a', value: 3 }
];
const result1 = arrayToDynamicKeyObj(testArr, 'type');
console.log(result1); // { a: { type: 'a', value: 3 }, b: { type: 'b', value: 2 } }
// 测试重复键合并场景
const result2 = arrayToDynamicKeyObj(testArr, 'type', (oldVal, newVal) => {
return { ...oldVal, value: oldVal.value + newVal.value };
});
console.log(result2); // { a: { type: 'a', value: 4 }, b: { type: 'b', value: 2 } }
注意事项
- 动态键如果是数字，转换后的对象键会自动转为字符串，不过访问的时候用数字或者字符串都可以正常获取值。
- 如果原数组中的键属性值可能是undefined或者null，需要提前做判断，避免出现意外的键名。
- 使用
for...of循环也可以实现同样的转换，reduce方法的优势是代码更简洁，更符合函数式编程的思路。
这种对象数组转动态键对象的技巧在列表数据转映射、数据分组、快速查找等场景中非常实用，掌握之后可以大幅减少冗余的循环代码。
JavaScript对象数组动态键数组转换修改时间：2026-07-04 11:39:22