迭代NodeList

Question

我正在寻找一种未来的证明方法来迭代一个NodeList (即从element.querySelectorAll(selector))，以及跨浏览器兼容。以前我一直在使用ES6扩展功能，但是IE不支持传播，所以我用了一个垫片来代替它。我觉得这有点过分，效率很低。然后我遇到了黑客Array.prototype.forEach.call。很管用，但在我看来很难闻。

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

我倾向于向后兼容和干净的嗅探代码，但如果您的答案也适用于下面的任何其他标准，这将是非常感谢的。

1. Readability
2. Future Proofing
3. Speed

我看过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填充

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

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