使用Underscore.js处理嵌套数组数据并统计元素出现频率

夜宇同学_5772

发布时间：2025-09-30 09:15:33

181人浏览过

来源于php中文网

原创

使用Underscore.js处理嵌套数组数据并统计元素出现频率

本文详细介绍了如何利用Underscore.js高效地从嵌套数组中提取数据并统计元素的出现频率。通过结合_.map()、_.flatten()和_.countBy()等方法，可以简洁地实现这一目标。文章还探讨了JavaScript原生flatMap()的用法，并深入分析了_.reduce()在实现此功能时的常见误区及正确实践，旨在帮助开发者选择最合适的工具和方法来处理复杂数据结构。

场景描述

在数据处理中，我们经常会遇到需要从复杂数据结构中提取特定信息并进行统计的场景。例如，给定一个包含多个对象的数组，每个对象又包含一个子数组，我们需要统计子数组中元素的出现频率。以下是一个具体的例子：我们有一个nfl球队的数组，每个球队对象中包含一个球员名字的首字母数组。我们的目标是统计所有球员名字首字母的出现次数，并将其存储在一个对象中，例如：{'joe': 2, 'jimmy': 1, 'jalen': 1, ...}。

初始数据结构如下：

var nflTeams = [
  { name: 'Kansas City Chiefs', playersFirstNames: ['Shane', 'Chad', 'Michael', 'Ronald', 'Blake', 'Noah'], champions: true },
  { name: 'Philadelphia Eagles', playersFirstNames: ['Jalen', 'Kenneth', 'Boston', 'Trey', 'Jack', 'Andre', 'Jack', 'Lane', 'Jason', 'Nakobe'], champions: false },
  { name: 'Cincinnati Bengals', playersFirstNames: ['Brandon', 'Joe', 'Chris', 'Joe', 'Tyler', 'Trenton', 'Trent', 'Mitchell', 'Alex', 'Trey', 'Ted'], champions: false },
  { name: 'San Francisco 49ers', playersFirstNames: ['Jimmy', 'Josh', 'Kyle', 'Jordan', 'Brandon', 'Danny', 'George', 'Tyler', 'Charlie', 'Jake', 'Nick', 'Nick', 'Kevin'], champions: false },
];

推荐方案：利用Underscore.js的_.countBy()

Underscore.js提供了_.countBy()方法，专门用于统计集合中每个元素出现的次数。结合数据扁平化操作，可以非常简洁地实现我们的目标。

1. 使用JavaScript原生flatMap()与_.countBy()

如果您的运行环境支持ES2019及更高版本，可以使用数组原生的flatMap()方法。flatMap()可以先对数组中的每个元素执行map操作，然后将结果扁平化为一级新数组。这在处理嵌套数组时非常方便。

const nflTeams = [
  { name: 'Kansas City Chiefs', playersFirstNames: ['Shane', 'Chad', 'Michael', 'Ronald', 'Blake', 'Noah'], champions: true },
  { name: 'Philadelphia Eagles', playersFirstNames: ['Jalen', 'Kenneth', 'Boston', 'Trey', 'Jack', 'Andre', 'Jack', 'Lane', 'Jason', 'Nakobe'], champions: false },
  { name: 'Cincinnati Bengals', playersFirstNames: ['Brandon', 'Joe', 'Chris', 'Joe', 'Tyler', 'Trenton', 'Trent', 'Mitchell', 'Alex', 'Trey', 'Ted'], champions: false },
  { name: 'San Francisco 49ers', playersFirstNames: ['Jimmy', 'Josh', 'Kyle', 'Jordan', 'Brandon', 'Danny', 'George', 'Tyler', 'Charlie', 'Jake', 'Nick', 'Nick', 'Kevin'], champions: false },
];

// 导入 Underscore.js 库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>

