forEach不是JavaScript数组的函数错误

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

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

但我得到以下错误:

Uncaught TypeError: parent.children.forEach不是一个函数

即使父母。孩子的日志:

有什么问题吗?

注:这是一个JSFiddle。

当前回答

你可以使用childNodes而不是child，考虑到浏览器兼容性问题，childNodes也更可靠，更多信息在这里:

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

或者使用展开运算符:

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

其他回答

的父母。children是一个HTMLCollection类数组对象。首先，您必须将其转换为一个真正的数组才能使用Array。原型的方法。

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

的父母。Children不是数组。它是HTMLCollection，它没有forEach方法。您可以先将其转换为数组。例如在ES6中:

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

或者使用展开运算符:

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

因为你正在使用ES6的特性(箭头函数)，你也可以简单地使用这样的for循环:

(让孩子({0:[{“a”:1、“b”:2},{' c ': 3}]}, {1: []})) { console.log(孩子) ｝

的父母。children将返回一个节点列表列表，技术上是一个html集合。这是一个类似于object的数组，但不是数组，所以你不能直接在它上面调用数组函数。在这种情况下，你可以使用array .from()将其转换为一个真正的数组，

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

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

推荐文章