在 JavaScript 中按计数对元素进行分组

简介

在本实验中，我们将学习 countBy 函数，该函数用于根据给定函数对数组元素进行分组，并返回每个组中的元素计数。我们将探讨如何使用此函数将数组的值映射到函数或属性名称，以及如何使用 Array.prototype.reduce() 创建一个对象来计算每个组中的元素。我们还将查看几个示例，以了解如何在实际场景中使用此函数。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28221{{"按计数对元素进行分组"}} javascript/data_types -.-> lab-28221{{"按计数对元素进行分组"}} javascript/arith_ops -.-> lab-28221{{"按计数对元素进行分组"}} javascript/comp_ops -.-> lab-28221{{"按计数对元素进行分组"}} javascript/array_methods -.-> lab-28221{{"按计数对元素进行分组"}} javascript/higher_funcs -.-> lab-28221{{"按计数对元素进行分组"}} javascript/destr_assign -.-> lab-28221{{"按计数对元素进行分组"}} end

如何使用 JavaScript 对数组中的元素进行分组和计数

要使用 JavaScript 对数组中的元素进行分组和计数，请执行以下步骤：

打开终端/SSH 并输入 node 以开始练习编码。
使用 Array.prototype.map() 方法将数组的值映射到函数或属性名称。
使用 Array.prototype.reduce() 方法创建一个对象，其中键由映射结果生成。
创建一个名为 countBy 的函数，该函数接受一个数组和一个函数作为参数。
在 countBy 函数内部，使用三元运算符检查传递的参数是函数还是属性名称。如果是函数，则将其用作映射函数。如果是属性名称，则访问数组元素的该属性。
使用 reduce() 方法创建一个对象，其中每个键代表数组中的一个唯一元素，其值是它在数组中出现的次数。

以下是代码：

const countBy = (arr, fn) =>
  arr
    .map(typeof fn === "function" ? fn : (val) => val[fn])
    .reduce((acc, val) => {
      acc[val] = (acc[val] || 0) + 1;
      return acc;
    }, {});

你可以使用以下示例测试 countBy 函数：

countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}
countBy(["one", "two", "three"], "length"); // {3: 2, 5: 1}
countBy([{ count: 5 }, { count: 10 }, { count: 5 }], (x) => x.count); // {5: 2, 10: 1}

总结

恭喜你！你已经完成了“计数分组元素”实验。你可以在 LabEx 中练习更多实验来提升你的技能。