Самый быстрый способ конвертировать JavaScript NodeList в массив?

Ранее ответные вопросы здесь говорили, что это был самый быстрый способ:

//nl is a NodeList
var arr = Array.prototype.slice.call(nl);

В бенчмаркинге в моем браузере я обнаружил, что он более чем в 3 раза медленнее этого:

var arr = [];
for(var i = 0, n; n = nl[i]; ++i) arr.push(n);

Оба они производят один и тот же результат, но мне трудно поверить, что моя вторая версия является самым быстрым способом, тем более, что люди говорили здесь иначе.

Является ли это причудой в моем браузере (Chromium 6)? Или есть более быстрый способ?

EDIT: для всех, кто волнуется, я остановился на следующем (что кажется самым быстрым в каждом браузере, который я тестировал):

//nl is a NodeList
var l = []; // Will hold the array of Node's
for(var i = 0, ll = nl.length; i != ll; l.push(nl[i++]));

EDIT2: я нашел еще более быстрый способ

// nl is the nodelist
var arr = [];
for(var i = nl.length; i--; arr.unshift(nl[i]));

Ответ 1

В некоторых браузерах второй, как правило, работает быстрее, но главное, что вы должны использовать его, потому что первый из них просто не перекрестный браузер. Несмотря на то, что The Times They Are a-Changin '

@kangax (Предварительный просмотр IE 9)

Array.prototype.slice теперь может конвертировать определенные объекты хоста (например, NodeLists) к массивам - то, что большинство современные браузеры смогли сделать довольно долгое время.

Пример:

Array.prototype.slice.call(document.childNodes);

Ответ 2

С ES6 у нас теперь есть простой способ создания массива из NodeList: Array.from().

// nl is a NodeList
let myArray = Array.from(nl)

Ответ 3

Вот новый классный способ сделать это с помощью оператора распространения ES6:

let arr = [...nl];

Ответ 4

Некоторые оптимизации:

сохранить длину NodeList в переменной
явно задает длину нового массива перед настройкой.
доступ к индексам, а не нажатие или неперемещение.

Код (jsPerf):

var arr = [];
for (var i = 0, ref = arr.length = nl.length; i < ref; i++) {
 arr[i] = nl[i];
}

Ответ 5

Результаты полностью зависят от браузера, чтобы дать объективный вердикт, мы должны выполнить некоторые тесты производительности, вот некоторые результаты, вы можете запустить их здесь:

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Предварительный просмотр платформы IE9 3:

Ответ 6

Самый быстрый и кросс-браузер

for(var i=-1,l=nl.length;++i!==l;arr[i]=nl[i]);

Как я сравнил в

http://jsbin.com/oqeda/98/edit

* Спасибо @CMS за идею!

Ответ 7

NodeList.prototype.forEach = Array.prototype.forEach;

Теперь вы можете сделать document.querySelectorAll('div'). forEach (function()...)

Ответ 8

быстрее и короче:

// nl is the nodelist
var a=[], l=nl.length>>>0;
for( ; l--; a[l]=nl[l] );

Ответ 9

Просмотрите этот пост в блоге здесь, в котором говорится о том же. Из того, что я собираю, дополнительное время, возможно, связано с хождением по цепочке областей.

Ответ 10

Это функция, которую я использую в своем JS:

function toArray(nl) {
    for(var a=[], l=nl.length; l--; a[l]=nl[l]);
    return a;
}

Ответ 11

В ES6 вы можете использовать:

Array.from

let array = Array.from(nodelist)
Оператор спреда

let array = [...nodelist]

Ответ 12

Вот графики, обновленные на дату публикации (диаграмма "неизвестной платформы" - Internet Explorer 11.15.16299.0):

Из этих результатов кажется, что метод preallocate 1 является самой безопасной кросс-браузерной ставкой.

Ответ 13

Простой способ конвертировать массивоподобные объекты в массив

nodeList = Array.from(document.querySelectorAll('li'))
// Checking if it array
Array.isArray(nodeList) // true

Ответ 14

Просто будучи завершающим здесь, и это быстро, чтобы напечатать:

let arr1 = Array.prototype.filter.call(nl, n => true);

let arr2 = Array.prototype.map.call(nl, n => n);

Ответ 15

let myArray = Array.from(nodelist)

Ответ 16

Предполагая nodeList = document.querySelectorAll("div"), это краткая форма преобразования nodelist в массив.

var nodeArray = [].slice.call(nodeList);

Посмотрите, как я это использую здесь.