将JavaScript NodeList转换为Array的最快方法？

Question

以前回答的问题说这是最快的方式:

//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)吗？或者有更快的方法吗？

编辑:对于任何关心的人,我选择了以下内容(这似乎是我测试的每个浏览器中最快的):

//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]));

Answer 1

使用ES6,我们现在有一种从NodeList创建数组的简单方法:该Array.from()函数.

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

Answer 2

第二个在某些浏览器中往往更快,但主要的一点是你必须使用它,因为第一个不是跨浏览器.尽管"泰晤士报他们是一个长安"

@kangax( IE 9预览)

Array.prototype.slice现在可以将某些主机对象(例如NodeList)转换为数组 - 大多数现代浏览器已经能够做很长一段时间了.

例:

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

Answer 3

以下是使用ES6扩展运算符执行此操作的新方法:

let arr = [...nl];

Answer 4

一些优化:

• 将NodeList的长度保存在变量中
• 在设置之前显式设置新数组的长度.
• 访问指数,而不是推或不推.

代码(jsPerf):

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

Answer 5

结果将完全取决于浏览器,给出客观判断,我们必须进行一些性能测试,这里有一些结果,你可以在这里运行它们:

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

IE9平台预览版3:

Answer 6

最快速和跨浏览器是

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

正如我在比较中

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

*感谢@CMS的想法!

Answer 7

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

现在你可以做document.querySelectorAll('div').forEach(function()...)

Answer 8

更快更短:

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

Answer 9

在ES6中，您可以使用：

• Array.from

  let array = Array.from(nodelist)

• 点差运算符

  let array = [...nodelist]

Answer 10

假设nodeList = document.querySelectorAll("div")，这是转换nodelist为数组的简洁形式。

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

看我在这里使用它。