В Javascript, что является лучшим способом преобразования NodeList в массив

Метод DOM document.querySelectorAll() (и несколько других) возвращает a NodeList.

Для работы в списке, например. используя forEach(), NodeList необходимо сначала преобразовать в Array.

Какой лучший способ преобразовать NodeList в Array?

Ответы

Ответ 1

С ES6 вы можете просто сделать:

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

Ответ 2

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

Ответ 3

Вы можете преобразовать его в массив с помощью метода 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
}

Ответ 4

Зачем конвертировать? - просто call функция массива непосредственно в коллекции элементов;)

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

Предполагая, что $ является вашим псевдонимом для querySelectorAll, конечно

edit: ES6 допускает еще более короткий синтаксис [...$('a')] (работает только в Firefox, начиная с мая 2014 года)

Ответ 5

Должно ли быть forEach? Вы можете просто использовать цикл for для перебора по списку:

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

Ответ 6

Для работы с списком в javascript, например. используя forEach(), NodeList должен быть преобразован в массив.

Это не обязательно верно. Вы можете добавить .forEach() из Array в NodeList, и он отлично работает:

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

Теперь вы можете запустить:

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

Перебирать NodeLists так же, как массивы.

Это дает намного более короткий и более чистый код, чем .call() везде.

Ответ 7

ES6 допускает классные способы, такие как var nodeArray = Array.from(nodeList), но мой любимый - новый оператор спреда.

var nodeArray = Array(...nodeList);

Ответ 8

Это со мной работало в 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);