forEach 不是 JavaScript 数组的函数错误

Question

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

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

但我收到以下错误：

VM384:53 Uncaught TypeError: parent.children.forEach 不是函数

即使parent.children 记录：

可能是什么问题？

注意：这是JSFiddle。

Answer 1

第一个选项：间接调用 forEach

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

const parent = this.el.parentElement;

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

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

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

在this article查看更多详情。

---

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

parent.children 是一个HTMLCollection: 它实现了iterable protocol。在 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);
}

Answer 2

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

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

或使用扩展运算符：

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

不需要forEach，您可以只使用from的第二个参数进行迭代，如下所示：

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

Answer 7

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

Answer 8

如果您尝试像这样循环 NodeList：

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

我强烈推荐这样循环：

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

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

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

需要有关NodeList 的更多信息？请阅读其documentation on MDN。

Answer 9

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

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

Answer 10

由于您使用的是 ES6 (arrow functions) 的功能，您也可以像这样简单地使用 for loop：

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

Answer 11

您可以使用childNodes 代替children，考虑到浏览器兼容性问题，childNodes 也更可靠，更多信息here：

parent.childNodes.forEach(function (child) {
    console.log(child)
});

或使用扩展运算符：

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

Answer 12

使用 JSON.parse()

str_json = JSON.parse(array); str_json.forEach( function(item, i) { console.log(child) }