JavaScript账单小费计算练习：为何最后一项结果为NaN？

我正在进行一项账单、小费及总金额计算的练习，编写了如下JavaScript代码：

const calcTip = function (bill) {
  return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
};

const billsArray = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
const tipsArray = [];
const totalsArray = [];

for (let i = 0; i <= billsArray.length; i++) {
  const tip = calcTip(billsArray[i]);
  tipsArray.push(tip);
  totalsArray.push(tip + billsArray[i]);
}

console.log(billsArray, tipsArray, totalsArray);

但浏览器控制台显示结果的最后一项为NaN（非数字），请问这是什么原因？是否需要使用float类型？

问题原因 #

问题出在for循环的终止条件上：i <= billsArray.length。数组索引从0开始，billsArray的长度是10，有效索引范围是0到9。当i等于10时，billsArray[10]返回undefined，将undefined传入calcTip函数后，和数字进行比较、计算时会被转换为NaN，最终导致最后一项结果变成非数字。

解决方法 #

不需要使用float类型，JavaScript只有一种数值类型number，同时包含整数和浮点数，无需额外声明类型。只需要把循环条件修改为i < billsArray.length，让循环只遍历数组的有效索引：

const calcTip = function (bill) {
  return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
};

const billsArray = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
const tipsArray = [];
const totalsArray = [];

// 修改循环条件为 i < billsArray.length
for (let i = 0; i < billsArray.length; i++) {
  const tip = calcTip(billsArray[i]);
  tipsArray.push(tip);
  totalsArray.push(tip + billsArray[i]);
}

console.log(billsArray, tipsArray, totalsArray);

修改后循环会遍历数组中所有10个元素，不会出现访问不存在的索引导致的NaN问题。

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