Underscore.js 链式调用：从嵌套数组中统计元素出现频率的教程-js教程-PHP中文网

Underscore.js 链式调用：从嵌套数组中统计元素出现频率的教程

本教程旨在指导如何使用 Underscore.js 从嵌套数组结构中高效统计元素的出现频率，例如从多支球队的球员名单中统计每个球员名字的出现次数。文章将重点介绍 _.countBy() 方法的简洁性与效率，并提供两种实现方案：结合原生 flatMap() 或纯 Underscore 链式调用 _.map().flatten().countBy()。同时，教程还将深入分析 _.reduce() 在此类场景下的常见误用及其正确实现方式，帮助开发者避免陷阱并优化代码逻辑。

从嵌套数组中统计元素频率：问题与挑战

在前端开发中，我们经常需要处理复杂的数据结构，例如一个包含多个对象的数组，每个对象又包含一个子数组。一个典型的场景是，我们有一个表示nfl球队的数组，每支球队对象中包含一个球员名字的数组。我们的目标是统计所有球队中每个球员名字出现的总次数，并将其存储在一个以名字为键、出现次数为值的对象中。

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 },
];

登录后复制

期望的结果是一个类似 {'Joe': 2, 'Jimmy': 1, 'Jalen': 1, ...} 的对象。初学者可能会尝试使用 _.map()、_.flatten() 和 _.reduce() 组合来实现，但在 _.reduce() 阶段常会遇到逻辑错误。

方案一：利用 _.countBy() 实现高效统计

Underscore.js 提供了一个专门用于统计集合中元素出现频率的利器——_.countBy() 方法。它能够根据给定迭代器（或属性名）对集合中的元素进行分组计数，极大地简化了频率统计的逻辑。

为了将嵌套的球员名字数组扁平化成一个单一的球员名字列表，我们可以结合使用原生 JavaScript 的 Array.prototype.flatMap() 或 Underscore.js 的 _.map() 和 _.flatten()。

1. 结合原生 flatMap() 与 _.countBy()

如果你的项目环境支持 ES2019 或更高版本，Array.prototype.flatMap() 是一个非常简洁的选择，它能够先对数组的每个元素执行映射操作，然后将所有结果扁平化成一个新数组。

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

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 },
];

const playerFirstNameCounts = _.countBy(nflTeams.flatMap(team => team.playersFirstNames));
console.log(playerFirstNameCounts);
// 预期输出: { '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': 2, '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 }

登录后复制

这种方法首先使用 flatMap() 将所有球队的球员名字列表合并成一个扁平的数组，然后 _.countBy() 直接对这个扁平数组进行计数。

2. 纯 Underscore 链式调用 map().flatten().countBy()

如果你倾向于完全使用 Underscore.js 的方法，或者环境不支持 flatMap()，你可以通过 _.chain() 将 _.map()、_.flatten() 和 _.countBy() 串联起来。

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

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 },
];

const playerFirstNameCountsChained = _.chain(nflTeams)
  .map('playersFirstNames') // 提取所有球队的 playersFirstNames 数组
  .flatten()               // 将所有球员名字数组扁平化为一个单一数组
  .countBy()               // 对扁平化后的数组进行计数
  .value();                // 获取链式操作的最终结果

console.log(playerFirstNameCountsChained);
// 预期输出与上例相同

登录后复制

这个方法清晰地展示了如何利用 Underscore 的链式调用能力，先通过 map('playersFirstNames') 提取出所有球队的球员名字数组集合，然后 flatten() 将这些数组合并成一个扁平的列表，最后 countBy() 完成计数。

深入理解 _.reduce() 的应用与常见陷阱

虽然 _.countBy() 是此场景下的最佳实践，但理解 _.reduce() 的正确用法对于处理更复杂的聚合逻辑至关重要。许多初学者在尝试使用 _.reduce() 进行计数时会遇到问题，主要是因为对 JavaScript 运算符和 _.reduce() 回调函数返回值的理解不足。

设计师AI工具箱

最懂设计师的效率提升平台，实现高效设计出图和智能改图，室内设计，毛坯渲染，旧房改造，软装设计

124

查看详情

1. 错误 _.reduce() 实现分析

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

