登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > JSON数组转置为键值映射方法详解

JSON数组转置为键值映射方法详解

2025-12-06 14:00:50 0浏览 收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JSON数组转置为键值映射的教程》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

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

本教程详细介绍了如何将一个包含多个JSON对象的数组，高效地转换为一个以原对象属性名为键、属性值集合为值的映射对象。通过一个简洁的JavaScript函数，我们将展示如何实现这种数据结构的转置，确保数据完整性并处理非统一对象的情况，从而优化数据访问和处理逻辑。

数据结构转换：从对象数组到键值数组的转置

在JavaScript开发中，我们经常会遇到需要对数据结构进行转换的场景。其中一个常见需求是将一个包含多个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 函数

为了实现上述数据结构的转置，我们可以编写一个通用的transpose函数。该函数能够将一个对象列表（list of objects）转换为一个列表对象（object of lists），并能优雅地处理输入对象可能不完全统一的情况。

/**
 * 将对象列表转换为属性列表对象。
 * 该函数保持了原始值在数组中的顺序，并能处理输入对象属性不完全一致的情况。
 * @param {Array} list - 待转置的JSON对象数组。
 * @returns {Object>} - 转置后的键值映射对象。
 */
function transpose(list) {
    const result = {}; // 初始化一个空对象，用于存储转置后的结果
    // 遍历输入数组中的每一个对象
    for (let i = 0; i < list.length; i++) {
        // 遍历当前对象的每一个键值对
        for (const [k, v] of Object.entries(list[i])) {
            // 使用 nullish coalescing assignment (??=) 确保 result[k] 是一个数组。
            // 如果 result[k] 为 null 或 undefined，则将其初始化为空数组 []。
            // 然后，将当前值 v 赋值给 result[k] 数组的第 i 个位置。
            // 这样可以确保值按照它们在原始数组中的顺序被收集。
            (result[k] ??= [])[i] = v;
        }
    }
    return result;
}
函数工作原理深度解析
transpose 函数的核心在于其双层循环和巧妙的赋值逻辑。
1. 初始化结果对象
const result = {};
函数开始时，我们创建一个空的result对象。这个对象将作为最终转置结果的容器，其键将是原始JSON对象的属性名，而值将是包含所有对应属性值的数组。
2. 遍历输入数组中的每一个对象
for (let i = 0; i < list.length; i++) {
    // ...
}
外层循环负责遍历输入的list数组。循环变量i不仅用于访问数组中的每个对象（list[i]），更重要的是，它被用作在result对象中构建的每个值数组的索引。这确保了转置后的值能够保持其在原始数据中的相对顺序。
3. 解构对象属性
for (const [k, v] of Object.entries(list[i])) {
    // ...
}
内层循环使用Object.entries(list[i])来遍历当前对象list[i]的所有可枚举属性。Object.entries()方法返回一个给定对象自身可枚举字符串键属性的键值对数组。通过解构赋值[k, v]，我们可以方便地获取每个属性的键（k）和值（v）。
4. 智能赋值逻辑：(result[k] ??= [])[i] = v;
这是函数最精妙的部分，它结合了ES2021引入的空值合并赋值运算符（Nullish Coalescing Assignment Operator ??=）和数组索引赋值。
  • result[k] ??= []:
这个表达式首先检查result对象中是否存在以k为键的属性。
    • 如果result[k]的值是null或undefined（即这个键是第一次遇到），那么??=运算符会将其赋值为[]（一个空数组）。
    • 如果result[k]已经存在并且不是null或undefined（例如，它已经被初始化为一个数组），那么??=运算符不会执行任何操作，result[k]保持其原有值。
通过这一步，我们确保了在尝试向result[k]添加值之前，它总是一个有效的数组。
  • (...)[i] = v;:
在result[k]被确保为数组之后，我们使用外层循环的索引i将当前属性值v赋值到result[k]数组的相应位置。
例如，当处理第一个对象（i=0）时，所有属性的值都会被放入各自键对应数组的第0个位置。处理第二个对象（i=1）时，值会被放入第1个位置，依此类推。这种方式有效地将每个对象的属性值“堆叠”到各自的列中。
5. 处理非统一对象
此函数的一个显著优点是它能优雅地处理输入对象属性不完全一致的情况。如果某个对象缺少某个属性，那么在转置后的对应数组中，该位置将简单地留空（即为undefined），而不会导致错误或数据丢失，这在处理不规则数据时非常有用。
实际应用示例
让我们结合提供的示例数据，演示transpose函数的实际使用。
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'}
];

/**
 * 将对象列表转换为属性列表对象。
 * 该函数保持了原始值在数组中的顺序，并能处理输入对象属性不完全一致的情况。
 * @param {Array} list - 待转置的JSON对象数组。
 * @returns {Object>} - 转置后的键值映射对象。
 */
