JavaScript数组对象中特定属性值累积频率的计算方法-js教程-PHP中文网

JavaScript数组对象中特定属性值累积频率的计算方法

碧海醫心

发布： 2025-12-08 22:29:02

原创

840人浏览过

JavaScript数组对象中特定属性值累积频率的计算方法

本教程探讨如何在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() 方法是处理数组并将其归结为单个值的强大工具，但它也可以用于将数组转换为一个新数组或对象，同时不修改原始数组。这种方法通过维护一个累加器对象来实现，该对象包含计数器和最终结果数组。

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

162

查看详情

核心思想

初始化累加器： 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数组数据转换时更加得心应手。

以上就是JavaScript数组对象中特定属性值累积频率的计算方法的详细内容，更多请关注php中文网其它相关文章！