首页 > web前端 > js教程 > 如何高效地将 HTMLCollection 转换为数组?

如何高效地将 HTMLCollection 转换为数组?

DDD
发布: 2024-11-20 03:13:01
原创
907 人浏览过

How to Efficiently Convert an HTMLCollection to an Array?

有效的 HTMLCollection 到数组的转换

将 HTMLCollection 转换为数组可以通过迭代方式实现,手动将每个项目附加到数组中。然而,有更有效的方法来进行这种转换。

原生代码方法:

其中一种方法利用 slice 方法>Array.prototype,如以下代码片段所示:

var arr = Array.prototype.slice.call(htmlCollection);
登录后复制
该方法有效地模拟了迭代迭代的功能,提供了一种高效的转换手段。

简明版本:

为了更简洁,下面的表达式达到相同的结果:

var arr = [].slice.call(htmlCollection);
登录后复制

Array.from (ES6 ):

在 ECMAScript 2015 及更高版本中,

Array.from 方法提供了将可迭代对象转换为数组的本机解决方案,包括 HTMLCollections:

var arr = Array.from(htmlCollection);
登录后复制

Spread 运算符(ES6 ):

ES6 中引入的展开运算符,提供了与

Array.from 功能等效的方法,如下所示:

var arr = [...htmlCollection];
登录后复制

性能比较:

这些方法的比较分析,请参考以下基准:http://jsben.ch/h2IFA

以上是如何高效地将 HTMLCollection 转换为数组?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板