在Javascript中，将NodeList转换为数组的最佳方法是什么

DOM方法document.querySelectorAll()（以及其他一些方法）返回NodeList。

要对列表进行操作（例如使用）forEach()，NodeList必须首先将转换为Array。

将转换为的最佳方法NodeList是Array什么？

使用ES6，您可以简单地执行以下操作：

const spanList = [...document.querySelectorAll("span")];

使用ES6，您可以使用Array.from(myNodeList)。然后使用您喜欢的数组方法。

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

使用ES6填充程序也可以在较旧的浏览器中实现此功能。

如果您使用的是Transpiler（例如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);
});

您可以使用原型中的slice方法将其转换为数组Array：

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

此外，如果您需要的只是forEach，则可以从原型中调用它Array，而无需先将其强制转换为数组：

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);
});

当前仅在最先进的浏览器中使用，但是如果您使用的是polyfill服务，则可以全面使用此功能。

如果您使用的是ES6转译器，则甚至可以使用for..of循环：

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

为什么要转换？-仅call在元素集合上直接使用Array的功能;）

[].forEach.call( $('a'), function( v, i) {
    // do something
});

当然，假设$是您的querySelectorAll别名

编辑：ES6允许使用更短的语法[...$('a')]（仅适用于Firefox，截至2014年5月）

一定要forEach吗？您可以简单地使用for循环遍历列表：

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

2020更新：nodeList.forEach（）现在是官方标准，并且在所有当前浏览器中均受支持。

较旧的浏览器可以使用下面的polyfill。

要对JavaScript中的列表进行操作（例如使用forEach（）），必须将NodeList转换为Array。

这不是真的。.forEach()在当前的浏览器中工作。如果缺少它，则可以将.forEach（）从Array添加到NodeList，它可以正常工作：

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

您现在可以运行：

myNodeList.forEach(function(node){...})

像数组一样遍历NodeList。

这比到处的.call（）生成的代码更短，更简洁。

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
});

好吧，这对我也适用：

const elements = Object.values( document.querySelector(your selector here) )

Object.values()返回Array给定对象的值。NodeList是对象，就像JS中的一切一样。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/values

但是它与IE不兼容，所以我认为这Array.prototype.*array_method*.call(yourNodeList)是最好的选择。有了这个，你可以调用你的任何数组方法NodeList

假设elems是一个nodeList：

var elems = document.querySelectorAll('select option:checked');

然后可以将其转换为数组，如下所示：

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

参考：https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example : _using_map_generically_querySelectorAll