信息发布→ 登录 注册 退出

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

发布时间:2025-12-01

点击量:

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

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

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

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

我们的目标是将其转换为以下形式,以便于按类别访问所有数据(例如,一次性获取所有用户的姓名):

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

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

核心实现方法

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

/**
 * 将对象列表转换为属性列表对象。
 * 该函数能处理非统一结构的对象,缺失的值在数组中将显示为 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;
}

代码解析

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

示例与运行

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

神采PromeAI 神采PromeAI

将涂鸦和照片转化为插画,将线稿转化为完整的上色稿。

神采PromeAI 111 查看详情 神采PromeAI
const data = [
 {name: 'Alex', date: '05/17/2025 10:32 PM', id: '00153168', priority: '3-Medium'},
 {name: 'Peter', date: '05/17/2025 11:32 PM', id: '00153169', priority: '3-Medium'}
];

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

输出结果:

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

注意事项

  1. 处理非统一结构的对象: 这个 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"]
    }
    */
  2. 性能考量: 该算法的时间复杂度为 O(N * M),其中 N 是输入数组的长度,M 是平均每个对象的键的数量。由于它只进行了一次遍历和一次内层键值对遍历,效率较高。相较于多次使用 map 或 reduce 并且在每次迭代中创建新数组的方案,这种直接通过索引赋值的方式通常更为高效,尤其是在处理大型数据集时。

  3. 数据类型保持: 该函数不会改变原始值的类型。如果原始对象中的值是字符串、数字、布尔值、对象或数组,它们在转置后的数组中将保持原样。

  4. 键的顺序:Object.entries() 返回的键值对顺序通常是可预测的(对于非整数键,通常是插入顺序),但这不是严格保证的。然而,这通常不会影响最终结果的逻辑正确性,因为我们关心的是每个键对应的值列表,而不是键在最终对象中的特定顺序。

总结

将JSON对象数组转置为键值对列表是一个常见且实用的数据转换操作。本文介绍的 transpose 函数提供了一个简洁、高效且健壮的解决方案,它不仅能够正确处理统一结构的数据,还能优雅地应对非统一结构的对象。掌握这一技巧将有助于您更灵活地处理和重组数据,提高代码的效率和可读性。

以上就是将JSON对象数组转置为键值对列表的实用指南的详细内容,更多请关注其它相关文章!


相关文章: Composer如何解决json扩展缺失的错误  支付宝如何管理隐私设置_支付宝隐私保护的配置技巧  poki网页游戏推荐_poki免费游戏平台入口  优酷会员付费后没到账怎么办_优酷会员充值异常及解决方法  Yandex免登录网页版地址 Yandex搜索引擎官方访问入口  Golang如何实现Web接口签名验证_Golang Web接口签名校验开发方法  微信群消息显示延迟如何解决 微信群消息刷新优化方法  顺丰快递查单号物流信息 顺丰快递小程序查询入口  深入理解与实现最大堆的Heapify过程:常见错误与修正  J*a初级项目如何接入API数据_第三方接口请求与响应解析  yy漫画网页版官方入口_yy漫画官网登录页面链接  谷歌邮箱注册显示错误Gmail服务器异常与延迟处理  Golang如何实现容器化日志收集与分析_Golang容器日志收集分析方法  UE5.7引擎表现爆炸优化无敌!5090跑4K稳定60FPS  Win11怎么开启卓越性能模式 Win11电源选项启用高性能释放硬件潜力【方法】  怎么在浏览器上运行HTML文件_浏览器运行HTML文件技巧【技巧】  单射、满射与双射的关系 一文理清所有逻辑  PHP基于会话的用户类型页面访问控制指南  windows10怎么查看本机ip_windows10命令提示符ipconfig使用  电脑IP地址怎么查 查看本机IP地址的几种方法  163邮箱官方主页登录 直达网易邮箱登录核心页面  Discord Slash 命令响应超时问题的异步解决方案  J*aScript map 迭代中检测空数组元素的有效方法  一加 Nord 5 隐私权限异常_一加 Nord 5 系统安全优化  浏览器打开即用 美图秀秀网页版入口  Win11怎么设置鼠标指针速度_Win11提高鼠标指针精确度选项  TikTok国际版网页端快速入口 TikTok全球版短视频浏览教程  J*a ArrayList索引越界异常:动态构建列数据的高效策略  三星ZFold5多任务卡顿_Samsung ZFold5流畅度提升  荒野行动PC版怎么注册_荒野行动PC版账号注册详细流程图文教程  抖音创作助手登录入口_抖音创作辅助工具官网直达  圆通快递查询实时追踪 圆通物流包裹状态快速查看  苹果手机指南针不准怎么校准 传感器校准方法详解【建议收藏】  向日葵客户端怎么进行远程CentOS控制_向日葵客户端远程CentOS控制操作教程  Lar*el Form Request中唯一性验证在更新操作中的正确实现  在Qt QML中通过Python字典动态更新TextEdit内容的教程  Golang如何实现状态模式管理对象状态_Golang State模式实现技巧  谷歌浏览器如何快速清除某个网站的数据_Chrome网站缓存清理方法  必由学官方网站入口 必由学学生教师共用登录通道  在J*aScript中复现SciPy的B样条拟合与求值:关键考量  QQ邮箱登录首页官网地址2026 QQ邮箱官方网页入口  J*aScript实现动态背景色下的文本与按钮颜色自适应调整  uc浏览器网页版极速入口 uc网页浏览器网页版流畅体验  C++如何实现异步操作_C++11使用std::future和std::async进行异步编程  Steam官网入口直达 Steam注册及登录步骤  在J*a中如何使用Exception包装底层异常_异常包装与信息传递方法说明  如何使 Jest 模拟函数默认抛出错误以提高测试效率  MAC如何将整个网页截长图_MAC使用Safari的导出为PDF或第三方工具  如何设置Windows Defender的定时扫描_计划任务实现自动杀毒【安全】  微信怎么把收藏的内容分类管理 微信收藏内容标签分类方法 

在线客服
服务热线

服务热线

4008988990

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!