登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > JS对象数组转置属性映射教程

JS对象数组转置属性映射教程

2025-12-18 09:27:33 0浏览 收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS对象数组转置成属性映射教程》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

JavaScript中将对象数组转置为属性数组映射的教程

本教程旨在解决将JSON对象数组转换为键值映射的常见数据处理需求。我们将探讨如何高效地将形如 `[{key1: valA, key2: valB}, ...]` 的数据结构，转置为 ` {key1: [valA, ...], key2: [valB, ...]} ` 的形式。通过一个简洁的JavaScript函数，本文将详细讲解其实现原理、代码逻辑，并提供完整示例，帮助开发者掌握这一实用的数据转换技巧。

在现代Web开发中，我们经常会遇到需要对数据结构进行转换的场景。其中一个常见的需求是，将一个包含多个JSON对象的数组，转换为一个以原始对象键为属性名、以对应所有值的数组为属性值的对象。这种操作可以被形象地理解为数据表的“转置”，即将行数据转换为列数据。

场景描述与需求分析

假设我们有一个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']
}

这种转换在数据可视化、数据聚合或特定API接口数据适配时非常有用。直接的迭代和map操作可能会导致逻辑复杂或效率低下，尤其是在处理动态键或非统一结构时。

核心实现：转置函数 transpose

为了高效且优雅地实现这一转换，我们可以设计一个名为 transpose 的函数。该函数将遍历输入的对象数组，并动态地构建目标对象。

/**
 * 将对象列表（数组）转换为属性列表（对象）。
 * 该函数能处理非统一结构的对象，缺失值会在对应的数组中保留空位。
 * 实现方式尽可能简洁，不依赖复杂的reducer或重构。
 * @param {Array} list - 待转置的JSON对象数组。
 * @returns {Object>} - 转置后的键值映射对象。
 */
function transpose(list) {
    const result = {}; // 初始化结果对象
    // 遍历输入数组中的每一个对象
    for (let i = 0; i < list.length; i++) {
        // 遍历当前对象的每一个键值对
        // Object.entries() 返回一个给定对象自身可枚举属性的键值对数组。
        for (const [key, value] of Object.entries(list[i])) {
            // 使用 nullish coalescing assignment (??=) 确保 result[key] 是一个数组。
            // 如果 result[key] 为 null 或 undefined，则将其初始化为空数组 []。
            // 否则，保持其现有值（即已存在的数组）。
            // 然后，将当前值 value 赋值给 result[key] 数组的第 i 个位置。
            // 这种方式巧妙地利用了数组索引来填充数据，保持了原始顺序。
            (result[key] ??= [])[i] = value;
        }
    }
    return result;
}
代码逻辑详解
  1. const result = {};
    • 初始化一个空对象 result，它将用于存储最终的转置结果。这个对象将以原始对象的键作为其属性，属性值将是包含所有对应值的数组。
  2. for (let i = 0; i < list.length; i++) { ... }
    • 这是一个外层循环，用于遍历输入的 list 数组。i 代表当前处理的是 list 中的第 i 个对象。这个 i 值也将在后续用于确定每个属性数组中值的位置。
  3. for (const [key, value] of Object.entries(list[i])) { ... }
    • 这是一个内层循环，对于 list 数组中的每个对象 list[i]，它会遍历该对象的所有可枚举属性。
    • Object.entries(list[i]) 方法返回一个数组，其元素是 [key, value] 形式的键值对数组。例如，对于 {name: 'Alex', date: '...'}，它会返回 [['name', 'Alex'], ['date', '...']]。
    • 通过解构赋值 const [key, value]，我们可以直接获取当前属性的键和值。
  4. (result[key] ??= [])[i] = value;
    • 这是整个函数的核心逻辑，它巧妙地结合了JavaScript的几个特性：
      • result[key] ??= []：这是ES2021引入的空值合并赋值运算符（Nullish Coalescing Assignment）。
        • 它的作用是：如果 result[key] 当前的值是 null 或 undefined，那么就将 [] 赋值给 result[key]。
        • 如果 result[key] 已经有一个非 null 且非 undefined 的值（例如，它已经被初始化为一个数组），那么 result[key] 的值保持不变。
        • 这确保了在第一次遇到某个 key 时，result[key] 会被初始化为一个空数组，而后续遇到相同的 key 时，result[key] 已经是一个数组，可以直接操作。
      • (...)[i] = value;：在 result[key] 确保是一个数组之后，我们将当前 value 赋值给这个数组的第 i 个位置。
        • 由于外层循环的 i 索引与原始对象数组的顺序一致，这意味着所有 name 属性的值将按照它们在原始数组中的顺序，被依次放入 result.name 数组中。同理适用于 date、id、priority 等所有属性。
完整示例
让我们使用提供的示例数据来演示 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'}
];

/**
 * 将对象列表（数组）转换为属性列表（对象）。
 * 该函数能处理非统一结构的对象，缺失值会在对应的数组中保留空位。
 * 实现方式尽可能简洁，不依赖复杂的reducer或重构。
 * @param {Array} list - 待转置的JSON对象数组。
 * @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"
  ]
}
注意事项与总结
  1. 处理非统一结构： transpose 函数的一个优点是它能优雅地处理输入数组中对象结构不完全一致的情况。如果某个对象缺少某个属性，那么在对应的 result[key] 数组中，该位置（由 i 决定）将保持 undefined，这符合预期。例如：
    const mixedData = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', city: 'New York' }
];
const resultMixed = transpose(mixedData);
// resultMixed 会是：
// {
//   name: ['Alice', 'Bob'],
//   age: [30, undefined], // Bob 没有 age 属性，所以是 undefined
//   city: [undefined, 'New York'] // Alice 没有 city 属性，所以是 undefined
// }
  2. 效率： 该方法通过一次遍历输入数组中的所有对象和它们的属性，以 O(N*M) 的时间复杂度（N 为对象数量，M 为平均属性数量）完成了转置，效率较高。
  3. 简洁性： 利用 Object.entries() 和 ??= 运算符，代码非常简洁且易于理解。
  4. 可读性： 函数名 transpose 明确表达了其意图，内部逻辑清晰。
通过本教程，您应该已经掌握了如何在JavaScript中高效地将对象数组转置为属性数组映射的方法。这种数据转换模式在许多数据处理场景中都非常实用，理解并能灵活运用它将极大地提升您的开发效率。
文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS对象数组转置属性映射教程》文章吧，也可关注golang学习网公众号了解相关技术文章。
                
                

                                    

                                

                                        

                        
                            Go协程错误捕获与处理技巧Go协程错误捕获与处理技巧                        
                        

                            
上一篇

                            
Go协程错误捕获与处理技巧

                        

                    

                                        

                        
                            PDF添加背景技巧与设置方法
                        
                        

                            
下一篇

                            
PDF添加背景技巧与设置方法

                        

                    

                                    

            
        
                

            

                

                    查看更多
                    
最新文章

                

            

            
        

    
    

        
        

            

                查看更多
                
课程推荐

            

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

    

        
        

            

                查看更多
                
相关文章

            

            
        

    




    

        

            

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

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

            

                技术交流群
            

            

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

        

        

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

        

        

    







    

      

        
      

      
      
      
      

        

        

          
微信登录更方便

        

        

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

          

            

              

                
                                

                  
                

                

                  
                

                

                  

                    
                  

                
                    
                
              

                

                  忘记密码
                

                

                  
                

              

            

            
          

        

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

      

		
		

			

			
返回登录

			

			
    
				
  • 重置密码
    • 
			

			

				

				

          

          
        

					
          

            

              
            

            
                发送验证码