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

Question

Самый быстрый способ конвертировать 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]));

843 13

javascript arrays nodelist

13 ответов:

Comments

Ничего не найдено.

galambalazs · Accepted Answer · 2015-08-10 23:52:00

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

@kangax (IE 9 preview)

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

пример:
Array.prototype.slice.call(document.childNodes);

webdif · Accepted Answer · 2018-08-15 06:40:25

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

Alexander Olsson · Accepted Answer · 2015-11-20 10:56:13

вот новый классный способ сделать это с помощью ES6 spread operator:
let arr = [...nl];

Thai · Accepted Answer · 2011-03-09 10:04:35

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

сохранить длину списка узлов в переменной

явно задать длину массива перед установкой.

доступ к индексам, а не толкать или не shifting.

код (см. Этот тест jsperf):
var arr = [];
for (var i = 0, ref = arr.length = nl.length; i < ref; i++) {
 arr[i] = nl[i];
}

CMS · Accepted Answer · 2017-02-08 16:28:06

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

Chrome 6:

Firefox 3.6:

Firefox 4. 0b2:

Safari 5:

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

Felipe Buccioni · Accepted Answer · 2017-08-19 19:45:32

самый быстрый и кросс-браузер
for(var i=-1,l=nl.length;++i!==l;arr[i]=nl[i]);
Как я сравнивал в

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

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

John Williams · Accepted Answer · 2014-12-25 19:52:33

NodeList.prototype.forEach = Array.prototype.forEach;
теперь вы можете сделать документ.querySelectorAll ('div').forEach (функция ()...)

anonymous · Accepted Answer · 2013-01-22 16:30:02

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

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

Vivin Paliath · Accepted Answer · 2010-07-08 02:19:20

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

Web_Designer · Accepted Answer · 2013-03-08 05:21:33

Это функция, которую я использую в моем JS:
function toArray(nl) {
    for(var a=[], l=nl.length; l--; a[l]=nl[l]);
    return a;
}

TomSlick · Accepted Answer · 2018-08-13 18:40:51

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

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

tonethar · Accepted Answer · 2017-10-24 04:13:52

просто быть завершителем здесь, и это быстро тип:
let arr1 = Array.prototype.filter.call(nl, n => true);

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

achn · Accepted Answer · 2018-09-19 10:28:22

простой способ преобразовать массив-как объекты в массив
nodeList = Array.from(document.querySelectorAll('li'))
// Checking if it's array
Array.isArray(nodeList) // true