本教程探讨如何在javascript对象数组中，为每个元素计算并添加一个新属性，该属性表示某个指定键值在遍历过程中出现的累积频率。我们将详细介绍两种主要实现策略：一种是利用 `array.prototype.reduce()` 实现非原地修改（immutable）的方法，生成一个全新的数组；另一种是利用 `array.prototype.foreach()` 实现原地修改（mutable）的方法，直接更新原始数组。通过这两种方法，读者将掌握如何高效且灵活地处理此类数据转换需求。
在JavaScript开发中，我们经常需要处理包含多个对象的数组。一个常见的需求是，根据数组中某个特定属性的值，计算其在遍历过程中的累积出现频率，并将这个累积频率作为新属性添加到每个对象中。例如，给定一个对象数组，我们希望为每个对象添加一个 value_3 属性，表示其 value_2 属性值在当前位置之前（包括当前位置）已经出现的次数。
考虑以下初始数据结构：
const array = [ { id: 1, value_1: 2, value_2: 3 }, { id: 2, value_1: 3, value_2: 4 }, { id: 3, value_1: 4, value_2: 3 }, { id: 4, value_1: 5, value_2: 2 }, { id: 5, value_1: 6, value_2: 3 }, { id: 6, value_1: 7, value_2: 2 },];
我们期望的输出结果是：
const expectedArray = [ { id: 1, value_1: 2, value_2: 3, value_3: 1 }, // value_2: 3 第一次出现 { id: 2, value_1: 3, value_2: 4, value_3: 1 }, // value_2: 4 第一次出现 { id: 3, value_1: 4, value_2: 3, value_3: 2 }, // value_2: 3 第二次出现 { id: 4, value_1: 5, value_2: 2, value_3: 1 }, // value_2: 2 第一次出现 { id: 5, value_1: 6, value_2: 3, value_3: 3 }, // value_2: 3 第三次出现 { id: 6, value_1: 7, value_2: 2, value_3: 2 }, // value_2: 2 第二次出现];
接下来，我们将探讨两种实现此功能的有效方法。
立即学习“Java免费学习笔记（深入）”；
1. 使用 Array.prototype.reduce() 实现非原地修改
reduce() 方法是处理数组并将其归结为单个值的强大工具，但它也可以用于将数组转换为一个新数组或对象，同时不修改原始数组。这种方法通过维护一个累加器对象来实现，该对象包含计数器和最终结果数组。
核心思想
初始化累加器： reduce() 方法接收一个初始值，我们可以将其设置为一个包含两个属性的对象：counts：一个空对象，用于存储每个 value_2 值对应的累积频率。result：一个空数组，用于存储最终处理后的新对象。迭代处理： 在每次迭代中，对于当前处理的 item：提取 item.value_2 作为计数器的键。使用空值合并赋值运算符 (??=) 来确保该键的计数器被正确初始化为 0（如果之前不存在）。将该键的计数器加一。创建一个当前 item 的浅拷贝，并添加 value_3 属性，其值为当前更新后的计数。将这个新的对象推入 result 数组。返回更新后的累加器对象。提取结果： reduce() 方法执行完毕后，从最终的累加器对象中解构出 result 数组，即为我们所需的新数组。
代码示例
const array = [ { id: 1, value_1: 2, value_2: 3 }, { id: 2, value_1: 3, value_2: 4 }, { id: 3, value_1: 4, value_2: 3 }, { id: 4, value_1: 5, value_2: 2 }, { id: 5, value_1: 6, value_2: 3 }, { id: 6, value_1: 7, value_2: 2 },];const { result } = array.reduce( ({ counts, result }, item) => { const { value_2: key } = item; // 将 value_2 的值作为键 // 使用 ??= 初始化或获取当前计数，然后递增 let currentCount = (counts[key] ??= 0); counts[key] = ++currentCount; // 创建新对象，添加 value_3 属性，并将其推入结果数组 result.push({ ...item, // 复制原始对象的所有属性 value_3: currentCount, }); return { counts, result }; // 返回更新后的累加器 }, { counts: {}, result: [] } // reduce 的初始值);console.log('原始数组 (未修改):', array);console.log('结果数组 (新增):', result);/*输出结果:原始数组 (未修改): [ { id: 1, value_1: 2, value_2: 3 }, { id: 2, value_1: 3, value_2: 4 }, { id: 3, value_1: 4, value_2: 3 }, { id: 4, value_1: 5, value_2: 2 }, { id: 5, value_1: 6, value_2: 3 }, { id: 6, value_1: 7, value_2: 2 }]结果数组 (新增): [ { id: 1, value_1: 2, value_2: 3, value_3: 1 }, { id: 2, value_1: 3, value_2: 4, value_3: 1 }, { id: 3, value_1: 4, value_2: 3, value_3: 2 }, { id: 4, value_1: 5, value_2: 2, value_3: 1 }, { id: 5, value_1: 6, value_2: 3, value_3: 3 }, { id: 6, value_1: 7, value_2: 2, value_3: 2 }]*/
优点与适用场景
非原地修改 (Immutable)： 原始 array 保持不变，这在函数式编程范式中是首选，有助于避免副作用和提高代码可预测性。链式调用： reduce() 可以与其他数组方法进行链式调用，使代码更简洁。灵活性： 累加器可以存储复杂的状态，适用于多种数据转换场景。
2. 使用 Array.prototype.forEach() 实现原地修改
如果允许修改原始数组，或者这是特定场景下的需求，那么 forEach() 方法结合一个外部计数器对象可以提供一个更简洁的解决方案。
核心思想
外部计数器： 定义一个空对象，用于存储每个 value_2 值对应的累积频率。迭代处理： 使用 forEach() 遍历数组。为了在 forEach 的回调函数中访问外部计数器，可以利用 forEach 的第二个参数 thisArg。在回调函数内部，this 关键字将指向 thisArg 传递的对象。提取当前 item.value_2 作为键。使用空值合并赋值运算符 (??=) 初始化或获取当前计数。将该键的计数器加一。直接在当前 item 对象上添加 value_3 属性，其值为更新后的计数。
代码示例
const array = [ { id: 1, value_1: 2, value_2: 3 }, { id: 2, value_1: 3, value_2: 4 }, { id: 3, value_1: 4, value_2: 3 }, { id: 4, value_1: 5, value_2: 2 }, { id: 5, value_1: 6, value_2: 3 }, { id: 6, value_1: 7, value_2: 2 },];// 使用匿名函数表达式，以便利用其 this 上下文作为计数器array.forEach(function (item) { const counts = this; // this 指向 forEach 的第二个参数 {} const { value_2: key } = item; // 使用 ??= 初始化或获取当前计数，然后递增 let currentCount = (counts[key] ??= 0); item.value_3 = counts[key] = ++currentCount;}, {}); // 传递一个空对象作为 thisArgconsole.log('原始数组 (已修改):', array);/*输出结果:原始数组 (已修改): [ { id: 1, value_1: 2, value_2: 3, value_3: 1 }, { id: 2, value_1: 3, value_2: 4, value_3: 1 }, { id: 3, value_1: 4, value_2: 3, value_3: 2 }, { id: 4, value_1: 5, value_2: 2, value_3: 1 }, { id: 5, value_1: 6, value_2: 3, value_3: 3 }, { id: 6, value_1: 7, value_2: 2, value_3: 2 }]*/
注意事项： 在使用 forEach 的 thisArg 时，回调函数必须是一个传统的 function 表达式，而不能是箭头函数，因为箭头函数没有自己的 this 绑定，它会捕获其父作用域的 this。
优点与适用场景
简洁性： 对于原地修改而言，代码相对简洁直观。性能： 避免了创建新数组和新对象的开销（相对于 reduce 而言，如果不需要新数组）。原地修改 (Mutable)： 直接修改原始数组，适用于当原始数据结构可以被修改且不需要保留副本的场景。
3. 关键概念与注意事项
在上述两种解决方案中，我们利用了一些现代JavaScript特性和编程原则：
Array.prototype.reduce() 与 Array.prototype.forEach() 的选择：当需要基于原数组生成一个全新的数组或一个单一的聚合结果时，reduce() 是更强大的选择，尤其是在需要保持原始数据不可变性时。当只需要遍历数组并对每个元素执行副作用（如修改元素自身或执行外部操作）时，forEach() 更为直接。空值合并赋值运算符 (??=)： 这个运算符（ES2021引入）提供了一种简洁的方式来为变量赋默认值，但仅当变量为 null 或 undefined 时才会赋值。
let count = (obj.key ??= 0); // 如果 obj.key 是 null 或 undefined，则将其设置为 0
它等价于 obj.key = obj.key ?? 0;。这在初始化计数器时非常有用，避免了 if (obj.key === undefined) { obj.key = 0; } 这样的冗长判断。
对象展开运算符 (…)： 在 reduce() 方案中，{ …item, value_3: currentCount } 使用了对象展开运算符。它创建了一个 item 对象的浅拷贝，然后用 value_3 属性覆盖或添加新属性。这是实现不可变更新的关键，确保原始对象不被修改。可变性 (Mutability) 与 不可变性 (Immutability)：不可变性（如 reduce() 方案）指的是数据一旦创建就不能被改变。任何修改都会产生新的数据副本。这有助于减少程序中的错误，使状态管理更简单，尤其是在复杂应用中。可变性（如 forEach() 方案）指的是数据可以在创建后被修改。虽然在某些情况下可能更直接或性能更高，但它可能导致意外的副作用，尤其是在多个部分共享和修改同一数据时。
总结
本文详细介绍了在JavaScript数组对象中计算特定属性值累积频率的两种主要方法。通过 Array.prototype.reduce()，我们可以实现一个非原地修改的解决方案，生成一个全新的数组，同时保持原始数据的完整性。这种方法适用于对数据不可变性有要求的场景。而通过 Array.prototype.forEach()，我们可以在允许原地修改的情况下，以更简洁的方式直接更新原始数组。选择哪种方法取决于具体的业务需求、对数据可变性的接受程度以及团队的代码风格偏好。掌握这些技术，将使您在处理JavaScript数组数据转换时更加得心应手。
以上就是JavaScript数组对象中特定属性值累积频率的计算方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541644.html
微信扫一扫 
支付宝扫一扫 
