遍历NodeList

Question

我正在寻找一种面向未来的方法来迭代 NodeList（即来自

element.querySelectorAll(selector)

）以及跨浏览器兼容。之前我一直在使用 ES6 Spread 功能，但是 IE 不支持 spread，所以我使用了 shim。我觉得这有点矫枉过正而且效率低下。然后我遇到了黑客

Array.prototype.forEach.call

。它有效，但对我来说看起来很臭。

迭代 NodeList 的最佳方法是什么？

我偏向于向后兼容性和干净的代码，但如果您的答案也适用于以下任何其他标准，我们将不胜感激。

1. 可读性
2. 面向未来
3. 速度

我查看了 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);
});

Answer 1

我建议使用 MDN 的

Array.from

polyfill

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill

Array.from(nodeList).forEach(node => {})

Answer 2

以下内容对我来说很好：

[].map.call(nodeList, item => {})