forEach不是JavaScript数组的函数错误

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

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

但我得到以下错误:

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

即使父母。孩子的日志:

有什么问题吗?

注:这是一个JSFiddle。

当前回答

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

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

其他回答

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

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

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

使用JSON.parse ()

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

第一个选项:间接调用forEach

父。children是一个类似数组的对象。请使用以下解决方案:

const parent = this.el.parentElement;

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

父。children是NodeList类型，这是一个类似数组的对象，因为:

它包含length属性，该属性表示节点的数量每个节点都是一个具有数字名称的属性值，从0开始:{0:NodeObject, 1: NodeObject，长度:2，…}

在本文中查看更多细节。

第二个选择:使用可迭代协议

的父母。children是一个HTMLCollection:它实现了可迭代协议。在ES2015环境中，你可以将HTMLCollection与任何接受可迭代对象的结构一起使用。

使用HTMLCollection和扩展操作符:

const parent = this.el.parentElement;

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

或者使用循环的for..(这是我的首选):

const parent = this.el.parentElement;

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

一个更简单的版本，至少你确定它可以在所有设备上工作，不需要转换和ES6:

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

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

推荐文章