function transpose(list) {
    const result = {};
    for (let i = 0; i < list.length; i++) {
        for (const [k, v] of Object.entries(list[i])) {
            (result[k] ??= [])[i] = v;
        }
    }
    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函数通过双层循环遍历所有键值对，其时间复杂度大致为 O(N * M)，其中 N 是输入数组的长度，M 是单个对象平均的属性数量。对于大多数常见数据集，这种性能是完全可接受的。
  • 输入数据验证：在实际应用中，建议对输入list进行验证，确保它是一个数组，并且其中的元素是对象，以避免潜在的运行时错误。
  • 数据类型保留：该函数会保留原始值的类型。例如，如果原始属性值是数字、布尔值或嵌套对象，它们在转置后的数组中也会保持相应的类型。
  • 不可变性：transpose函数不会修改原始的list数组，而是返回一个新的result对象，这符合函数式编程的不可变性原则，有助于避免副作用。
总结
将JSON对象数组转置为键值映射是一个常见且实用的数据处理任务。通过本文介绍的transpose函数，您可以高效、健壮地实现这一转换。该函数利用JavaScript的现代特性（如Object.entries和空值合并赋值运算符），以简洁而强大的方式解决了问题，同时优雅地处理了数据不一致的情况。掌握这种数据转置技巧，将有助于您更灵活地处理和组织JavaScript中的数据。
终于介绍完啦！小伙伴们，这篇关于《JSON数组转置为键值映射方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！
                
                

                                    

                                

                                        

                        
                            Golang并发测试与Goroutine优化技巧Golang并发测试与Goroutine优化技巧                        
                        

                            
上一篇

                            
Golang并发测试与Goroutine优化技巧

                        

                    

                                        

                        
                            智学网登录入口及官网地址查询
                        
                        

                            
下一篇

                            
智学网登录入口及官网地址查询

                        

                    

                                    

            
        
                

            

                

                    查看更多
                    
最新文章

                

            

            
        

    
    

        
        

            

                查看更多
                
课程推荐

            

            
    
                                
  • 
                    
                        前端进阶之JavaScript设计模式
                                            
                    
    
                        
    前端进阶之JavaScript设计模式
    
                        
    
                            设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。                        
    
                        
    543次学习
    
                    
    
                
    • 
                                
  • 
                    
                        GO语言核心编程课程
                                            
                    
    
                        
    GO语言核心编程课程
    
                        
    
                            本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。                        
    
                        
    516次学习
    
                    
    
                
    • 
                                
  • 
                    
                        简单聊聊mysql8与网络通信
                                            
                    
    
                        
    简单聊聊mysql8与网络通信
    
                        
    
                            如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让                        
    
                        
    500次学习
    
                    
    
                
    • 
                                
  • 
                    
                        JavaScript正则表达式基础与实战
                                            
                    
    
                        
    JavaScript正则表达式基础与实战
    
                        
    
                            在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。                        
    
                        
    487次学习
    
                    
    
                
    • 
                                
  • 
                    
                        从零制作响应式网站—Grid布局
                                            
                    
    
                        
    从零制作响应式网站—Grid布局
    
                        
    
                            本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。                        
    
                        
    485次学习
    
                    
    
                
    • 
                            

        

        

        

            查看更多
            
AI推荐

        

        
    
                        
  • 
                
                    ljg-skills - 
                
                
    
                    
    ljg-skills
    
                    
    
                        ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。                    
    
                    
    4372次使用
    
                
    
            
    • 
                        
  • 
                
                    MELO音乐 - AI 音乐生成平台，支持多模态创作能力
                
                
    
                    
    MELO音乐
    
                    
    
                        MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！                    
    
                    
    4056次使用
    
                
    
            
    • 
                        
  • 
                
                    UniScribe - AI 免费在线音视频转文字平台
                
                
    
                    
    UniScribe
    
                    
    
                        UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。                    
    
                    
    4037次使用
    
                
    
            
    • 
                        
  • 
                
                    剧云 - 免费 AI 智能中文剧本创作平台
                
                
    
                    
    剧云
    
                    
    
                        剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。                    
    
                    
    4223次使用
    
                
    
            
    • 
                        
  • 
                
                    万象有声 - AI 一站式有声内容创作平台
                
                
    
                    
    万象有声
    
                    
    
                        万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！                    
    
                    
    4190次使用
    
                
    
            
    • 
                    

    

        
        

            

                查看更多
                
相关文章

            

            
        

    




    

        

            

                关于我们
                免责声明
                意见反馈
                联系我们
                内容提交
                 手册
            

            
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！

            

                技术交流群
            

            

                Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
            

        

        

            
    
                
                
  • 
                    
    
                        Golang学习网
                    
    
                    
    关注公众号
    
                    
    Golang学习网
    
                
    • 
                
    
            

        

        

    







    

      

        
      

      
      
      
      

        

        

          
微信登录更方便

        

        

          
    
            
  • 密码登录
    •  
            
  • 注册账号
    • 
          

          

            

              

                
                                

                  
                

                

                  
                

                

                  

                    
                  

                
                    
                
              

                

                  忘记密码
                

                

                  
                

              

            

            
          

        

        
登录即同意 用户协议 和 隐私政策

      

		
		

			

			
返回登录

			

			
    
				
  • 重置密码
    • 
			

			

				

				

          

          
        

					
          

            

              
            

            
                发送验证码