最快的方法转换JavaScript节点列表到数组?

之前在这里回答的问题都说这是最快的方式:

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

当前回答

这里有一个新的很酷的方法来使用ES6扩展操作符:

let arr = [...nl];

其他回答

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

现在你可以使用document.querySelectorAll('div').forEach(function()…)

一些优化:

在一个变量中保存节点列表的长度在设置之前显式地设置新数组的长度。访问索引，而不是推动或不变。

代码(jsPerf):

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

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

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

看我怎么用。

看看这篇谈论同样事情的博客文章。据我所知，多出来的时间可能是为了爬瞄准镜链。

以下是截至本文发布之日更新的图表(“未知平台”图表为Internet Explorer 11.15.16299.0):

从这些结果来看，preallocate 1方法似乎是最安全的跨浏览器方法。

推荐文章