Найшвидший спосіб перетворити 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]));

Другий має тенденцію бути швидшим у деяких браузерах, але головне в тому, що вам доведеться його використовувати, оскільки перший просто не перехресний браузер. Незважаючи на те, що The Times They Are a Changin '

@kangax ( попередній перегляд IE 9 )

Array.prototype.slice тепер може перетворити певні хост-об'єкти (наприклад, NodeList's) у масиви - те, що більшість сучасних браузерів здатні зробити вже досить довго.

Приклад:

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

З ES6 тепер у нас є простий спосіб створити масив з NodeList: Array.from()функції.

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

Ось новий класний спосіб зробити це за допомогою оператора розповсюдження ES6 :

let arr = [...nl];

Деякі оптимізації:

• зберегти довжину NodeList у змінній
• явно встановити довжину нового масиву перед налаштуванням.
• отримати доступ до індексів, а не натискання чи не зміщення.

Код ( jsPerf ):

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

Результати будуть повністю залежати від браузера, щоб дати об'єктивний вердикт, ми повинні зробити кілька тестів на ефективність, ось деякі результати, ви можете запустити їх тут :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Сафарі 5:

Попередній перегляд платформи IE9 3:

Самий швидкий і перехресний браузер

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

Як я порівнював в

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

* Дякую @CMS за ідею!

У ES6 ви можете використовувати:

• Array.from

  let array = Array.from(nodelist)

• Оператор розповсюдження

  let array = [...nodelist]

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

Тепер ви можете зробити document.querySelectorAll ('div'). ForEach (function () ...)

швидше і коротше:

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

Перевірте це повідомлення у блозі тут , що говорить про те ж. З того, що я збираю, додатковий час може мати відношення до підйому ланцюга.

Це функція, яку я використовую в своєму JS:

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

Ось оновлені графіки станом на дату публікації (діаграма "невідома платформа" - Internet Explorer 11.15.16299.0):

З цих результатів виходить, що метод попереднього розміщення 1 є найбезпечнішою ставкою для перехресних веб-переглядачів.

Припускаючи nodeList = document.querySelectorAll("div"), що це стисла форма перетворення nodelistв масив.

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

Побачте, я тут його використовую .