JavaScript：高效实现对象数组到键值数组的转置-js教程-PHP中文网

JavaScript：高效实现对象数组到键值数组的转置

聖光之護

发布： 2025-11-30 13:34:00

原创

761人浏览过

JavaScript：高效实现对象数组到键值数组的转置

本教程旨在详细介绍如何在javascript中将一个包含多个json对象的数组转置为一个新的对象，其中新对象的键是原对象中的所有属性名，而值则是对应属性名在所有原对象中的值组成的数组。我们将通过一个高效且易于理解的函数实现这一常见数据转换需求。

理解数据转置需求

在数据处理和前端开发中，我们经常会遇到需要对数据结构进行转换的场景。一个典型的例子是将“行式”数据（即每个对象代表一行记录）转换为“列式”数据（即每个键对应一列数据）。

原始数据结构示例： 假设我们有一个JSON对象数组，每个对象都代表一条记录，包含 name、date、id 和 priority 等属性：

const data = [
  {name: 'Alex', date: '05/17/2023 10:32 PM', id: '00153168', priority: '3-Medium'},
  {name: 'Peter', date: '05/17/2023 11:32 PM', id: '00153169', priority: '3-Medium'}
];

登录后复制

目标数据结构示例： 我们希望将其转换为以下形式，其中每个键（如 name）对应一个数组，该数组包含了所有原始对象中该键的值：

{
  name : ['Alex','Peter'],
  date : ['05/17/2023 10:32 PM','05/17/2023 11:32 PM'],
  id: ['00153168','00153169'],
  priority: ['3-Medium', '3-Medium']
}

登录后复制

这种转换在数据分析、图表渲染或特定UI组件的数据绑定时非常有用。

核心实现方法：transpose 函数

我们将实现一个名为 transpose 的函数来完成上述数据结构转换。该函数的核心思想是遍历原始对象数组，然后针对每个对象的键值对，将其值按原始对象在数组中的索引位置存入目标对象的对应键的数组中。

/**
 * 将对象数组转置为键值数组对象。
 * 该函数能处理不规则对象，即原始对象不要求所有键都相同，
 * 缺失的值将在结果数组中体现为 undefined。
 *
 * @param {Array<Object>} list 待转置的对象数组。
 * @returns {Object} 转置后的键值数组对象。
 */
function transpose(list) {
    const result = {}; // 初始化结果对象

    // 遍历原始对象数组中的每一个对象
    for (let i = 0; i < list.length; i++) {
        // 遍历当前对象的每一个键值对
        for (const [key, value] of Object.entries(list[i])) {
            // 使用空值合并运算符 (??=) 确保 result[key] 是一个数组。
            // 如果 result[key] 不存在或为 null/undefined，则初始化为空数组 []。
            // 然后将当前值 value 存入该数组的第 i 个位置。
            // 这种方式天然地处理了不规则对象，如果某个对象缺少某个键，
            // 对应位置在后续的迭代中会被填充或保持 undefined。
            (result[key] ??= [])[i] = value;
        }
    }
    return result;
}

登录后复制

代码解析

const result = {};: 初始化一个空对象 result，它将存储我们最终转置后的数据。
for (let i = 0; i < list.length; i++): 外层循环遍历输入数组 list 中的每一个对象。i 代表当前对象的索引，这个索引在后续步骤中至关重要，它决定了值在目标数组中的位置。
for (const [key, value] of Object.entries(list[i])): 内层循环遍历当前对象 list[i] 的所有键值对。Object.entries() 方法返回一个给定对象自身可枚举字符串键属性的 [key, value] 对数组。
(result[key] ??= [])[i] = value;: 这是实现转置的核心逻辑。
- result[key] ??= []: 这是一个ES2021引入的空值合并赋值运算符。它的作用是：如果 result[key] 的值为 null 或 undefined，则将其赋值为 []（一个空数组）；否则，result[key] 保持其原有值。这确保了在第一次遇到某个 key 时，result 对象中会为该 key 创建一个空数组。
- [i] = value: 在 result[key] 对应的数组中，将当前 value 赋值给索引为 i 的位置。由于外层循环的 i 与原始对象在数组中的位置一致，这样就保证了所有 name 属性的值会按原始顺序存储在 result.name 数组中，date 属性的值存储在 result.date 数组中，以此类推。

完整示例与运行

让我们使用之前定义的 data 数组来测试 transpose 函数：

立即学习“Java免费学习笔记（深入）”；

const data = [
  {name: 'Alex', date: '05/17/2023 10:32 PM', id: '00153168', priority: '3-Medium'},
  {name: 'Peter', date: '05/17/2023 11:32 PM', id: '00153169', priority: '3-Medium'}
];

/**
 * 将对象数组转置为键值数组对象。
 * 该函数能处理不规则对象，即原始对象不要求所有键都相同，
 * 缺失的值将在结果数组中体现为 undefined。
 *
 * @param {Array<Object>} list 待转置的对象数组。
 * @returns {Object} 转置后的键值数组对象。
 */
function transpose(list) {
    const result = {};
    for (let i = 0; i < list.length; i++) {
        for (const [key, value] of Object.entries(list[i])) {
            (result[key] ??= [])[i] = value;
        }
    }
    return result;
}

const transposedData = transpose(data);
console.log(transposedData);

登录后复制

输出结果：

{
  name: [ 'Alex', 'Peter' ],
  date: [ '05/17/2023 10:32 PM', '05/17/2023 11:32 PM' ],
  id: [ '00153168', '00153169' ],
  priority: [ '3-Medium', '3-Medium' ]
}

登录后复制

注意事项与扩展

处理不规则对象： transpose 函数的一个显著优点是它能优雅地处理原始数组中对象结构不一致的情况。例如：

BibiGPT-哔哔终结者

B站视频总结器-一键总结音视频内容

871

查看详情

const irregularData = [
  {name: 'Alex', id: '001', priority: 'Medium'},
  {name: 'Peter', date: '2023-01-01', id: '002'} // Peter对象缺少priority
];

const transposedIrregularData = transpose(irregularData);
console.log(transposedIrregularData);

登录后复制

输出将会是：

{
  name: [ 'Alex', 'Peter' ],
  id: [ '001', '002' ],
  priority: [ 'Medium', undefined ], // Peter对应的priority为 undefined
  date: [ undefined, '2023-01-01' ] // Alex对应的date为 undefined
}

登录后复制

这种行为通常是符合预期的，因为它保留了数据的原始位置信息，即使某个属性在特定对象中缺失。

性能考量： 该方法的复杂度为 O(N*M)，其中 N 是原始对象数组的长度，M 是所有对象中平均键的数量。对于大多数常见的数据集，这种性能是完全可以接受的。
替代方法： 虽然 transpose 函数简洁高效，但也可以使用 reduce 方法来实现类似的功能，代码可能会稍微紧凑，但理解上可能不如双层 for 循环直观。然而，对于这种特定需求，当前提供的 transpose 函数是一个非常优秀的解决方案。