TypeError: portfolioItems.forEach is not a function报错解决

forEach 是数组、NodeList 等可迭代对象的内置遍历方法，这个错误的核心触发原因是：代码中执行遍历的 portfolioItems 不是支持forEach方法的可迭代结构。
常见的错误场景：

• DOM获取逻辑写错：用document.querySelector()取元素，该方法仅返回匹配到的第一个DOM元素，单个Element对象不存在forEach方法
• 变量来自接口返回时，portfolioItems实际是普通对象、null、undefined等非数组结构
• 用getElementsByClassName/getElementsByTagName取到HTMLCollection集合，部分运行环境下这类集合没有内置forEach方法

运行时抛出的错误：

Uncaught TypeError: portfolioItems.forEach is not a function

触发报错的代码片段：

const target = event.target.getAttribute("data-target"); 
portfolioItems.forEach((item) =>{
    console.log(item.getAttribute("data-category"));
})

报错场景参考：

根据portfolioItems的实际来源选择对应处理方式：

1. 如果变量是用来存储页面DOM元素集合，把单元素选择接口替换为多元素选择接口：

   // 错误写法：返回单个DOM元素，无forEach方法
   // const portfolioItems = document.querySelector('.portfolio-item')
   // 正确写法：返回NodeList集合，原生支持forEach遍历
   const portfolioItems = document.querySelectorAll('.portfolio-item')
   

2. 如果取到的是HTMLCollection类数组，或者无法确定变量是否为可迭代结构，先转为纯数组再执行遍历：

   // 两种转数组方式任选其一即可
   const itemList = Array.from(portfolioItems)
   // const itemList = [...portfolioItems]
   itemList.forEach((item) => {
       console.log(item.getAttribute("data-category"))
   })
   

3. 如果变量是接口返回的业务数据，先做数组类型校验再遍历，注意普通JS对象不要调用DOM专属的getAttribute方法，直接读取对象属性即可：

   if(Array.isArray(portfolioItems)){
       portfolioItems.forEach((item) => {
           console.log(item.category)
       })
   }
   

内容的提问来源于stack exchange，提问作者MRM IT Network