DOM 方法 document.querySelectorAll()（以及其他一些方法）返回 NodeList。
对列表进行操作，例如使用forEach()，必须首先将NodeList 转换为Array。
将NodeList 转换为Array 的最佳方法是什么？
【问题讨论】：
标签： javascript arrays dom
使用 ES6，您可以简单地做到：
const spanList = [...document.querySelectorAll("span")];
【讨论】：
Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
在 ES6 中，您可以使用 Array.from(myNodeList)。然后使用你最喜欢的数组方法。
var myNodeList = document.querySelectorAll('.my-selector');
// ALT 1
Array.from(myNodeList).forEach(function(el) {
console.log(el);
});
使用ES6 shim 也可以在旧版浏览器中使用。
如果您使用的是转译器（例如 Babel），还有另外两种选择：
var myNodeList = document.querySelectorAll('.my-selector');
// ALT 2
for (var el of myNodeList) {
el.classList.add('active'); // or some other action
}
// ALT 3
[...myNodeList].forEach((el) => {
console.log(el);
});
【讨论】：
Array.from(myNodeList)，因为它可以填充。
您可以使用Array 原型中的slice 方法将其转换为数组：
var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);
此外，如果您只需要 forEach，您可以从 Array 原型调用 that，而无需先将其强制转换为数组：
var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
console.log(el);
});
在 ES6 中，您可以使用新的 Array.from 函数将其转换为数组：
Array.from(elList).forEach(function(el) {
console.log(el);
});
目前仅在最前沿的浏览器中提供，但如果您是 using a polyfill service，您将可以全面访问此功能。
如果您使用的是an ES6 transpiler，您甚至可以使用for..of 循环来代替：
for (var element of document.querySelectorAll('.some .elements')) {
// use element here
}
【讨论】：
Array.prototype.forEach 而不是 [].forEach 的原因是因为后者创建了一个新的 Array 对象，这完全没有必要。
[]？我的想法是它会被垃圾收集并且内存影响可以忽略不计，有人可以对此发表评论吗？
为什么要转换？ - 只是 call Array 的函数直接在元素集合上；）
[].forEach.call( $('a'), function( v, i) {
// do something
});
当然，假设 $ 是 querySelectorAll 的别名
编辑：ES6 允许使用更短的语法 [...$('a')]（仅适用于 Firefox，截至 2014 年 5 月）
【讨论】：
$ 是querySelectorAll。
.each()。
function $ ( s ) { return document.querySelectorAll(s); } 这样的别名。
$('a').each(function(i, v) {...});
旧版浏览器可以使用下面的 polyfill。
在javascript中对列表进行操作，例如使用 forEach()，必须将 NodeList 转换为 Array。
那不是真的。 .forEach() 适用于当前浏览器。如果它丢失了，您可以使用 polyfill 将 Array 中的 .forEach() 添加到 NodeList 并且效果很好：
if ( ! NodeList.prototype.forEach ) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
你现在可以运行了：
myNodeList.forEach(function(node){...})
像数组一样迭代 NodeList。
这会产生比任何地方的 .call() 更短、更简洁的代码。
【讨论】：
forEach，我来这里是为了寻找filter
filter 使用相同的技术，但如果您担心未来的标准使用不同的实现，您可能希望给它一个非官方名称NodeList.prototype.dbkFilter 或类似名称。
必须是forEach吗？您可以简单地使用 for 循环来遍历列表：
for (var i = 0; i < elementList.length; i++) {
doSomethingWith(elementlist.item(i));
}
【讨论】：
elementList[i]，而不是elementList.item(i)。
forEach() 的编程风格更好，而且更简洁——ymmv
for (var oElement, i = 0; oElement = aMenuItemsElements; i++ { console.log(oElement); }
for (var i…) 循环，因为 for 循环不会创建自己的范围（就像现在在 C/C++ 中那样）。然后i 搞混了。
嗯，这对我也有用：
const elements = Object.values( document.querySelector(your selector here) )
Object.values() 返回给定对象值的Array。 NodeList 是对象，就像 JS 中的一切一样。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
但它与 IE 不兼容，所以我猜Array.prototype.*array_method*.call(yourNodeList) 是最好的选择。有了这个，你可以在你的 NodeList 上调用任何数组方法
【讨论】：
ES6 允许像var nodeArray = Array.from(nodeList) 这样很酷的方式，但我最喜欢的是新的传播运算符。
var nodeArray = Array(...nodeList);
【讨论】：
这在 ES6 中对我有用
假设你有这样的节点列表
<ul>
<li data-time="5:17">Flexbox video</li>
<li data-time="8:22">Flexbox video</li>
<li data-time="3:24">Redux video</li>
<li data-time="5:17">Flexbox video</li>
<li data-time="7:17">Flexbox video</li>
<li data-time="4:17">Flexbox video</li>
<li data-time="2:17">Redux video</li>
<li data-time="7:17">Flexbox video</li>
<li data-time="9:54">Flexbox video</li>
<li data-time="5:53">Flexbox video</li>
<li data-time="7:32">Flexbox video</li>
<li data-time="2:47">Redux video</li>
<li data-time="9:17">Flexbox video</li>
</ul>
const items = Array.from(document.querySelectorAll('[data-time]'));
console.log(items);
【讨论】：
我使用以下内容是因为我认为它最容易阅读：
const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
// code
});
【讨论】：
TypeScript 版本：
const allDayElements: Element[] = [].slice.call(document.querySelectorAll('span'));
【讨论】：
假设 elems 是一个 nodeList：
var elems = document.querySelectorAll('select option:checked');
那么就可以变成如下的数组了：
var values = [].map.call(elems, function(obj) {
return obj.value;
});
【讨论】：