将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 spread operator：

，这是一种新的酷炫方式

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

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

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

查看此博客文章here，其中涉及相同的内容。从我收集的内容来看，额外的时间可能与走在范围链上有关。

Answer 10

这是我在JS中使用的函数：

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

Answer 11

在ES6中，您可以使用：

• Array.from

  let array = Array.from(nodelist)

• 扩展运算符

  let array = [...nodelist]

Answer 12

以下是截至本发布日期更新的图表（“未知平台”图表为Internet Explorer 11.15.16299.0）：

从这些结果来看，预分配1方法似乎是最安全的跨浏览器投注。

Answer 13

假设var renderer = this.GetComponent<Renderer>(); ，这是将var material = GetComponent<Renderer>().material; originalColor = material.color; 转换为数组的一种简洁形式。

nodeList = document.querySelectorAll("div")

见我用它How does Keras evaluate the accuracy?。

Answer 14

就去做吧 vat arr = [...nodeList]