const resWithFlatMap = _.countBy(nflTeams.flatMap(team => team.playersFirstNames));
console.log(resWithFlatMap);
// 预期输出: { 'Shane': 1, 'Chad': 1, 'Michael': 1, 'Ronald': 1, 'Blake': 1, 'Noah': 1, 'Jalen': 1, 'Kenneth': 1, 'Boston': 1, 'Trey': 2, 'Jack': 2, 'Andre': 1, 'Lane': 1, 'Jason': 1, 'Nakobe': 1, 'Brandon': 1, 'Joe': 2, 'Chris': 1, 'Tyler': 2, 'Trenton': 1, 'Trent': 1, 'Mitchell': 1, 'Alex': 1, 'Ted': 1, 'Jimmy': 1, 'Josh': 1, 'Kyle': 1, 'Jordan': 1, 'Danny': 1, 'George': 1, 'Charlie': 1, 'Jake': 1, 'Nick': 2, 'Kevin': 1 }

注意事项： Underscore.js本身不提供flatMap方法，但Lodash等其他工具库或现代JavaScript环境提供了此功能。

2. 链式调用_.map()、_.flatten()和_.countBy()

如果需要纯粹使用Underscore.js的方法，或者环境不支持flatMap()，可以通过_.chain()、_.map()和_.flatten()的组合来实现相同的数据扁平化效果，然后再使用_.countBy()进行统计。

const nflTeams = [
  { name: 'Kansas City Chiefs', playersFirstNames: ['Shane', 'Chad', 'Michael', 'Ronald', 'Blake', 'Noah'], champions: true },
  { name: 'Philadelphia Eagles', playersFirstNames: ['Jalen', 'Kenneth', 'Boston', 'Trey', 'Jack', 'Andre', 'Jack', 'Lane', 'Jason', 'Nakobe'], champions: false },
  { name: 'Cincinnati Bengals', playersFirstNames: ['Brandon', 'Joe', 'Chris', 'Joe', 'Tyler', 'Trenton', 'Trent', 'Mitchell', 'Alex', 'Trey', 'Ted'], champions: false },
  { name: 'San Francisco 49ers', playersFirstNames: ['Jimmy', 'Josh', 'Kyle', 'Jordan', 'Brandon', 'Danny', 'George', 'Tyler', 'Charlie', 'Jake', 'Nick', 'Nick', 'Kevin'], champions: false },
];

// 导入 Underscore.js 库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>

const resWithChain = _.chain(nflTeams)
  .map('playersFirstNames') // 提取所有球队的 playersFirstNames 数组
  .flatten()               // 将所有子数组扁平化为一个单一的数组
  .countBy()               // 统计每个名字的出现次数
  .value();                // 获取链式操作的最终结果

console.log(resWithChain);
// 预期输出与上述相同

这种方法清晰地展示了Underscore.js链式调用的强大之处，它将数据转换和统计过程分解为易于理解的步骤。

深入理解：_.reduce()的正确使用与常见误区

虽然_.countBy()是解决此类问题的最佳选择，但理解如何正确使用_.reduce()也至关重要，尤其是在需要自定义聚合逻辑时。原始问题中尝试使用_.reduce()但遇到了问题，这暴露了一些JavaScript核心操作符和_.reduce()使用上的常见误区。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

1. _.reduce()的常见误区分析

原先的_.reduce()尝试代码如下：

var firstNameOccurence = _.chain (nflTeams)
  .map(function(team) {return team.playersFirstNames})
  .flatten()
  .reduce(function(newObject, firstName){
      // 错误的逻辑
      return newObject[firstName] = 1 ? !newObject[firstName] :  newObject[firstName] += 1;
  }, {})
  .value();

这段代码的问题在于对JavaScript操作符（如赋值=、逻辑非!、三元运算符? :）的理解不准确，以及对_.reduce()回调函数返回值的作用不清晰。

赋值操作符=的返回值： newObject[firstName] = 1这个表达式不仅会将1赋值给newObject[firstName]，其整个表达式的值也是1。
三元运算符的判断条件： newObject[firstName] = 1 ? ... : ... 这意味着三元运算符的条件部分始终是1，在布尔上下文中被视为true。因此，三元运算符的“真”分支将始终被执行。
逻辑非!操作： !newObject[firstName]在newObject[firstName]被设置为1之后，!1会返回false。
_.reduce()回调的返回值： _.reduce()的回调函数必须返回累加器（accumulator）的下一个状态。在错误的逻辑中，它返回的是一个布尔值（false），而不是我们期望的对象。这意味着在第一次迭代后，newObject将不再是一个对象，而是一个布尔值false，后续操作将因尝试在非对象上设置属性而失败或产生意外结果。

