forEach 不是 JavaScript 数组的函数错误

forEach is not a function error with JavaScript array

提问by alexchenco

I'm trying to make a simple loop:

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

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

But I get the following error:

但我收到以下错误：

VM384:53 Uncaught TypeError: parent.children.forEach is not a function

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

Even though parent.childrenlogs:

即使parent.children日志：

What could be the problem?

可能是什么问题呢？

Note: Here's a JSFiddle.

注意：这是一个JSFiddle。

采纳答案by Dmitri Pavlutin

First option: invoke forEach indirectly

第一个选项：间接调用 forEach

The parent.childrenis an Array like object. Use the following solution:

的parent.children是像对象的数组。使用以下解决方案：

const parent = this.el.parentElement;

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

The parent.childrenis NodeListtype, which is an Array like object because:

的parent.childrenISNodeList类型，就像对象，因为数组：

• It contains the lengthproperty, which indicates the number of nodes
• Each node is a property value with numeric name, starting from 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

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

See more details in this article.

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

---

---

Second option: use the iterable protocol

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

parent.childrenis an HTMLCollection: which implements the iterable protocol. In an ES2015 environment, you can use the HTMLCollectionwith any construction that accepts iterables.

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

Use HTMLCollectionwith the spread operatator:

使用HTMLCollection与传播operatator：

const parent = this.el.parentElement;

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

Or with the for..ofcycle (which is my preferred option):

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

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}

回答by madox2

parent.childrenis not an array. It is HTMLCollection and it does not have forEachmethod. You can convert it to the array first. For example in ES6:

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

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

or using spread operator:

或使用扩展运算符：

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

回答by Rajaprabhu Aravindasamy

parent.childrenwill return a node listlist, technically a html Collection. That is an array like object, but not an array, so you cannot call array functions over it directly. At this context you can use Array.from()to convert that into a real array,

parent.children将返回一个节点列表列表，技术上是一个html Collection。那是一个类似对象的数组，但不是数组，因此您不能直接调用数组函数。在这种情况下，您可以将Array.from()其转换为真正的数组，

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

回答by Jean

A more naiveversion, at least you're sure that it'll work on all devices, without conversion and ES6 :

一个更天真的版本，至少你确定它可以在所有设备上运行，无需转换和 ES6：

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

https://jsfiddle.net/swb12kqn/5/

https://jsfiddle.net/swb12kqn/5/

回答by Dmitriy

parent.childrenis a HTMLCollectionwhich is array-like object. First, you have to convert it to a real Arrayto use Array.prototypemethods.

parent.children是一个HTMLCollection类似数组的对象。首先，您必须将其转换为 realArray才能使用Array.prototype方法。

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

回答by Ammar Hasan

That's because parent.childrenis a NodeList, and it doesn't support the .forEachmethod (as NodeList is an array like structure but not an array), so try to call it by first converting it to array using

那是因为parent.children是一个NodeList，它不支持该.forEach方法（因为 NodeList 是一个类似结构的数组，而不是一个数组），所以尝试通过首先使用将其转换为数组来调用它

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

回答by Armfoot

There is no need for the forEach, you can iterate using only the from's second parameter, like so:

有没有必要的forEach，你可以遍历仅使用from的第二个参数，如下所示：

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

回答by Elharony

If you are trying to loop over a NodeListlike this:

如果你试图循环NodeList这样的：

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

I highly recommend loop it this way:

我强烈建议以这种方式循环：

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

Personally, I've tried several ways but most of them didn't work as I wanted to loop over a NodeList, but this one works like a charm, give it a try!

就我个人而言，我已经尝试了几种方法，但大多数方法都不起作用，因为我想循环 a NodeList，但是这个方法就像一个魅力，试一试！

The NodeListisn't an Array, but we treat it as an Array, using Array.So, you need to know that it is not supported in older browsers!

这NodeList不是一个数组，但是我们把它当成一个数组，使用Array.所以，你要知道旧浏览器不支持它！

Need more information about NodeList? Please read its documentation on MDN.

需要更多信息NodeList？请阅读它关于 MDN 的文档。

回答by Armfoot

Since you are using features of ES6 (arrow functions), you may also simply use a for looplike this:

由于您使用的是 ES6 的特性（箭头函数），您也可以简单地使用这样的for 循环：

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

回答by Abdelsalam Megahed

You can check if you typed forEachcorrectly, if you typed foreachlike in other programming languages it won't work.

您可以检查是否正确键入了forEach，如果您像在其他编程语言中一样键入foreach，它将不起作用。