forEach不是JavaScript数组的函数错误

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

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

但我得到了以下错误：

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

即使

parent.children

记录：

有什么问题吗

---

注意：这里有一个。

parent.children

是一个类似数组的对象。首先，要使用

Array.prototype

方法，必须将其转换为真实的

Array

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

---

parent.children

不是数组。它是HTMLCollection，没有

forEach

方法。您可以先将其转换为数组。例如，在ES6中：

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

或使用扩展运算符：

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

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

---

parent.children

将返回一个节点列表，从技术上讲是一个。这是一个类似数组的对象，但不是数组，因此不能直接在其上调用数组函数。在此上下文中，您可以使用

Array.from（）

将其转换为实际数组

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

---

这是因为

parent.children

是一个，并且它不支持

.forEach

方法（因为NodeList是一个类似数组的结构，但不是数组），所以尝试通过使用

var children = [].slice.call(parent.children);
children.forEach(yourFunc);

第一个选项：间接调用forEach 父.children是一个类似数组的对象。使用以下解决方案：

const parent=this.el.parentElement；
Array.prototype.forEach.call（parent.children，child=>{
console.log（子级）
});

parent.children

是

NodeList

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

• 它包含

  length

  属性，该属性指示节点数
• 每个节点都是一个具有数字名称的属性值，从0:

  {0:NodeObject，1:NodeObject，长度：2，…}

请参阅中的更多详细信息

---

第二种选择：使用iterable协议

---

parent.children

是一个

HTMLCollection

：它实现了。在ES2015环境中，您可以将

HTMLCollection

用于任何接受iterables的构造

对排列运算符使用

HTMLCollection

：

const parent=this.el.parentElement；
[…parent.children].forEach（child=>{
console.log（子级）；
});

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

const parent=this.el.parentElement；
for（父项的常量子项。子项）{
console.log（子级）；
}

一个更简单的版本，至少您可以确定它可以在所有设备上工作，而无需转换和ES6：

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

const children=parent.children；
对于（变量i=0；i

---

无需使用

forEach

，您可以仅使用的第二个参数进行迭代，如下所示：

let nodeList=[{0:[{'a'：1，'b'：2}，{'c'：3}}，{1:[]}]
Array.from（节点列表，子节点=>{
console.log（子级）
});因为您使用的是ES6（）的功能，所以您也可以简单地使用如下的：

const allParagraphs = document.querySelectorAll("p");


for（让[{0:[{'a'：1，'b'：2}，{'c'：3}]}，{1:[]}]的子级）{
console.log（子级）
}
如果您试图在
节点列表上循环，如下所示：

const allParagraphs = document.querySelectorAll("p");

我强烈建议这样循环：

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

就我个人而言，我已经尝试了几种方法，但大多数方法都不起作用，因为我想在
节点列表上循环，但这一种效果很好，试试吧

NodeList
不是数组，但我们使用
Array将其视为数组。
因此，您需要知道，旧浏览器不支持它

需要有关节点列表的更多信息吗？请阅读其。
您可以使用
childNodes
而不是
childNodes
，
childNodes
考虑到浏览器兼容性问题，也更可靠，更多信息：

或使用扩展运算符：

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

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

您可以检查键入的forEach是否正确，如果键入的forEach与其他编程语言一样，它将无法工作。
或不转换它，但在.forEach（）上使用use.call（）？@nnnnnn请看下面我的答案。有很多方法可以将类似数组的对象转换为数组：）这是其中之一it@DmitriyLoskutov您不需要转换它-JavaScript是一种duck类型语言。只要使用这个功能。我更喜欢这个解决方案，而不是搞乱阵列原型。这个答案是OPs问题的正确答案之一。parent.children是一个HTMLCollection，它没有.forEach方法。元素也会出现同样的问题。siblings@Daut是的，因为element.sides返回一个HTMLCollection，而HTMLCollection没有forEach（）方法嘿，你，谷歌搜索者！如果您正在阅读此内容，请仔细检查它是否是带大写字母E的forEach而不是forEach…当我使用您的解决方案时，我没有更多问题，但是匿名函数中的代码没有执行。所以..要使用哪个浏览器，以便parent.children告诉您它是节点列表。在Firefox上，它告诉我这是一个HTMLCollection。如果是节点列表，.forEach（）将不起作用，则parent.children不会返回节点列表，而是返回HTML集合。不一样。如果它是一个节点列表，.forEach将进行升级，因为所有这些新的ES6函数都做了与可用的相同的好事情，但是以一种混乱的方式，就像JSH一样，这是更好的解决方案tbh。它与其他编程语言相近，很少有机会出现奇怪的JS。它很简单，没有什么古怪的东西不，它不是节点列表，它是一个HTML集合不幸的消息是parent.children不是节点列表。from（）不起作用。@Cedric如果您的对象不是节点列表，那么您应该专门提出一个新问题来解决它。在这里，当答案本质上是错误的或有害的，并且正如您从代码片段中看到的，对象的所有元素都被迭代和打印时，使用向下投票，这是