本教程探讨如何在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;
}, {}); // 传递一个空对象作为 thisArg
console.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数组数据转换时更加得心应手。