// 错误示例
var firstNameOccurence = _.chain(nflTeams)
  .map(function(team) { return team.playersFirstNames })
  .flatten()
  .reduce(function(newObject, firstName) {
    console.log('we have a first name of a player', firstName);
    // 这里的逻辑是错误的
    return newObject[firstName] = 1 ? !newObject[firstName] : newObject[firstName] += 1;
  }, {})
  .value();

登录后复制

这段代码的问题在于 newObject[firstName] = 1 ? !newObject[firstName] : newObject[firstName] += 1; 这一行。让我们逐一分析：

赋值与布尔上下文： newObject[firstName] = 1 会将 firstName 属性的值设置为 1，并且这个赋值表达式本身会评估为 1。在 JavaScript 中，任何非零数字在布尔上下文中都被视为 true。
三元运算符的误用： 因此，newObject[firstName] = 1 ? ... 这一部分总是为 true，导致三元表达式的 true 分支 !newObject[firstName] 总是被执行。
返回布尔值： 由于 newObject[firstName] 刚被设置为 1，所以 !newObject[firstName] 实际上是 !1，即 false。这意味着 _.reduce() 的回调函数在第一次迭代时就返回了 false。
后续迭代： 在后续的迭代中，newObject 不再是一个对象，而是一个布尔值 false。尝试在 false 上设置属性（false[firstName] = 1）虽然不会抛出错误，但也不会修改 false 本身。此时 !newObject[firstName] 会变成 !undefined，即 true。最终，_.reduce() 返回的将是最后一个迭代返回的布尔值，而不是我们期望的计数对象。

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

_.reduce() 的回调函数必须始终返回累加器（currObject），以便在下一次迭代中继续使用它。正确的计数逻辑应该是在累加器对象上安全地递增计数。

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

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 },
];

const playerFirstNameCountsReduced = _.chain(nflTeams)
  .map('playersFirstNames')
  .flatten()
  .reduce((currObject, firstName) => {
    // 如果 firstName 已经存在，则在其当前值上加 1；否则，将其初始化为 1。
    currObject[firstName] = (currObject[firstName] || 0) + 1;
    return currObject; // 始终返回累加器对象
  }, {}) // 初始累加器是一个空对象
  .value();

console.log(playerFirstNameCountsReduced);
// 预期输出与上例相同

登录后复制

在这个正确的实现中：

currObject[firstName] = (currObject[firstName] || 0) + 1; 确保了如果 firstName 首次出现，它的计数会从 0 开始加 1；如果已经存在，则在其当前值上加 1。|| 0 是一个常见的模式，用于处理属性可能未定义的情况。
return currObject; 明确地返回了被修改后的累加器对象，保证了 _.reduce() 的链式操作能够正确进行。

注意事项： 另一种更简洁的 reduce 回调写法是 ((currObject, firstName) => ({...currObject, [firstName]: (currObject[firstName] || 0) + 1}))。这种写法在每次迭代时都会创建一个新对象，并复制所有现有属性，然后添加或更新当前 firstName 的计数。虽然代码看起来更简洁，但从性能角度来看，它在每次迭代中都会创建新对象并遍历现有属性，因此效率不如直接修改 currObject 的方法。在处理大型数据集时，应优先考虑直接修改 currObject 的方式。

总结与最佳实践

从嵌套数组中统计元素频率是一个常见的需求。Underscore.js 提供了强大的工具来简化这一过程：

首选 _.countBy()： 对于频率统计这类特定任务，_.countBy() 是最直接、最简洁且效率最高的 Underscore 方法。它封装了内部的计数逻辑，使代码更具可读性。
扁平化处理： 在使用 _.countBy() 之前，通常需要将嵌套数组扁平化。你可以选择：
- 原生 Array.prototype.flatMap()： 如果你的目标环境支持，这是最现代且简洁的 JavaScript 方式。
- Underscore _.map().flatten() 链式调用： 这是纯 Underscore 的解决方案，适用于所有支持 Underscore 的环境。
理解 _.reduce()： 尽管 _.reduce() 功能强大且通用，但它要求开发者对 JavaScript 的运算符优先级、赋值行为以及回调函数的返回值有深入理解。在实现计数逻辑时，务必确保正确初始化并返回累加器对象，并妥善处理属性不存在的情况。