对象属性的函数返回 NaN

Question

我无法理解以下示例中的 JS 逻辑。我创建了一个带有属性“票据”的对象“x”，它是一个数组。在同一个对象中，我添加了一个方法“tipCalc”，它为 x 创建了另外两个属性。第一个属性是数组“tips”。在“tips”中，“bills”的每个元素都乘以 0.2、0.15 或 0.1；第二个属性是数组“成本”。在“costs”中，“bills”的每个元素都被添加到“tips”的每个元素中。 然后当我将对象打印到控制台时，数组“tips”和“costs”都有元素。但是，当我尝试在函数 averageCalc 中计算数组“tips”中元素的平均值并将“x.tips”作为参数传递时，该函数返回 NaN。谁能向我解释一下，为什么应该返回平均值的函数返回 NaN 呢？提前致谢！

var x = {
    bills: [124, 48, 268, 180, 42],
    tipCalc: function() {
        this.tips = [];
        this.costs = [];
        for (var i = 0; i < this.bills.length; i++) {
            if (this.bills[i] < 50) {
                this.tips[i] = this.bills[i] * 0.2;
            } else if (this.bills[i] > 50 && this.bills[i] < 200) {
                this.tips[i] = this.bills[i] * 0.15;
            } else {
                this.tips[i] = this.bills[i] * 0.1;
            }
            this.costs[i] = this.bills[i] + this.tips[i]
        }
    }
}


x.tipCalc();

function averageCalc(arr) {
    var sum = "";
    var average = "";
    for (i = 0; i < arr.length; i++) {
        sum = sum + arr[i];
        average = sum / arr.length;
    }
    return average
}


var j = averageCalc(x.tips);
console.log(j);

Answer 1

在我看来，问题出在averageCalc 函数中。您将 sum 和 average 都初始化为空字符串。这意味着后续的加法是在数字和字符串之间 - 在这种情况下，JS 总是将数字强制转换为字符串。一方面，这意味着总和将是错误的（因为它将通过将数字连接为字符串来计算）。但更重要的是，当你将这个字符串除以另一个字符串时，JS 不知道如何处理，但知道它无法处理将字符串除以数字，所以它返回NaN。这就是为什么你会得到你所做的结果。

所以，用0 初始化sum 和average，你应该没问题。 （虽然根本不需要初始化 average，但在将数组相加之前，您不需要解决这个问题。）