it-swarm.cn

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

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

要在列表上操作,例如使用forEach(),必须首先将NodeList转换为Array

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

66
cc young

使用ES6,您可以简单地执行:

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

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

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

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

目前这仅适用于流行的Edge浏览器,但如果你是 使用polyfill服务 ,您将可以全面访问此功能。


如果您正在使用 ES6转换程序 ,您甚至可以使用 for..of 循环:

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

为何转换? - 直接在元素集合上的call函数;)

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

假设 $ 是你的 querySelectorAll的别名 ,当然


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

21
c69

它必须是forEach吗?您可以简单地使用for循环迭代列表:

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

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

这不一定是真的。你可以从 Array NodeList 添加.forEach(),它可以正常工作:

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

你现在可以运行:

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

像Arrays一样迭代NodeLists。

这会产生比.call()更短更干净的代码。

6
mikemaccana

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

var nodeArray = Array(...nodeList);
2
Redu

我使用以下内容是因为我认为它最容易阅读:

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

1
braed

这在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);
0
Amr.Ayoub