Question

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

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

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

Answer 1

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

Answer 2

您可以使用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);
});

目前仅限于最前沿的浏览器，但如果您是using a polyfill service，则可以全面访问此功能。

如果您使用an ES6 transpiler，则甚至可以使用for..of循环：

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

Answer 3

使用ES6，你可以做到：

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

Answer 4

为何转换？ - 直接在元素集合上使用Array的call函数;）

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

假设 $ 是 querySelectorAll 的别名，当然

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

Answer 5

是否必须forEach？您只需使用for循环迭代列表：

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

Answer 6

要在javascript中对列表进行操作，例如使用forEach（），NodeList必须转换为数组。

这不一定是真的。您可以将数组中的.forEach（）添加到 NodeList ，它可以正常工作：

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

您现在可以运行：

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

像Arrays一样迭代NodeLists。

这比任何地方的.call（）产生更短更简洁的代码。

Answer 7

ES6允许像var nodeArray = Array.from(nodeList)这样的酷炫方式，但我最喜欢的方式是新的传播操作符。

var nodeArray = Array(...nodeList);

Answer 8

我使用以下内容是因为我认为这是最容易阅读的内容：

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Answer 9

嗯，这也对我有用：

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

上调用任何数组方法

Answer 10

这在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);

Answer 11

假设 elems 是nodeList：

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

然后它可以变成一个数组，如下所示：

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

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

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

11 个答案: