groupBy() 在 JavaScript 中的用法

2025 年 3 月 2 日 | 阅读 3 分钟

在本文中，我们将理解 JavaScript 中的 groupBy()。

groupBy() 方法

此方法用于对元素进行分组。它是一个静态方法，允许对可迭代元素进行分组。它用于将元素归入不同的类别。

语法

在上面提供的语法中，groupBy 是函数。items 和 callbackFn 是参数。参数 "items" 是将被分组的可迭代元素，例如数组。参数 "callbackFn" 是用于对可迭代元素中的每个元素执行的函数。

Object.groupBy() 方法返回的是一个 null 原型对象。

Object.groupBy() 方法会为可迭代对象中的每个元素调用 callbackFn 函数。

callbackFn 返回一个字符串或符号。返回的字符串值将用作 Object.groupBy() 返回的对象键。

我们将通过演示来理解 groupBy() 函数。

演示 1

我们将使用 groupBy() 方法按类型对书籍进行分组。

代码

const books = [
  { title: 'The Lion, The Witch and The Wardrobe', genre: 'Fantasy' },
  { title: 'The Alchemist', genre: 'Fiction' },
  { title: 'How Big Things Get Done', genre: 'Non-Fiction' },
  { title: 'Pride and Prejudice', genre: 'Fiction' },
  { title: 'Stardust', genre: 'Fantasy' },
  { title: 'The Three-Body Problem', genre: 'Science Fiction' }
];

const group = Object.groupBy(books, (book) => book.genre);

console.log(group);

输出

在输出中，我们可以看到四个组，名称分别为 幻想（Fantasy）、小说（Fiction）、非虚构（Non-Fiction）和科幻（Science Fiction）。

[Object: null prototype] {
  'Fantasy': [
    { title: 'The Lion, The Witch and The Wardrobe', genre: 'Fantasy' },
    { title: 'Stardust', genre: 'Fantasy' }
  ],
  'Fiction': [
    { title: 'The Alchemist', genre: 'Fiction' },
    { title: 'Pride and Prejudice', genre: 'Fiction' }
  ],
  
  'Non-Fiction': [ 
    { title: 'How Big Things Get Done', genre: 'Non-Fiction' }
 ],
  'Science Fiction': [ 
    { title: 'The Three-Body Problem', genre: 'Science Fiction' } 
]
  
}

演示 2

我们将使用 groupBy() 方法按公司对汽车进行分组。

代码

const cars = [{
    company: "Ferrari",
    model: "Roma",
    year: "2020"
}, {
    company: "Honda",
    model: "Elevate",
    year: "2023"
}, {
    company: "Skoda",
    model: "Slavia",
    year: "2023"
}, {
    company: "Ferrari",
    model: "812",
    year: "2023"
}, {
    company: "Honda",
    model: "Amaze",
    year: "2022"
}];
const group = Object.groupBy(cars, (car) => car.company);

console.log(group);

输出

我们可以看到三个组，名称分别为 法拉利（Ferrari）、斯柯达（Skoda）和本田（Honda）。

[Object: null prototype] {
   "Ferrari": [
     { company: "Ferrari", model: "Roma", year: 2020 },
     { company: "Ferrari", model: "812", year: 2023 }
   ],
   "Skoda": [
     { company: "Skoda", model: "Slavia", year: 2023 }
   ],
   "Honda": [
     { company: "Honda", model: "Elevate", year: 2023 },
     { company: "Honda", model: "Amaze", year: 2022 }
   ]
}

演示 3

我们将使用 groupBy() 方法按订阅年份对用户进行分组。

代码

const subcriptions = [
  { userName: 'Kavya', yearSubscription: 2021 },
  { userName: 'Karishma', yearSubscription: 2023 },
  { userName: 'Lavyansh', yearSubscription: 2023 },
  { userName: 'Ansh', yearSubscription: 2021 },
  { userName: 'Chandni', yearSubscription: 2024 },
  { userName: 'Harsh', yearSubscription: 2024 },
];
const subsByYear = Object.groupBy(subscriptions, (user) => user.yearSubscription);
console.log(subsByYear);

输出

我们可以看到三个组，分别为 2021、2023 和 2024。

[Object: null prototype] {
   "2021": [
     { userName: "Kavya", yearSubscription: 2021 },
     { userName: "Ansh", yearSubscription: 2021 }
   ],
   "2023": [
     { userName: "Karishma", yearSubscription: 2023 },
     { userName: "Lavyansh", yearSubscription: 2023 }
   ],
   "2024": [
     { userName: "Chandni", yearSubscription: 2024 },
     { userName: "Harsh", yearSubscription: 2024 }
   ]
}

演示 4

我们将使用 groupBy() 方法将数字分为偶数组和奇数组。我们将为 n 值创建一个回调函数，然后检查数字是偶数还是奇数。

代码

const numbers = [1, 5, 8, 3, 2, 4];
const group = Object.groupBy(numbers, (n) => (n % 2 == 0 ? 'even' : 'odd'));
console.log(group);

输出

我们可以看到结果对象包含两个组，名称分别为 奇数（odd）和偶数（even）。

[Object: null prototype] { odd: [ 1, 5, 3 ], even: [ 8, 2, 4 ] }

浏览器兼容性

以下是支持 groupBy() 方法的浏览器

谷歌浏览器
Microsoft Edge
Safari
Opera
火狐
Google Chrome Android
Firefox for Android
Safari (iOS)
Opera Android

结论

在本文中，我们已经理解了 JavaScript 中的 groupBy()。我们已经通过演示理解了 Object.groupBy()。

下一主题Javascript-let-vs-var

groupBy() 在 JavaScript 中的用法

groupBy() 方法

语法

演示 1

演示 2

演示 3

演示 4

浏览器兼容性

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

groupBy() 在 JavaScript 中的用法

groupBy() 方法

语法

演示 1

演示 2

演示 3

演示 4

浏览器兼容性

结论

相关帖子

Langchain JavaScript

带引号的 JavaScript 字符串

JavaScript 严格模式

JavaScript 书签

JavaScript 位运算符

JavaScript 中的随机颜色生成器

JavaScript 任务

JavaScript 计时器

JavaScript 完全参考