0

0

高效合并JavaScript对象数组:基于键的动态数据整合教程

DDD

DDD

发布时间:2025-10-01 11:15:04

|

869人浏览过

|

来源于php中文网

原创

高效合并JavaScript对象数组:基于键的动态数据整合教程

本教程详细阐述了如何在JavaScript中根据共享的键(无论其位于顶级还是嵌套结构中)高效合并复杂的对象数组。通过利用Array.prototype.reduce方法,我们能将分散的数据项聚合为结构完整、逻辑关联的单一对象,从而简化数据处理流程,并生成符合业务需求的目标数据结构。

1. 问题描述:基于键合并复杂JSON数据

在处理结构多样的json数据时,我们经常面临需要将散落在不同对象中的相关信息,根据一个共同的标识符(键)进行整合的需求。例如,我们可能有一个包含学生基本信息和学生保密信息的数组,其中每个学生的信息可能分布在多个独立的对象中。

原始数据示例:

假设我们有以下一个对象数组,其中包含两类信息:studentInfo(学生信息)和 confidential(保密信息),它们都通过一个key进行关联。

[
  {
    "key": 111,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ]
  },
  {
    "key": 222,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ]
  },
  {
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 111
    }
  },
  {
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 222
    }
  }
]

期望输出:

我们的目标是将所有具有相同key(无论是顶级key还是confidential.key)的对象合并成一个单一的对象。

立即学习Java免费学习笔记(深入)”;

[
  {
    "key": 111,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ],
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 111
    }
  },
  {
    "key": 222,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ],
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 222
    }
  }
]

2. 核心策略:使用JavaScript的reduce方法

JavaScript的Array.prototype.reduce()方法是处理这类数据聚合问题的强大工具。它遍历数组中的每个元素,并使用一个累加器(accumulator)来构建最终的结果。通过巧妙地设计累加器的逻辑,我们可以实现基于键的动态合并。

星绘
星绘

豆包旗下 AI 写真、P 图、换装和视频生成

下载

本教程将采用一种直接且高效的reduce实现策略:

  1. 初始化一个空数组作为累加器,用于存放最终合并后的对象。
  2. 遍历原始数组,对每个对象进行判断。
  3. 识别对象类型:
    • 如果对象具有顶级key(例如studentInfo对象),则将其视为一个“基础”对象,直接添加到累加器数组中。
    • 如果对象不具有顶级key,但具有嵌套的confidential.key(例如confidential对象),则查找累加器数组中已经存在的、具有相同key的基础对象,并将当前对象的内容合并到该基础对象中。

3. 实现步骤与代码解析

下面是实现上述合并逻辑的JavaScript代码及其详细解析。

const initialData = [
  {
    key: 111,
    studentInfo: [
      {
        details: {
          calculated_fields: null,
          status: false,
        },
      },
    ],
  },
  {
    key: 222,
    studentInfo: [
      {
        details: {
          calculated_fields: null,
          status: false,
        },
      },
    ],
  },
  {
    confidential: {
      data: {
        access_control: {
          private_data: null,
          users: [],
        },
      },
      key: 111,
    },
  },
  {
    confidential: {
      data: {
        access_control: {
          private_data: null,
          users: [],
        },
      },
      key: 222,
    },
  },
];

// 初始化一个空数组,作为reduce方法的初始累加器值
const mergedResult = [];

// 使用reduce方法遍历并合并数据
initialData.reduce((output, currentObj) => {
  // 判断当前对象是否具有顶级 'key' 属性
  if (currentObj.key) {
    // 如果有顶级 'key',说明这是一个基础信息对象,直接添加到结果数组中
    output.push(currentObj);
  } else {
    // 如果没有顶级 'key',但有 'confidential.key',说明这是一个补充信息对象
    // 1. 在 'output' 数组中查找与当前对象 'confidential.key' 匹配的基础对象
    const targetObject = output.find((o) => o.key === currentObj.confidential.key);

    // 2. 如果找到了匹配的对象,则将当前对象的所有属性合并到目标对象中
    //    Object.assign(target, source) 会将 source 的可枚举属性复制到 target 对象
    if (targetObject) {
        Object.assign(targetObject, currentObj);
    }
  }
  // 返回累加器,以便下一次迭代继续处理
  return output;
}, mergedResult); // 将 'mergedResult' 作为 reduce 的初始值

console.log(JSON.stringify(mergedResult, null, 2));

代码解析:

  1. const mergedResult = [];: 我们首先声明一个空数组mergedResult。这个数组将作为reduce方法的初始累加器(output),并最终包含所有合并后的对象。
  2. initialData.reduce((output, currentObj) => { ... }, mergedResult);:
    • initialData是我们要处理的原始数据数组。
    • reduce方法接收两个参数:一个回调函数和一个初始值(mergedResult)。
    • 回调函数接收两个参数:output(累加器,即mergedResult在每次迭代中的当前状态)和currentObj(当前正在处理的数组元素)。
  3. if (currentObj.key):
    • 这个条件判断当前对象是否具有顶级的key属性。在我们的例子中,studentInfo对象就符合这个条件。
    • output.push(currentObj);: 如果满足条件,说明这是一个“基础”对象,我们将其直接添加到output数组中。
  4. else { ... }:
    • 如果当前对象没有顶级的key,那么我们预期它是一个补充信息对象,例如包含confidential属性的对象。
    • output.find((o) => o.key === currentObj.confidential.key): 我们在output数组中查找一个已经存在的对象。这个查找是基于output数组中对象的顶级key与currentObj.confidential.key是否匹配。
    • Object.assign(targetObject, currentObj);: Object.assign()方法用于将一个或多个源对象的可枚举属性复制到目标对象。在这里,targetObject是我们在output中找到的匹配对象,currentObj是当前的补充信息对象。通过Object.assign,currentObj的所有属性(包括confidential)都会被添加到targetObject中,从而完成合并。
  5. return output;: 在每次迭代结束时,回调函数必须返回更新后的累加器(output),以便在下一次迭代中使用。

4. 注意事项

  • 键的唯一性与存在性: 此方法依赖于key或confidential.key的唯一性来正确匹配和合并。如果存在重复的键或键缺失,可能会导致意外行为或数据丢失
  • 处理顺序: 这种特定reduce实现假定具有顶级key的基础对象会先于其对应的补充信息对象被处理,或者至少在补充信息对象被处理时,基础对象已经存在于output数组中。如果处理顺序不确定,更健壮的方法是使用一个Map或普通JavaScript对象作为累加器,以键值对的形式存储中间合并结果,最后再转换为数组。
  • 深拷贝与浅拷贝: Object.assign执行的是浅拷贝。这意味着如果currentObj或targetObject中包含嵌套对象,那么合并后它们会共享对这些嵌套对象的引用。如果需要深层合并,可能需要使用更复杂的深拷贝工具(如Lodash的_.merge或自定义递归合并函数)。
  • 性能: 对于非常大的数据集,output.find()操作在每次迭代中都可能遍历output数组,导致时间复杂度上升。对于极端情况,使用Map作为累加器(acc[key] = { ...acc[key], ...cur })通常会提供更好的性能,因为Map的查找是O(1)的。

5. 总结

通过巧妙地运用JavaScript的Array.prototype.reduce方法结合条件判断和Object.assign,我们可以有效地将基于键分散在多个对象中的数据整合为一个统一的结构。这种模式在处理来自不同源或具有不同结构但逻辑关联的数据时非常有用,能够帮助开发者构建更清晰、更易于管理的数据模型。理解其工作原理和潜在的注意事项,能帮助我们更灵活、更安全地应用此技术。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

554

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号