我试着做一个简单的循环:
const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
console.log(child)
})
但我得到以下错误:
Uncaught TypeError: parent.children.forEach不是一个函数
即使父母。孩子的日志:
有什么问题吗?
注:这是一个JSFiddle。
我试着做一个简单的循环:
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)
})
的父母。Children不是数组。它是HTMLCollection,它没有forEach方法。您可以先将其转换为数组。例如在ES6中:
Array.from(parent.children).forEach(child => {
console.log(child)
});
或者使用展开运算符:
[...parent.children].forEach(function (child) {
console.log(child)
});
的父母。children将返回一个节点列表列表,技术上是一个html集合。这是一个类似于object的数组,但不是数组,所以你不能直接在它上面调用数组函数。在这种情况下,你可以使用array .from()将其转换为一个真正的数组,
Array.from(parent.children).forEach(child => {
console.log(child)
})
那是因为父母。children是一个NodeList,并且它不支持.forEach方法(因为NodeList是一个类似数组的结构,但不是数组),因此尝试先通过using将其转换为数组来调用它
var children = [].slice.call(parent.children);
children.forEach(yourFunc);
第一个选项:间接调用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/
不需要forEach,你可以只使用from的第二个参数进行迭代,如下所示:
让节点列表=[{0:[{“a”:1、“b”:2},{' c ': 3}]}, {1: []}] Array.from(nodeList, child => { console.log(孩子) });
因为你正在使用ES6的特性(箭头函数),你也可以简单地使用这样的for循环:
(让孩子({0:[{“a”:1、“b”:2},{' c ': 3}]}, {1: []})) { console.log(孩子) }
如果你试图像这样循环一个NodeList:
const allParagraphs = document.querySelectorAll("p");
我强烈推荐这样循环:
Array.prototype.forEach.call(allParagraphs , function(el) {
// Write your code here
})
就我个人而言,我已经尝试了几种方法,但大多数都不工作,因为我想循环一个节点列表,但这一个工作起来像一个魅力,给它一个尝试!
NodeList不是数组,但我们使用Array将其视为数组。所以,您需要知道旧的浏览器不支持它!
需要更多关于NodeList的信息?请在MDN上阅读其文档。
你可以使用childNodes而不是child,考虑到浏览器兼容性问题,childNodes也更可靠,更多信息在这里:
parent.childNodes.forEach(function (child) {
console.log(child)
});
或者使用展开运算符:
[...parent.children].forEach(function (child) {
console.log(child)
});
使用JSON.parse ()
str_json = JSON.parse(array);
str_json.forEach(function (item, index) {
console.log(item);
});
对于对象,试试这个:
Object.keys(yourObj).forEach(key => {
console.log(key, yourObj[key]);
});