因此，原始代码实际上会因为上述原因，在第一次迭代后返回false，并且在后续迭代中尝试在false上设置属性，导致最终结果不是一个对象，而是true或false。

2. _.reduce()的正确实现

要正确地使用_.reduce()实现统计功能，回调函数需要确保返回累加器对象，并且在对象中正确地更新计数。

const nflTeams = [
  { name: 'Kansas City Chiefs', playersFirstNames: ['Shane', 'Chad', 'Michael', 'Ronald', 'Blake', 'Noah'], champions: true },
  { name: 'Philadelphia Eagles', playersFirstNames: ['Jalen', 'Kenneth', 'Boston', 'Trey', 'Jack', 'Andre', 'Jack', 'Lane', 'Jason', 'Nakobe'], champions: false },
  { name: 'Cincinnati Bengals', playersFirstNames: ['Brandon', 'Joe', 'Chris', 'Joe', 'Tyler', 'Trenton', 'Trent', 'Mitchell', 'Alex', 'Trey', 'Ted'], champions: false },
  { name: 'San Francisco 49ers', playersFirstNames: ['Jimmy', 'Josh', 'Kyle', 'Jordan', 'Brandon', 'Danny', 'George', 'Tyler', 'Charlie', 'Jake', 'Nick', 'Nick', 'Kevin'], champions: false },
];

// 导入 Underscore.js 库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>

const resWithReduce = _.chain(nflTeams)
  .map('playersFirstNames')
  .flatten()
  .reduce((currObject, firstName) => {
    // 如果 currObject[firstName] 不存在或为 0，则初始化为 0，然后加 1
    // 否则，直接在现有值上加 1
    currObject[firstName] = (currObject[firstName] || 0) + 1;
    return currObject; // 务必返回累加器对象
  }, {}) // 初始累加器是一个空对象
  .value();

console.log(resWithReduce);
// 预期输出与上述相同

代码解析：

_.chain(nflTeams).map('playersFirstNames').flatten()：这部分与之前相同，用于获取所有扁平化的球员名字数组。
.reduce((currObject, firstName) => { ... }, {})：reduce方法接收一个回调函数和一个初始值（{}）。
- currObject：当前累加器，即正在构建的统计对象。
- firstName：当前迭代到的球员名字。
- currObject[firstName] = (currObject[firstName] || 0) + 1;：这是核心逻辑。
  - currObject[firstName] || 0：如果currObject[firstName]已经存在（即该名字之前出现过），则使用其当前值；如果不存在（即该名字第一次出现），则将其视为0。
  - + 1：将获取到的值加1，实现计数。
- return currObject;：关键一步！ 每次迭代后，必须返回更新后的currObject，以便下一次迭代能基于最新的状态继续操作。

总结

在处理嵌套数组并统计元素频率的场景中，Underscore.js提供了多种强大且简洁的解决方案：

首选方案： 结合_.chain()、_.map()、_.flatten()和_.countBy()。这是最符合Underscore.js设计哲学且代码可读性高的方案。如果环境支持，也可以利用JavaScript原生的flatMap()进一步简化数据扁平化步骤。
_.reduce()的替代方案： 尽管_.reduce()功能强大，但对于简单的计数任务，它不如_.countBy()直观。然而，理解_.reduce()的正确用法（特别是如何管理累加器和确保正确返回值）对于处理更复杂的聚合逻辑至关重要。

选择合适的工具和方法，不仅能提高代码效率，还能增强代码的可读性和可维护性。对于本教程中的问题，_.countBy()无疑是最高效和最优雅的解决方案。

JavaScript 中箭头函数怎么在 Object.defineProperty 中避免 this 误用

HTML怎么绑定多条件筛选事件

JavaScript 中构造函数返回对象时怎么影响 new 绑定的最终结果

JavaScript 中怎么排查由于隐式转换为 NaN 导致后续计算全部失效的 Bug

JS 长任务拆分怎么通过时间切片让出主线程控制权