按计数对元素进行分组

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习 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 对数组中的元素进行分组和计数,请执行以下步骤:

  1. 打开终端/SSH 并输入 node 以开始练习编码。
  2. 使用 Array.prototype.map() 方法将数组的值映射到函数或属性名称。
  3. 使用 Array.prototype.reduce() 方法创建一个对象,其中键由映射结果生成。
  4. 创建一个名为 countBy 的函数,该函数接受一个数组和一个函数作为参数。
  5. countBy 函数内部,使用三元运算符检查传递的参数是函数还是属性名称。如果是函数,则将其用作映射函数。如果是属性名称,则访问数组元素的该属性。
  6. 使用 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 中练习更多实验来提升你的技能。