如何解决JS计算器启动时numbers.forEach不是函数的报错问题

报错成因 #

numbers.forEach is not a function 报错的核心逻辑是：forEach是仅数组类型支持的遍历方法，你代码中赋值给numbers的变量不是数组，因此无法调用该方法。
在你当前的计算器开发场景下，该问题基本都由DOM节点获取方式导致：

• 如果你使用document.getElementsByClassName('number')获取数字按钮，该API返回的是HTMLCollection类数组对象，本身没有内置forEach方法
• 如果你使用document.querySelectorAll('.number')获取，部分旧版本浏览器下返回的NodeList也未实现forEach方法

修复方案 #

你可以任选以下任意一种方案修复：

方案1：将类数组转为真实数组（兼容性最好） #

获取DOM节点后先做类型转换，再调用forEach：

// 原获取节点代码
const numbers = document.getElementsByClassName('number');
// 转数组，以下两种写法二选一
const numbersArr = [...numbers]; // ES6扩展运算符写法
// const numbersArr = Array.from(numbers); // Array.from写法

// 用转换后的数组调用forEach
numbersArr.forEach(numBtn => {
  // 你原来的遍历逻辑写在这里即可
})

方案2：用传统for循环替代forEach #

不需要修改变量类型，直接遍历类数组对象：

const numbers = document.getElementsByClassName('number');
for(let i = 0; i < numbers.length; i++) {
  const numBtn = numbers[i];
  // 你原来的forEach回调逻辑写在这里即可
}

方案3：直接使用querySelectorAll（仅适配现代浏览器） #

如果不需要兼容IE等老旧浏览器，直接用querySelectorAll获取节点，现代浏览器返回的NodeList已内置forEach方法：

const numbers = document.querySelectorAll('.number');
// 可以直接调用forEach
numbers.forEach(numBtn => {
  // 你的遍历逻辑
})

调试小技巧 #

你可以在调用forEach前添加一行console.log(Array.isArray(numbers))，如果输出为false即可确认是变量类型问题。

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