1. 首页
  2. 问题
  3. forEach 不是 JavaScript 数组的函数错误
小编典典

forEach 不是 JavaScript 数组的函数错误

all

我正在尝试制作一个简单的循环：

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

但我收到以下错误：

VM384:53 未捕获的类型错误：parent.children.forEach 不是函数

即使parent.children日志：

在此处输入图像描述

可能是什么问题呢？

注意：这是一个JSFiddle。


阅读 68

收藏
2022-06-13

共1个答案

小编典典

第一种选择：间接调用 forEach

是一个类似parent.children数组的对象。使用以下解决方案：

const parent = this.el.parentElement;

Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

parent.childrenis类型，它是一个类似NodeList数组的对象，因为：

  • 它包含length属性，表示节点的数量
  • 每个节点都是一个具有数字名称的属性值，从 0 开始：{0: NodeObject, 1: NodeObject, length: 2, ...}

在本文中查看更多详细信息。

第二种选择：使用可迭代协议

parent.children是一个HTMLCollection:
它实现了可迭代协议。在 ES2015
环境中，您可以将HTMLCollection与接受迭代的任何构造一起使用。

HTMLCollection与扩展运算符一起使用：

const parent = this.el.parentElement;

[...parent.children].forEach(child => {
  console.log(child);
});

或者使用for..of循环（这是我的首选）：

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}
2022-06-13