0

0

如何在JavaScript中根据多个属性对数组对象进行分组

DDD

DDD

发布时间:2025-11-16 18:59:02

|

970人浏览过

|

来源于php中文网

原创

如何在javascript中根据多个属性对数组对象进行分组

本文将深入探讨如何在JavaScript中对包含对象的数组进行分组,特别是当需要根据多个属性(而非单个属性)进行分组时。我们将从单属性分组的基础方法入手,逐步展示如何优化groupBy函数,使其能够接受一个属性键数组,并通过构建复合键来实现多属性分组。文章将提供详细的代码示例和注意事项,帮助开发者高效地管理和组织数据。

理解数组对象分组的基础

在处理数据时,经常需要根据对象的某个特定属性将数组中的对象进行分类。例如,假设我们有一个用户列表,每个用户都有姓名、姓氏和性别等信息:

[
  {
    "name": "john",
    "lastName": "doe",
    "gender": "male"
  },
  {
    "name": "jane",
    "lastName": "doe",
    "gender": "female"
  },
  {
    "name": "peter",
    "lastName": "dickons",
    "gender": "male"
  },
  {
    "name": "eva",
    "lastName": "dickons",
    "gender": "female"
  }
]

如果仅需根据lastName(姓氏)对用户进行分组,可以利用JavaScript的reduce方法实现一个通用的groupByObjectKey函数:

const groupByObjectKey = (users, key) => {
  return users.reduce((accumulator, currentUser) => {
    // 如果当前键不存在,则初始化为空数组
    (accumulator[currentUser[key]] = accumulator[currentUser[key]] || []).push(currentUser);
    return accumulator;
  }, {});
};

let users = [
  { "name": "john", "lastName": "doe", "gender": "male" },
  { "name": "jane", "lastName": "doe", "gender": "female" },
  { "name": "peter", "lastName": "dickons", "gender": "male" },
  { "name": "eva", "lastName": "dickons", "gender": "female" },
];

const usersGroupedByLastName = groupByObjectKey(users, "lastName");
console.log(usersGroupedByLastName);
/*
输出示例:
{
  "doe": [
    { "name": "john", "lastName": "doe", "gender": "male" },
    { "name": "jane", "lastName": "doe", "gender": "female" }
  ],
  "dickons": [
    { "name": "peter", "lastName": "dickons", "gender": "male" },
    { "name": "eva", "lastName": "dickons", "gender": "female" }
  ]
}
*/

这个函数通过reduce迭代数组,并使用指定key的值作为新对象的键,将匹配的对象推入对应的数组中。

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

扩展至多属性分组

然而,实际应用中往往需要更复杂的分组逻辑,例如,我们可能需要根据lastName和gender(性别)两个属性来对用户进行分组。简单地传入一个属性名数组并不能直接实现这一目标,因为原函数期望的是一个字符串作为键。

为了实现多属性分组,我们需要修改groupBy函数,使其能够接受一个属性键数组。核心思路是:对于每个对象,根据所有指定的属性键生成一个复合键。这个复合键将唯一标识一组具有相同指定属性值的对象。

j2me3D游戏开发简单教程 中文WORD版
j2me3D游戏开发简单教程 中文WORD版

本文档主要讲述的是j2me3D游戏开发简单教程; 如今,3D图形几乎是任何一部游戏的关键部分,甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述,以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中,这称为立即模式。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载
/**
 * 根据一个或多个属性对数组中的对象进行分组。
 * @param {Array} collection 要分组的数组。
 * @param {string | Array} keys 用于分组的一个或多个属性键。
 * @param {string} [separator='-'] 用于连接多个属性值以形成复合键的分隔符。
 * @returns {Object>} 分组后的对象。
 */
const groupByObjectKeys = (collection, keys, separator = '-') => {
  // 确保keys是一个数组,即使传入的是单个字符串
  const actualKeys = Array.isArray(keys) ? keys : [keys];

  return collection.reduce((accumulator, currentItem) => {
    // 根据所有指定的键获取对应的值,并用分隔符连接成一个复合键
    const compositeKey = actualKeys.map(key => currentItem[key]).join(separator);

    // 如果复合键不存在,则初始化为空数组
    (accumulator[compositeKey] = accumulator[compositeKey] || []).push(currentItem);

    return accumulator;
  }, {});
};

// 示例数据
let users = [
  { "name": "john", "lastName": "doe", "gender": "male" },
  { "name": "jane", "lastName": "doe", "gender": "female" },
  { "name": "peter", "lastName": "dickons", "gender": "male" },
  { "name": "eva", "lastName": "dickons", "gender": "female" },
  { "name": "mike", "lastName": "doe", "gender": "male" } // 添加一个新用户以更好地展示分组
];

