我正在寻找一种未来证明的方式来迭代NodeList(例如从
element.querySelectorAll(selector)
),同时也要跨浏览器兼容。 以前,我使用了ES6 Spread功能,但是IE不支持扩展,因此我改用了它的shim。 我觉得那有点过度和低效。 然后我发现了hack Array.prototype.forEach.call
。 它能工作,但看起来对我来说有点臭。
迭代NodeList的最佳方法是什么?
我偏爱向后兼容性和代码清晰,但如果您的答案也适用于以下任何其他标准,那将不胜感激。
- 可读性
- 未来证明
- 速度
我查看了JavaScript iterate through NodeList,其中介绍了一些方法。 但是,并没有关注可读性,兼容性等问题。 只关注是否有效。
我遇到的一些方法包括:
const elems = document.querySelectorAll('img');
[].forEach.call(elems, function (o) { console.log(o) });
[...elems].foreach(function (o) { console.log(o) });
for (var i = 0; i < elems.length; i++) {
console.log(elems[i]);
}
for (var i = elems.length - 1; i >= 0; i--) {
console.log(elems[i]);
}
// User-defined
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
forEach(elems, function (index, value) {
console.log(index, value);
});
for
循环,但你也可以选择[].forEach.call
,我认为这是惯用法。