登录
首页 >  文章 >  前端

JS用averageBy计算对象数组属性平均值方法

时间：2025-08-08 09:45:32 336浏览 收藏

大家好，今天本人给大家带来文章《JS使用averageBy计算对象数组属性平均值的方法如下：引入lodash库：首先需要在项目中引入lodash库，可以通过npm安装或直接引入CDN。定义对象数组：创建一个包含多个对象的数组，每个对象都有一个要计算平均值的属性。使用averageBy方法：调用lodash的_.averageBy方法，传入对象数组和一个函数，该函数返回要计算平均值的属性值。处理结果：_.averageBy方法会返回一个数值，即对象数组中指定属性的平均值。示例代码：const _ = require('lodash'); const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 } ]; const averageAge = _.averageBy(users, 'age'); console.log(averageAge); // 输出：30在这个示例中，_.averageBy方法计算了users数组中所有对象的age属性的平均值，并将结果存储在averageAge变量中。》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

计算对象数组某属性平均值最常用方法是使用 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。
处理这些“脏数据”的策略通常有两种：
  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用averageBy计算对象数组属性平均值方法》文章吧，也可关注golang学习网公众号了解相关技术文章。
      
        

                    

          

         
     

      

        
相关阅读

        更多>
      

      
    

         
      

          

              
最新阅读

              更多>
          

          
      

    
    

      

        
课程推荐

        更多>
      

      
    
                
  • 
          
            前端进阶之JavaScript设计模式
                      
          
    
            
    
              前端进阶之JavaScript设计模式            
    
            
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    
            
    
              立即学习
              542次学习
            
    
          
    
        
    • 
                
  • 
          
            GO语言核心编程课程
                      
          
    
            
    
              GO语言核心编程课程            
    
            
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    
            
    
              立即学习
              511次学习
            
    
          
    
        
    • 
                
  • 
          
            简单聊聊mysql8与网络通信
                      
          
    
            
    
              简单聊聊mysql8与网络通信            
    
            
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    
            
    
              立即学习
              498次学习
            
    
          
    
        
    • 
                
  • 
          
            JavaScript正则表达式基础与实战
                      
          
    
            
    
              JavaScript正则表达式基础与实战            
    
            
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    
            
    
              立即学习
              487次学习
            
    
          
    
        
    • 
                
  • 
          
            从零制作响应式网站—Grid布局
                      
          
    
            
    
              从零制作响应式网站—Grid布局            
    
            
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    
            
    
              立即学习
              484次学习
            
    
          
    
        
    •