Le moyen le plus rapide de convertir JavaScript NodeList en tableau?

Les questions précédemment répondues ici indiquaient que c'était le moyen le plus rapide:

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

En comparant sur mon navigateur, j'ai constaté qu'il est plus de 3 fois plus lent que cela:

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

Ils produisent tous deux la même sortie, mais j'ai du mal à croire que ma deuxième version est le moyen le plus rapide possible, d'autant plus que les gens ont dit le contraire ici.

Est-ce une bizarrerie dans mon navigateur (Chromium 6)? Ou existe-t-il un moyen plus rapide?

EDIT: Pour tous ceux qui s'en soucient, je me suis installé sur ce qui suit (qui semble être le plus rapide dans tous les navigateurs que j'ai testés):

//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: J'ai trouvé un moyen encore plus rapide

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

Le second a tendance à être plus rapide dans certains navigateurs, mais l'essentiel est que vous devez l'utiliser car le premier n'est tout simplement pas multi-navigateur. Même si les temps sont changeants

@kangax ( aperçu IE 9 )

Array.prototype.slice peut désormais convertir certains objets hôtes (par exemple NodeList) en tableaux - ce que la majorité des navigateurs modernes ont pu faire pendant un bon moment.

Exemple:

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

Avec ES6, nous avons maintenant un moyen simple de créer un tableau à partir d'une NodeList: la Array.from()fonction.

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

Voici une nouvelle façon sympa de le faire en utilisant l' opérateur de propagation ES6 :

let arr = [...nl];

Quelques optimisations:

• enregistrer la longueur de la NodeList dans une variable
• définissez explicitement la longueur du nouveau tableau avant de définir.
• accéder aux indices, plutôt que de pousser ou de déplacer.

Code ( jsPerf ):

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

Les résultats dépendront complètement du navigateur, pour donner un verdict objectif, nous devons faire des tests de performances, voici quelques résultats, vous pouvez les exécuter ici :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Aperçu de la plateforme IE9 3:

Le navigateur le plus rapide et le plus croisé est

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

Comme je l'ai comparé dans

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

* Merci @CMS pour l'idée!

Dans ES6, vous pouvez utiliser:

• Array.from

  let array = Array.from(nodelist)

• Opérateur de diffusion

  let array = [...nodelist]

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

Vous pouvez maintenant faire document.querySelectorAll ('div'). ForEach (function () ...)

plus rapide et plus court:

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

Consultez cet article de blog ici qui parle de la même chose. D'après ce que je comprends, le temps supplémentaire pourrait avoir à voir avec la montée de la chaîne de portée.

C'est la fonction que j'utilise dans mon JS:

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

Voici les graphiques mis à jour à la date de cette publication (le graphique "plate-forme inconnue" est Internet Explorer 11.15.16299.0):

D'après ces résultats, il semble que la méthode de préallocation 1 soit le pari multi-navigateur le plus sûr.

En supposant nodeList = document.querySelectorAll("div")qu'il s'agit d'une forme concise de conversion nodelisten tableau.

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

Voyez-moi l'utiliser ici .