JavaScript NodeList'i Array'a dönüştürmenin en hızlı yolu?

Burada daha önce cevaplanan sorular bunun en hızlı yol olduğunu söyledi:

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

Tarayıcımdaki karşılaştırmada, bundan 3 kat daha yavaş olduğunu gördüm:

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

Her ikisi de aynı çıktıyı üretiyorlar, ancak ikinci sürümümün mümkün olan en hızlı yol olduğuna inanmakta zorlanıyorum, özellikle insanlar burada aksini söylediğinden.

Bu tarayıcımda bir sorun mu (Chromium 6)? Yoksa daha hızlı bir yol var mı?

EDIT: önemseyen herkes için aşağıdakilere karar verdim (test ettiğim her tarayıcıda en hızlı gibi görünüyor):

//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: Daha da hızlı bir yol buldum

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

İkincisi bazı tarayıcılarda daha hızlı olma eğilimindedir, ancak asıl nokta onu kullanmanız gerektiğidir, çünkü ilki sadece tarayıcılar arası değildir. Değişen Zamanlar Olsa '

@kangax ( IE 9 önizleme )

Array.prototype.slice artık belirli ana bilgisayar nesnelerini (örneğin, NodeList'ler) dizilere dönüştürebilir - modern tarayıcıların çoğunun bir süredir yapabildiği bir şey.

Misal:

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

ES6 ile artık bir NodeList öğesinden bir Array oluşturmanın basit bir yoluna sahibiz: Array.from()işlev.

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

ES6 forma operatörünü kullanarak bunu yapmanın yeni ve harika bir yolu :

let arr = [...nl];

Bazı optimizasyonlar:

• NodeList'in uzunluğunu bir değişkene kaydedin
• ayarlamadan önce yeni dizinin uzunluğunu açıkça ayarlayın.
• itme veya kaydırma yerine endekslere erişir.

Kodu ( jsPerf ):

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

Sonuçlar tamamen tarayıcıya bağlı olacak, nesnel bir karar vermek için bazı performans testleri yapmalıyız, işte bazı sonuçlar, burada çalıştırabilirsiniz :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

IE9 Platform Önizleme 3:

En hızlı ve çapraz tarayıcı

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

Kıyasladığım gibi

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

* Fikir için @CMS teşekkürler!

ES6'da şunları kullanabilirsiniz:

• Array.from

  let array = Array.from(nodelist)

• Forma operatörü

  let array = [...nodelist]

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

Artık document.querySelectorAll ('div'). ForEach (function () ...) yapabilirsiniz

daha hızlı ve daha kısa:

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

Bu blog yazısı kontrol edin burada aynı şeyi o konuşur. Topladığım kadarıyla, ekstra zamanın kapsam zincirini yukarı doğru yürümekle ilgili olması gerekebilir.

Bu benim JS kullanmak işlevdir:

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

İşte bu yayın tarihi itibariyle güncellenen grafikler ("bilinmeyen platform" şeması Internet Explorer 11.15.16299.0):

Bu sonuçlardan, preallocate 1 yönteminin en güvenli tarayıcılar arası bahis olduğu görülmektedir.

Diyelim ki nodeList = document.querySelectorAll("div")bu, nodelistdiziye dönüştürmenin kısa bir biçimidir .

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

Bakın burada kullanın .