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

聖光之護

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

161人浏览过

来源于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 库
// 

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 库
// 

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

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

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

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

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

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

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

艾绘

艾绘：一站式绘本创作平台，AI智能绘本设计神器！

下载

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 库
// 

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()无疑是最高效和最优雅的解决方案。

JSDoc 注释应放在 JavaScript 类的构造函数上方，而非类声明上方

如何为动态创建的 HTML 元素精准应用 CSS 样式

javascript原型链如何理解_它怎样实现继承机制【教程】

javascript有哪些设计模式_如何应用在项目中【教程】

javascript迭代器是什么_它如何与for-of循环配合工作【教程】