修复JavaScript中forEach不是一个函数的错误的方法

在本教程中，我们将学习如何在JavaScript中修复forEach不是一个函数的错误。

当我们对一个不是数组、地图或集合类型的值使用Array.forEach() ，我们会在控制台中得到以下错误。

例子。

const elements = document.getElementsByClassName("container");
console.log(elements); // [div.container, div.container, div.container]

elements.forEach(element => {

});

// Uncaught parent.forEach is not a function

在上面的例子中，我们在一个看起来像数组的HTML集合上使用forEach() 方法，但它不是一个数组。

为了解决这个错误，通过使用spread操作符将HTML集合转换为数组，并对其运行forEach()方法。

下面是一个例子。

const elements = document.getElementsByClassName("container");

[...elements].forEach(element => {
   element.style.color = "green";
});

或者我们可以在调用forEach函数之前检查给定值是否是一个类型的数组.这样就可以避免运行时的错误。

var arr = [1, 2, 3];

if(Array.isArray(arr)){
    arr.forEach(el => {
       console.log(el);
    });
}