遍历 NodeList

Question

我正在寻找一种面向未来的方式来遍历 NodeList（即来自element.querySelectorAll(selector)）以及跨浏览器兼容。以前我一直在使用 ES6 的传播功能，但是 IE 不支持传播，所以我使用了一个 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 => {})