将JavaScript NodeList转换为数组的最快方法?

2020/10/09 15:41 · javascript ·  · 0评论

先前在这里回答的问题说这是最快的方法:

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

它们都产生相同的输出,但是我很难相信我的第二个版本是最快的方法,特别是因为人们在这里另有说明。

这是我的浏览器中的一个怪胎(铬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]));

在某些浏览器中,第二个趋向于更快,但是要点是必须使用它,因为第一个不是跨浏览器。即使时代是改变

@kangax IE 9预览

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

例:

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

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

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

这是使用ES6传播运算符的一种很酷的新方法

let arr = [...nl];

一些优化:

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

代码(jsPerf):

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

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

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

IE9平台预览3:

最快,最交叉的浏览器是

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

正如我在

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

*感谢@CMS提供这个想法!

铬(类似于Google Chrome)
火狐浏览器
歌剧

在ES6中,您可以使用:

  • Array.from

    let array = Array.from(nodelist)

  • 点差运算符

    let array = [...nodelist]

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

现在您可以执行document.querySelectorAll('div')。forEach(function()...)

更快,更短:

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

在这里查看有关同一件事的博客文章根据我的收集,多余的时间可能与沿范围链走动有关。

这是我在JS中使用的功能:

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

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

Safari 11.1.2
Firefox 61.0
铬68.0.3440.75
Internet Explorer 11.15.16299.09.0

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

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

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

看到我在这里用它

本文地址:http://javascript.askforanswer.com/jiangjavascript-nodelistzhuanhuanweishuzudezuikuaifangfa.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!