forEach 不是 JavaScript 数组的函数错误第一个选项：间接调用 forEach第二个选项：使用可迭代协议

javascript ecmascript-6 vue.js

2022-08-30 00:53:47

我试图做一个简单的循环：

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

但是我得到以下错误：

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

即使日志：parent.children

可能是什么问题？

注意：这是一个JSFiddle。

答案 1

第一个选项：间接调用 forEach

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

const parent = this.el.parentElement;

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

is type，它是一个类似数组的对象，因为：parent.childrenNodeList

请参阅本文中的更多详细信息。

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

与传播操作器一起使用：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);
}

答案 2

parent.children不是数组。它是HTMLCollection，它没有方法。您可以先将其转换为数组。例如，在 ES6 中：forEach

Array.from(parent.children).forEach(child => {
    console.log(child)
});

或使用点差运算符：

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