// 根据姓氏和性别进行分组
const usersGroupedByLastNameAndGender = groupByObjectKeys(
    users,
    ["lastName", "gender"]
);

console.log(usersGroupedByLastNameAndGender);
/*
输出示例:
{
  "doe-male": [
    { "name": "john", "lastName": "doe", "gender": "male" },
    { "name": "mike", "lastName": "doe", "gender": "male" }
  ],
  "doe-female": [
    { "name": "jane", "lastName": "doe", "gender": "female" }
  ],
  "dickons-male": [
    { "name": "peter", "lastName": "dickons", "gender": "male" }
  ],
  "dickons-female": [
    { "name": "eva", "lastName": "dickons", "gender": "female" }
  ]
}
*/

// 也可以用于单个属性分组,兼容旧用法
const usersGroupedBySingleKey = groupByObjectKeys(users, "lastName");
console.log(usersGroupedBySingleKey);
/*
输出示例:
{
  "doe": [
    { "name": "john", "lastName": "doe", "gender": "male" },
    { "name": "jane", "lastName": "doe", "gender": "female" },
    { "name": "mike", "lastName": "doe", "gender": "male" }
  ],
  "dickons": [
    { "name": "peter", "lastName": "dickons", "gender": "male" },
    { "name": "eva", "lastName": "dickons", "gender": "female" }
  ]
}
*/

在这个groupByObjectKeys函数中:

  1. 它现在接受一个keys参数,可以是单个字符串(兼容旧用法)或一个字符串数组
  2. actualKeys变量确保keys始终被视为一个数组,简化后续处理。
  3. actualKeys.map(key => currentItem[key]).join(separator)是关键步骤。它遍历所有指定的键,从currentItem中提取对应的值,然后使用一个指定的分隔符(默认为连字符-)将这些值连接成一个字符串。这个字符串就是我们的复合键
  4. 后续逻辑与单属性分组相同,使用这个复合键作为accumulator的属性名。

注意事项

  • 分隔符的选择: 选择一个在你的数据中不会自然出现的字符作为分隔符至关重要。例如,如果你的属性值本身可能包含连字符,那么选择其他分隔符(如_或::)会更安全,以避免键冲突。

  • 键的顺序: 传入keys数组的顺序会影响复合键的生成,进而影响分组结果。例如,["lastName", "gender"]会生成"doe-male"这样的键,而["gender", "lastName"]会生成"male-doe",但两者表示的是同一组逻辑。请确保你的应用程序中对键的顺序有一致的理解。

  • 性能考量: 对于非常大的数据集和大量的分组键,map和join操作可能会带来轻微的性能开销。然而,对于大多数前端应用或中等规模的数据集,这种开销通常可以忽略不计。

  • 类型安全(TypeScript): 如果在TypeScript环境中使用,可以为函数参数和返回值添加更严格的类型定义,例如:

    interface User {
      name: string;
      lastName: string;
      gender: string;
    }
    
    const groupByObjectKeysTyped = >(
      collection: T[],
      keys: keyof T | Array,
      separator: string = '-'
    ): Record => {
      const actualKeys = Array.isArray(keys) ? keys : [keys];
    
      return collection.reduce((accumulator, currentItem) => {
        const compositeKey = actualKeys.map(key => String(currentItem[key])).join(separator); // 确保转换为字符串
    
        (accumulator[compositeKey] = accumulator[compositeKey] || []).push(currentItem);
        return accumulator;
      }, {} as Record);
    };

总结

通过对groupBy函数的简单改造,使其能够处理一个属性键数组并生成复合键,我们便能轻松实现根据多个属性对数组对象进行分组的需求。这种方法提高了代码的灵活性和复用性,使得数据组织和管理变得更加高效。在实际开发中,根据具体场景选择合适的分隔符,并注意键的顺序,是确保分组逻辑正确性的关键。

相关专题

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

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

547

2023.06.20

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

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

373

2023.07.04

js四舍五入
js四舍五入

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

730

2023.07.04

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

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

473

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值作为对象的属性名时,默认是不可枚举的。

550

2023.09.20

Golang 分布式缓存与高可用架构
Golang 分布式缓存与高可用架构

本专题系统讲解 Golang 在分布式缓存与高可用系统中的应用,涵盖缓存设计原理、Redis/Etcd集成、数据一致性与过期策略、分布式锁、缓存穿透/雪崩/击穿解决方案,以及高可用架构设计。通过实战案例,帮助开发者掌握 如何使用 Go 构建稳定、高性能的分布式缓存系统,提升大型系统的响应速度与可靠性。

27

2026.01.09

热门下载

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

精品课程

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

共58课时 | 3.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.1万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.8万人学习

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

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