分组元素的新方式：探索 Map.groupBy() 和 Map.ungroup()

2023-12-06 15:00:35

如今，随着网络技术的不断发展，ECMAScript 也在不断更新，以适应不断变化的网络需求。ECMAScript 最近更新了两个对象分组 API，分别为 Map.groupBy() 和 Map.ungroup()。这两个方法将如何改变你处理对象分组的方式呢？我们一起来了解一下。

Map.groupBy()

Map.groupBy() 静态方法使用提供的回调函数返回的值对给定可迭代对象中的元素进行分组。最终返回的 Map 使用测试函数返回的唯一值作为键，可用于获取每个组中的元素组成的数组。

语法

Map.groupBy(iterable, keySelector)

参数

iterable：要分组的可迭代对象。
keySelector：一个回调函数，用于将每个元素映射到一个键。

返回值

一个 Map 对象，其中键是唯一值，值是元素数组。

示例

const people = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 30 }
];

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

console.log(groupedByAge);
// 输出：
// Map { 20 => [ { name: 'John', age: 20 } ], 25 => [ { name: 'Jane', age: 25 } ], 30 => [ { name: 'Bob', age: 30 } ] }

Map.ungroup()

Map.ungroup() 静态方法将一个 Map 对象转换为一个包含键值对的可迭代对象。

语法

Map.ungroup(map)

参数

map：要转换的 Map 对象。

返回值

一个包含键值对的可迭代对象。

示例

const people = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 30 }
];

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

const ungrouped = Map.ungroup(groupedByAge);

console.log(ungrouped);
// 输出：
// [ [ 20, [ { name: 'John', age: 20 } ] ], [ 25, [ { name: 'Jane', age: 25 } ] ], [ 30, [ { name: 'Bob', age: 30 } ] ] ]