如何在 JavaScript 中高效地将 HTMLCollection 转换为数组？

HTMLCollection 到数组的高效转换

将 HTMLCollection（HTML 文档中的元素集合）转换为数组是一项常见任务在网络开发中。虽然迭代并手动将每个项目复制到数组中，但效率可能很低。

“本机”代码解决方案

更有效的方法是使用本机 JavaScript method Array.prototype.slice.call():

var arr = Array.prototype.slice.call(htmlCollection);

此方法返回一个包含 htmlCollection 对象中元素的数组。

简洁表达式

由于语法可能很冗长，因此更简洁的等效表达式是：

var arr = [].slice.call(htmlCollection);

ES6 解决方案

ES6 (ECMAScript 2015) 引入了附加选项：

• Array.from()：将可迭代对象（例如 HTMLCollection）转换为数组。

var arr = Array.from(htmlCollection);

• 扩展运算符：将可迭代对象解包到数组中。

var arr = [...htmlCollection];

性能比较

基准（例如，https:// jsben.ch/h2IFA）表明以下方法具有相似的性能：

• Array.prototype.slice.call()
• [].slice.call()
• Array.from()

扩展运算符稍微慢一些，但它可能因其简洁的语法而受到青睐。

因此，转换 HTMLCollection 的最有效方法数组取决于开发者的具体要求和偏好。

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