JavaScript计算对象数组指定属性平均值遇NaN问题的排查与解决

导致NaN的核心原因 #

1. 构造函数使用与数据存储错误
   你定义的Avenger构造函数设计为接收多个独立参数，但调用时传入的是单个对象，同时你往avengers数组中push的是arguments对象（类数组），而非实际的复仇者数据对象。这导致avengers里的每个元素都是仅包含一个对象的类数组，后续无法正确读取markAv属性。

2. map方法取值错误
   avengers.map(markAv => avengers.markAv)这行代码里，你错误地尝试访问整个avengers数组的markAv属性（数组本身没有这个属性，返回undefined），而非当前迭代元素的markAv。最终average数组全是undefined，计算总和时自然得到NaN。

3. reduce方法缺少初始值
   arr.reduce(reducer)没有设置初始累加值，当数组元素为undefined时，第一次累加就会出现undefined + undefined = NaN，直接导致最终结果异常。

修正后的完整代码 #

方式一：调整构造函数适配传参方式 #

const avengers = [];

// 调整构造函数，接收单个对象参数
function Avenger(avengerData) {
    this.fullName = avengerData.fullName;
    this.classRoom = avengerData.classRoom;
    this.city = avengerData.city;
    this.job = avengerData.job;
    this.studies = avengerData.studies;
    this.markAv = avengerData.markAv;
    avengers.push(this); // 将当前实例存入数组
}

// 调用构造函数时必须用new关键字
new Avenger({
    fullName: "Hulk Paul", 
    classRoom: "V", 
    city: "Miami", 
    job: "Cientist", 
    studies: "Harvard", 
    markAv: 8
})

new Avenger({
    fullName: "Tony Stark", 
    classRoom: "XI", 
    city: "NYC", 
    job: "Ingeneer", 
    studies: "MIT", 
    markAv: 10
})

new Avenger({
    fullName: "Diana Princess", 
    classRoom: "III", 
    city: "NYC", 
    job: "Warrior", 
    studies: "Atenas", 
    markAv: 11
})

// 修正平均值计算逻辑
const getAverage = arr => {
    const reducer = (total, currentValue) => total + currentValue;
    const sum = arr.reduce(reducer, 0); // 添加初始值0
    return sum / arr.length;
}
  
// map时访问当前元素的markAv属性
const average = avengers.map(item => item.markAv);
  
console.log(getAverage(average)); // 输出9.666666666666666

方式二：保持原构造函数参数设计，调整调用方式 #

如果想保留原构造函数的多参数设计，可修改调用方式：

const avengers = [];

function Avenger(fullName, classRoom, city, job, studies, markAv) {
    this.fullName =  fullName;
    this.classRoom = classRoom;
    this.city = city;
    this.job = job;
    this.studies = studies;
    this.markAv = markAv;
    avengers.push(this);
}

// 用new调用，传入独立参数
new Avenger("Hulk Paul", "V", "Miami", "Cientist", "Harvard", 8);
new Avenger("Tony Stark", "XI", "NYC", "Ingeneer", "MIT", 10);
new Avenger("Diana Princess", "III", "NYC", "Warrior", "Atenas", 11);

// 平均值计算逻辑同上
const getAverage = arr => {
    const reducer = (total, currentValue) => total + currentValue;
    const sum = arr.reduce(reducer, 0);
    return sum / arr.length;
}
  
const average = avengers.map(item => item.markAv);
  
console.log(getAverage(average)); // 输出9.666666666666666

内容的提问来源于stack exchange，提问作者devvvvv