forEach不是JavaScript数组的函数错误

2020/11/06 19:03 · javascript ·  · 0评论

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

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

但是我收到以下错误:

VM384:53未捕获的TypeError:parent.children.forEach不是一个函数

即使parent.children日志:

在此处输入图片说明

可能是什么问题呢?

注意:这是一个JSFiddle

第一种选择:间接调用forEach

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

const parent = this.el.parentElement;

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

parent.childrenISNodeList类型,就像对象,因为数组:

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

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


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

parent.children是一个HTMLCollection:实现可迭代协议在ES2015环境中,您可以将_HTMLCollection和任何接受可迭代的构造一起使用

使用HTMLCollection与传播operatator:

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);
}

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

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

或使用传播运算符:

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

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

Array.from(parent.children).forEach(child => {
  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/

parent.children是一个HTMLCollection类似于数组的对象。首先,您必须将其转换为实际Array使用Array.prototype方法。

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

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

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

那是因为它parent.children是一个NodeList,并且它不支持该.forEach方法(因为NodeList是一个类似于结构的数组,但不是数组),因此请尝试通过先使用将其转换为array来调用它

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

如果您试图NodeList像这样循环播放

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

我强烈建议这样循环:

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

就个人而言,我尝试了几种方法,但是大多数方法都无法正常工作,因为我想循环一个NodeList,但是这种方法就像一种魅力,请尝试一下!

NodeList不是一个数组,但我们把它当作一个阵列,使用Array.所以,你需要知道它是不是在旧的浏览器的支持!

需要有关的更多信息NodeList请阅读其有关MDN的文档

由于您正在使用ES6的功能箭头功能),因此您也可以简单地使用for循环,如下所示:

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

您可以检查是否正确键入了forEach,是否像在其他编程语言中一样键入了foreach则无法使用。

考虑到浏览器兼容性问题,您可以使用childNodes代替childrenchildNodes也更加可靠,有关更多信息,请参见

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

或使用传播运算符:

[...parent.children].forEach(function (child) {
    console.log(child)
});
本文地址:http://javascript.askforanswer.com/foreachbushijavascriptshuzudehanshucuowu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!