将JSON对象数组转置为键值对列表的实用指南-js教程-PHP中文网

将JSON对象数组转置为键值对列表的实用指南

心靈之曲

发布： 2025-12-01 15:04:02

原创

929人浏览过

将JSON对象数组转置为键值对列表的实用指南

本教程详细介绍了如何将一个包含多个json对象的数组，高效地转换成一个以原对象键为属性名、属性值为对应所有值列表的新对象。通过一步步解析核心算法，包括代码示例和注意事项，帮助开发者掌握这一常见的数据结构转置技巧，实现数据的高效重组与利用。

在数据处理和前端开发中，我们经常会遇到需要对数据结构进行转换的场景。一个典型的例子是将一个由多个结构化对象组成的数组，转换为一个以键为中心、值是对应所有值的集合的新对象。例如，我们可能有一个用户列表，每个用户是一个对象：

[
 {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 : ['Alex','Peter'],
date : ['05/17/2023 10:32 PM','05/17/2023 11:32 PM'],
id: ['00153168','00153169'],
priority: ['3-Medium', '3-Medium']
}

登录后复制

这种转换操作通常被称为“转置”（transpose），即将数据的行和列互换。

核心实现方法

实现这种转置的关键在于遍历原始数组中的每个对象，然后遍历每个对象的键值对，将值按其原始键归类到最终结果对象的对应数组中。以下是一个高效且简洁的JavaScript函数实现：

/**
 * 将对象列表转换为属性列表对象。
 * 该函数能处理非统一结构的对象，缺失的值在数组中将显示为 undefined。
 *
 * @param {Array<Object>} listOfObjects - 待转换的JSON对象数组。
 * @returns {Object} 转换后的属性列表对象。
 */
function transpose(listOfObjects) {
    const result = {}; // 初始化结果对象

    // 遍历输入数组中的每个对象，通过索引 i 记录其在原数组中的位置
    for (let i = 0; i < listOfObjects.length; i++) {
        const currentObject = listOfObjects[i];

        // 遍历当前对象的每一个键值对
        for (const [key, value] of Object.entries(currentObject)) {
            // 使用 nullish coalescing assignment (??=) 运算符
            // 如果 result[key] 不存在或为 null/undefined，则将其初始化为一个空数组 []
            // 然后将当前值 value 赋值给 result[key] 数组的第 i 个位置
            (result[key] ??= [])[i] = value;
        }
    }
    return result;
}

登录后复制

代码解析

const result = {};: 初始化一个空对象 result，用于存储最终的转置结果。这个对象将以原始对象的键作为其属性名，属性值则是一个数组，包含所有原始对象中对应键的值。
for (let i = 0; i < listOfObjects.length; i++): 外层循环遍历输入数组 listOfObjects 中的每一个对象。循环变量 i 记录了当前对象在原始数组中的索引，这个索引对于在 result 对象中的数组正确放置值至关重要。
for (const [key, value] of Object.entries(currentObject)): 内层循环遍历当前对象 currentObject 的所有键值对。Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。
(result[key] ??= [])[i] = value;: 这是核心逻辑所在。
- result[key] ??= []: 这是ES2021引入的 nullish coalescing assignment (空值合并赋值) 运算符。它的作用是：如果 result[key] 当前是 null 或 undefined，则将其赋值为 []（一个空数组）；否则，result[key] 保持不变。这确保了在第一次遇到某个 key 时，result 对象中会为该 key 创建一个空的数组。
- [i] = value: 在 result[key] 数组的第 i 个位置（对应原始对象在输入数组中的索引）赋上当前 value。通过这种方式，我们确保了所有相同 key 的值都被收集到同一个数组中，并且它们在数组中的顺序与它们在原始对象数组中的顺序一致。

示例与运行

让我们使用提供的示例数据来演示 transpose 函数的用法：

Waymark

Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。

查看详情

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'}
];

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 函数的一个显著优点是它能够优雅地处理输入数组中对象结构不一致的情况。例如，如果某个对象缺少某个键，那么在最终结果中，该键对应的数组中，相应索引位置的值将是 undefined。这确保了所有数组的长度都是原始对象数组的长度，保持了数据的一致性。

const mixedData = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', city: 'New York' }, // 缺少 age
    { age: 25, city: 'London', occupation: 'Engineer' } // 缺少 name
];

const transposedMixedData = transpose(mixedData);
console.log(transposedMixedData);
/*
输出:
{
  name: ["Alice", "Bob", undefined],
  age: [30, undefined, 25],
  city: [undefined, "New York", "London"],
  occupation: [undefined, undefined, "Engineer"]
}
*/

登录后复制

性能考量： 该算法的时间复杂度为 O(N * M)，其中 N 是输入数组的长度，M 是平均每个对象的键的数量。由于它只进行了一次遍历和一次内层键值对遍历，效率较高。相较于多次使用 map 或 reduce 并且在每次迭代中创建新数组的方案，这种直接通过索引赋值的方式通常更为高效，尤其是在处理大型数据集时。
数据类型保持： 该函数不会改变原始值的类型。如果原始对象中的值是字符串、数字、布尔值、对象或数组，它们在转置后的数组中将保持原样。
键的顺序：Object.entries() 返回的键值对顺序通常是可预测的（对于非整数键，通常是插入顺序），但这不是严格保证的。然而，这通常不会影响最终结果的逻辑正确性，因为我们关心的是每个键对应的值列表，而不是键在最终对象中的特定顺序。