我正在尝试制作一个简单的循环:
const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
console.log(child)
})
但我收到以下错误:
VM384:53 未捕获的类型错误:parent.children.forEach 不是函数
即使 parent.children
记录:
https://i.stack.imgur.com/cjUUW.png
可能是什么问题呢?
注意:这是一个 JSFiddle。
第一种选择:间接调用 forEach
parent.children
是一个类似数组的对象。使用以下解决方案:
const parent = this.el.parentElement;
Array.prototype.forEach.call(parent.children, child => {
console.log(child)
});
parent.children
是 NodeList
类型,它是一个类似数组的对象,因为:
它包含长度属性,表示节点的数量
每个节点都是一个具有数字名称的属性值,从 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);
}
parent.children
不是数组。它是 HTMLCollection,它没有 forEach
方法。您可以先将其转换为数组。例如在 ES6 中:
Array.from(parent.children).forEach(child => {
console.log(child)
});
或使用扩展运算符:
[...parent.children].forEach(function (child) {
console.log(child)
});
Array.from(selected_rows).forEach(item => console.log(item));
并且它有效
一个更天真的版本,至少你确定它可以在所有设备上工作,无需转换和 ES6 :
const children = parent.children;
for (var i = 0; i < children.length; i++){
console.log(children[i]);
}
https://jsfiddle.net/swb12kqn/5/
parent.children
将返回一个 节点列表 列表,技术上是一个 html Collection。那是一个类似对象的数组,但不是数组,所以你不能直接在它上面调用数组函数。在这种情况下,您可以使用 Array.from()
将其转换为真正的数组,
Array.from(parent.children).forEach(child => {
console.log(child)
})
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,如果您像在其他编程语言中一样键入了 foreach,它将无法正常工作。
不需要 forEach
,您可以只使用 from
的第二个参数进行迭代,如下所示:
让 nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}] Array.from(nodeList, child => { 控制台.log(child) });
Array.from
将第一个参数中给出的对象转换为数组。结果与 madox2's answer 中的结果相同,无需额外的 forEach
循环(Array.from
MDN 文档)。
如果您尝试像这样循环 NodeList
:
const allParagraphs = document.querySelectorAll("p");
我强烈推荐这样循环:
Array.prototype.forEach.call(allParagraphs , function(el) {
// Write your code here
})
就个人而言,我尝试了几种方法,但大多数方法都不起作用,因为我想循环 NodeList
,但这个方法就像一个魅力,试一试!
NodeList
不是一个数组,但我们将其视为一个数组,使用 Array.
所以,您需要知道它在旧浏览器中不受支持!
需要有关 NodeList
的更多信息?请阅读其documentation on MDN。
那是因为 parent.children
是一个 NodeList,并且它不支持 .forEach
方法(因为 NodeList 是一个类似数组的结构但不是数组),所以尝试通过首先将其转换为数组来调用它
var children = [].slice.call(parent.children);
children.forEach(yourFunc);
由于您使用的是 ES6 (arrow functions) 的功能,因此您也可以像这样简单地使用 for loop:
for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) { console.log(child) }
使用 JSON.parse()
str_json = JSON.parse(array);
str_json.forEach(function (item, index) {
console.log(item);
});
您可以使用 childNodes
代替 children
,考虑到浏览器兼容性问题,childNodes
也更可靠,更多信息 here:
parent.childNodes.forEach(function (child) {
console.log(child)
});
或使用扩展运算符:
[...parent.children].forEach(function (child) {
console.log(child)
});
不定期副业成功案例分享