JavaScript 中的新数组方法：groupBy

2023-12-17 19:50:39 浏览数 (1)

JavaScript 中的 groupBy 方法是 ECMAScript 2021 官方引入的标准库的一项宝贵补充。它简化了基于指定键或函数对数组元素进行分组的过程。以下是它的语法、参数、返回值以及一些示例的概述：

语法

代码语言：javascript复制
array.groupBy(keyFn, [mapFn])
参数：
  • keyFn：接受一个元素作为参数并返回用于分组的键的函数。
  • mapFn（可选）：接受一个元素作为参数并返回存储在键下的转换值的函数。
返回值：

groupBy 方法返回一个新的 Map 对象，其中键是应用于每个元素的键函数的唯一值，而值是包含原始数组中相应元素的数组。

示例

示例 1：按属性分组
代码语言：javascript复制
const people = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 30 },
];

const groupedByAge = people.groupBy(person => person.age);

console.log(groupedByAge);
// 输出：
// {
//   30: [{ name: "John", age: 30 }, { name: "Peter", age: 30 }],
//   25: [{ name: "Jane", age: 25 }],
// }
示例 2：分组和转换元素
代码语言：javascript复制
const products = [
  { name: "Apple", price: 1.5 },
  { name: "Banana", price: 0.8 },
  { name: "Orange", price: 1.2 },
];

const groupedByPrice = products.groupBy(
  product => product.price,
  product => product.name
);

console.log(groupedByPrice);
// 输出：
// {
//   "1.5": ["Apple"],
//   "0.8": ["Banana"],
//   "1.2": ["Orange"],
// }

使用 groupBy 的优势

  1. 简洁性：与使用循环和手动操作相比，groupBy 提供了更简洁、可读性更强的方式来实现相同的结果。
  2. 可读性：代码变得更加可读，更容易理解，特别是在处理复杂的数据结构时。
  3. 效率：根据实现方式，groupBy 对于大型数据集而言可能比手动方法更高效。

兼容性

groupBy 方法相对较新，尚未被所有浏览器完全支持。然而，它在现代浏览器中得到广泛支持，并且可以在较旧的环境中轻松进行 polyfill。

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

2023腾讯·技术创作特训营第四期

0 人点赞