本教程旨在指导如何使用 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// 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// 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() 回调函数返回值的理解不足。
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// 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 的运算符优先级、赋值行为以及回调函数的返回值有深入理解。在实现计数逻辑时，务必确保正确初始化并返回累加器对象，并妥善处理属性不存在的情况。
选择合适的工具和正确实现逻辑是编写高效、可维护代码的关键。在处理数据聚合和转换时，优先考虑使用库提供的专用方法（如 _.countBy()），因为它们通常经过优化且意图明确。当需要更复杂的自定义聚合时，再深入利用 _.reduce()，并确保其逻辑的严谨性。
以上就是Underscore.js 链式调用：从嵌套数组中统计元素出现频率的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524790.html
微信扫一扫 
支付宝扫一扫 
