Fastest way to convert JavaScript NodeList to Array?

javascript arrays nodelist
jairajs89 picture jairajs89 · Jul 8, 2010 · Viewed 136.6k times · Source

Previously answered questions here said that this was the fastest way:

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

In benchmarking on my browser I have found that it is more than 3 times slower than this:

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

They both produce the same output, but I find it hard to believe that my second version is the fastest possible way, especially since people have said otherwise here.

Is this a quirk in my browser (Chromium 6)? Or is there a faster way?

EDIT: For anyone who cares, I settled on the following (which seems to be the fastest in every browser that I tested):

//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: I found an even faster way

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

Answer

webdif picture webdif · Mar 27, 2016

With ES6, we now have a simple way to create an Array from a NodeList: the Array.from() function.

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

Related questions

What does [].forEach.call() do in JavaScript?

I was looking at some snippets of code, and I found multiple elements calling a function over a node list with a forEach applied to an empty array. For example I have something like: [].forEach.call( document.querySelectorAll('a'), function(…

Read More
Filter or map nodelists in ES6

What is the most efficient way to filter or map a nodelist in ES6? Based on my readings, I would use one of the following options: [...nodelist].filter or Array.from(nodelist).filter Which one would you recommend? And are …

Read More
Is it possible to append an element to a JavaScript nodeList?

I'm generating content dynamically, so I'm often ending up with documentFragments which I'm querying using querySelectorAll or querySelector returning a nodeList of elements inside my documentFragment. From time to time I would like to add an item to a list, …

Read More