如何在 JavaScript 中有效率地將 HTMLCollection 轉換為陣列？

HTMLCollection 到陣列的高效轉換

將HTMLCollection（HTML 文件中的元素集合）轉換為陣列是一項常見任務在網路開發中。雖然迭代並手動將每個項目複製到數組中，但效率可能很低。

「本機」程式碼解決方案

更有效的方法是使用本機JavaScript方法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()

Array.from()

Array.from()擴充運算子稍微慢一些，但可能因其簡潔而更受青睞因此，將HTMLCollection 轉換為陣列的最有效方法取決於開發人員的具體要求和偏好。

以上是如何在 JavaScript 中有效率地將 HTMLCollection 轉換為陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！