JavaScript で HTMLCollection を配列に効率的に変換するにはどうすればよいですか?

HTMLCollection から配列への効率的な変換

HTML ドキュメント内の要素のコレクションである HTMLCollection を配列に変換するのは一般的なタスクですウェブ開発で。各項目を反復して手動で配列にコピーすることは機能しますが、非効率になる可能性があります。

「ネイティブ」コード ソリューション

より効率的なアプローチは、ネイティブ 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()

スプレッド演算子は少し遅いですが、簡潔であるため好まれるかもしれません。 syntax.

したがって、HTMLCollection を配列に変換する最も効率的な方法は、開発者の特定の要件と設定によって異なります。

以上がJavaScript で HTMLCollection を配列に効率的に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。