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

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

To operate on the list, e.g. using forEach(), the NodeList must first be converted to an Array.

把 NodeList转换成 Array的最佳方法是什么？

71662 次浏览
小开

它必须是 forEach吗? 你可以简单地使用 for循环来遍历列表:

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

You can convert it to an array by using the slice method from the Array prototype:

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

This is currently only in bleeding edge browsers, but if you're using a polyfill service you will have access to this function across the board.

如果使用 ES6传送器，甚至可以使用 for..of循环:

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

为什么转换?-只是数组的 call函数直接对元素收集;) 

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

assuming $ is your alias for 所有, of course

编辑: ES6允许更短的语法 [...$('a')](截至2014年5月，只能在 Firefox 中使用)

小开

假设 榆树是一个节点列表:

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

小开

2020年更新: Foreach ()现在是一个官方标准，并支持所有当前浏览器。

较老的浏览器可以使用下面的填充。

要在 javascript 中对列表进行操作，例如使用 forEvery () ，NodeList 必须转换为 Array。

不是这样的。.forEach()可以在当前浏览器中工作。如果缺少填充物，可以使用填充物添加。forEach ()从 Array到 节点列表运行良好:

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

你现在可以跑了:

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

像数组一样迭代 NodeList。

这比处处使用. call ()产生的代码更短、更清晰。

小开

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

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


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

使用 ES6垫片也可以在较老的浏览器中实现这一点。

如果你使用传送器(例如 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);
});
小开

ES6允许像 var nodeArray = Array.from(nodeList)这样很酷的方式，但我最喜欢的是新的扩展运算符。

var nodeArray = Array(...nodeList);
小开
最佳答案

使用 ES6，你可以简单地做:

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

That worked with me in 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
});
小开

Well, this works for me too:

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上的任何数组方法

小开

打字机版本:

const allDayElements: Element[] = [].slice.call(document.querySelectorAll('span'));

提交答案