0

0

js 怎么用averageBy计算对象数组的属性平均值

月夜之吻

月夜之吻

发布时间:2025-08-06 10:42:02

|

1069人浏览过

|

来源于php中文网

原创

计算对象数组某属性平均值最常用方法是使用 reduce 或 foreach 遍历累加有效数值并除以有效个数,1. 首先校验输入数组是否为空或非数组,是则返回 nan;2. 遍历数组,通过 typeof value === 'number' && !isnan(value) 过滤出有效数值进行累加并计数;3. 若无有效数值则返回 nan,否则返回总和除以计数的结果;4. 对于大数据量可考虑 web workers、增量更新或服务端计算优化性能;5. reduce 还可实现求和、最值、计数、扁平化、分组等聚合操作,是处理数组统计的通用解决方案。

js 怎么用averageBy计算对象数组的属性平均值

在 JavaScript 中,要计算对象数组某个属性的平均值,最直接也最常用的方法就是遍历数组,累加目标属性的值,然后除以元素的总数。这通常通过

Array.prototype.reduce()
方法来实现,因为它能优雅地将数组归结为一个单一的值,非常适合这种聚合计算。

解决方案

要实现一个类似

averageBy
的功能,我们通常会编写一个函数,它接收一个对象数组和一个表示属性名的字符串作为参数。核心思路就是用
reduce
遍历数组,累加指定属性的值,最后除以数组的长度。

/**
 * 计算对象数组中指定属性的平均值。
 * @param {Array} arr - 对象数组。
 * @param {string} prop - 要计算平均值的属性名。
 * @returns {number} 属性的平均值,如果数组为空或没有有效数值,则返回 NaN。
 */
function averageBy(arr, prop) {
  if (!Array.isArray(arr) || arr.length === 0) {
    console.warn("输入数组为空或不是一个数组。");
    return NaN; // 或者返回 0,取决于具体需求
  }

  let sum = 0;
  let count = 0; // 用于计算有效数值的个数

  arr.forEach(item => {
    const value = item[prop];
    // 确保值是数字且不是 NaN
    if (typeof value === 'number' && !isNaN(value)) {
      sum += value;
      count++;
    }
  });

  // 如果没有找到任何有效的数值,避免除以零
  if (count === 0) {
    console.warn(`属性 '${prop}' 在数组中没有找到有效的数值。`);
    return NaN;
  }

  return sum / count;
}

// 示例用法:
const students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 78 },
  { name: 'David', score: null }, // 缺失数据
  { name: 'Eve', score: 'abc' }, // 非数值
  { name: 'Frank', score: 90 }
];

const averageScore = averageBy(students, 'score');
console.log('平均分数:', averageScore); // 输出:平均分数: 86.25 ( (85+92+78+90)/4 )

const products = [
  { id: 1, price: 10.5 },
  { id: 2, price: 20.0 },
  { id: 3, price: 15.3 }
];
const averagePrice = averageBy(products, 'price');
console.log('平均价格:', averagePrice); // 输出:平均价格: 15.2666...

const emptyArray = [];
console.log('空数组的平均值:', averageBy(emptyArray, 'value')); // 输出:空数组的平均值: NaN

这里我特意用了

forEach
而不是
reduce
,是想更直观地展示累加和计数的逻辑,毕竟
reduce
写起来可能对初学者没那么直接。当然,用
reduce
也能很漂亮地实现:

function averageByWithReduce(arr, prop) {
  if (!Array.isArray(arr) || arr.length === 0) {
    return NaN;
  }

  const { sum, count } = arr.reduce((acc, item) => {
    const value = item[prop];
    if (typeof value === 'number' && !isNaN(value)) {
      acc.sum += value;
      acc.count++;
    }
    return acc;
  }, { sum: 0, count: 0 });

  return count === 0 ? NaN : sum / count;
}

console.log('使用 reduce 计算的平均分数:', averageByWithReduce(students, 'score'));

我个人更倾向于

reduce
的版本,它把累加和计数逻辑封装在一个迭代里,代码看起来更紧凑,也更符合函数式编程的理念。

如何处理缺失或非数值数据?

在实际开发中,数据往往不是那么“干净”的,你可能会遇到属性值缺失(

null
,
undefined
)、是字符串、甚至是
NaN
的情况。如果直接把它们加进去,结果肯定就不对了。所以,在计算平均值之前,我们必须对数据进行严格的校验和过滤。

就像上面代码里展示的,最关键的一步是判断

value
是否为
number
类型,并且不是
NaN
typeof value === 'number' && !isNaN(value)
是一个非常实用的组合拳。
isNaN()
会把
null
和空字符串等“可转换为数字”的值当成数字处理(
isNaN(null)
false
),所以我们先用
typeof
确保它是真正的数字,再用
isNaN
排除
NaN

处理这些“脏数据”的策略通常有两种:

DubbingX智声云配
DubbingX智声云配

多情绪免费克隆AI音频工具

下载
  1. 忽略(Skip):这是最常见的做法,就像我上面代码里那样,直接跳过那些非数值或无效的项,只计算有效数值的平均值。这确保了结果的准确性,反映的是“有效数据”的平均水平。
  2. 转换为零(Coerce to Zero):在某些特定业务场景下,你可能希望将缺失或无效的数据视为零。例如,如果一个学生没有考试分数,你可能想把它算作 0 分。但这需要业务逻辑明确支持,否则会扭曲平均值。实现起来就是
    sum += (typeof value === 'number' && !isNaN(value) ? value : 0);
    。不过,这会影响“参与计算的有效元素个数”,所以需要更细致的考虑。

在我看来,多数情况下“忽略”是更稳妥的选择。它避免了因数据质量问题而导致的统计偏差。

性能考量:大数据量下如何优化?

对于计算平均值这种操作,其时间复杂度本质上是 O(n),也就是说,你需要遍历数组中的每一个元素一次。在 JavaScript 运行时环境中,无论是

forEach
还是
reduce
,它们的底层实现都经过了高度优化,通常效率已经非常高了。对于绝大多数网页应用场景,即使是几万、几十万条数据,这种线性的遍历操作也不会成为性能瓶颈。

当然,如果你真的面对百万甚至千万级别的数据量,并且这些计算需要在浏览器主线程中频繁进行,那么确实需要考虑一些“非常规”的优化手段:

  • Web Workers: 将计算任务放到 Web Worker 中,这样就不会阻塞浏览器的主线程,用户界面依然保持流畅响应。这是处理大量计算的黄金法则。
  • 数据预处理或增量更新: 如果数据是逐步加载的,或者只有部分数据会变动,可以考虑只对变动部分进行计算,或者维护一个累加值和计数器,只在数据更新时进行增量调整,而不是每次都全量计算。
  • 服务器端计算: 如果数据量过于庞大,超出了浏览器能有效处理的范围,或者计算逻辑非常复杂,那么最好的办法是将计算任务放到服务器端完成,浏览器只负责展示结果。这能彻底解决客户端的性能压力。

不过说实话,对于 JS 中的平均值计算,大部分时候,你只需要写出清晰、逻辑正确的代码,而不用过度担心性能。JS 引擎的优化能力远超我们的想象,很多时候“优化”只是让代码更难读懂,而实际性能提升微乎其微。

除了平均值,还有哪些常见的数组聚合操作?

reduce
方法的强大之处远不止计算平均值。它几乎可以完成任何需要将数组“归结”为一个单一结果的聚合操作。除了平均值,以下是一些非常常见的应用场景:

  • 求和 (Sum):这是
    reduce
    最基础的应用,累加所有元素的和。
    const numbers = [1, 2, 3, 4, 5];
    const totalSum = numbers.reduce((acc, num) => acc + num, 0); // 15
  • 求最大/最小值 (Max/Min):找出数组中的最大或最小元素。
    const maxVal = numbers.reduce((acc, num) => Math.max(acc, num), -Infinity); // 5
    const minVal = numbers.reduce((acc, num) => Math.min(acc, num), Infinity); // 1
  • 计数/频率统计 (Count/Frequency):统计每个元素出现的次数,生成一个频率对象。
    const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
    const fruitCounts = fruits.reduce((acc, fruit) => {
      acc[fruit] = (acc[fruit] || 0) + 1;
      return acc;
    }, {});
    // { apple: 3, banana: 2, orange: 1 }
  • 数组扁平化 (Flatten an Array):将嵌套数组扁平化为一维数组。
    const nestedArray = [[1, 2], [3, 4], [5]];
    const flatArray = nestedArray.reduce((acc, subArray) => acc.concat(subArray), []); // [1, 2, 3, 4, 5]
  • 按属性分组 (Group By Property):将对象数组按某个属性的值进行分组。
    const people = [
      { name: 'Alice', city: 'NY' },
      { name: 'Bob', city: 'LA' },
      { name: 'Charlie', city: 'NY' }
    ];
    const peopleByCity = people.reduce((acc, person) => {
      const city = person.city;
      if (!acc[city]) {
        acc[city] = [];
      }
      acc[city].push(person);
      return acc;
    }, {});
    /*
    {
      NY: [{ name: 'Alice', city: 'NY' }, { name: 'Charlie', city: 'NY' }],
      LA: [{ name: 'Bob', city: 'LA' }]
    }
    */

    这些例子只是冰山一角,

    reduce
    的灵活性让它成为处理数组聚合逻辑的瑞士军刀。掌握了它,你就能以非常简洁和高效的方式处理各种复杂的数据转换和统计任务。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

538

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

390

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

989

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

653

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

539

2023.09.20

俄罗斯搜索引擎Yandex最新官方入口网址
俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com;用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1

2025.12.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

TypeScript全面解读课程
TypeScript全面解读课程

共26课时 | 5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号