JavaScriptで配列のようなオブジェクトを配列に変換する方法

JavaScript では、配列のようなオブジェクトは、数値キーと長さプロパティを持つオブジェクトを指します。たとえば、DOM の NodeList オブジェクトと関数の引数オブ​​ジェクトは配列のようなオブジェクトです。場合によっては、データをより便利に操作するために、配列のようなオブジェクトを実際の配列に変換する必要があります。この記事では、配列のようなオブジェクトを配列に変換する 3 つの方法を紹介します。

方法 1: 配列のスライス メソッド

最初の方法は、配列のスライス() メソッドを使用することです。これにより、開始インデックスから終了インデックスまでの要素のセクションをコピーできます。新しい配列の中央。 call() または apply() を使用して、slice() メソッドを配列のようなオブジェクトに適用できます。

たとえば、次のコードを使用して NodeList オブジェクトを配列に変換できます。

const nodeList = document.querySelectorAll('li');
const array = Array.prototype.slice.call(nodeList);

この例では、最初に querySelectorAll() メソッドを使用して、 li要素。次に、Array.prototype.slice.call() メソッドを使用して、NodeList オブジェクトを配列に変換します。

方法 2: Array.from() を使用する

2 番目の方法は、Array.from() メソッドを使用することです。このメソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトを実際の配列に変換します。 Array.from() メソッドの最初のパラメータは変換されるオブジェクトで、2 番目のパラメータは各要素に適用されるオプションのマッピング関数です。

たとえば、次のコードを使用して NodeList オブジェクトを配列に変換できます。

const nodeList = document.querySelectorAll('li');
const array = Array.from(nodeList);

この例では、最初に querySelectorAll() メソッドを使用して、 li要素。次に、Array.from() メソッドを使用して NodeList オブジェクトを配列に変換します。

方法 3: スプレッド演算子を使用する

3 番目の方法は、スプレッド演算子を使用することです。この演算子は、反復可能なオブジェクトを一連の引数に展開します。これを空の配列に適用し、その配列に配列のようなオブジェクトを挿入できます。

たとえば、次のコードを使用して NodeList オブジェクトを配列に変換できます。

const nodeList = document.querySelectorAll('li');
const array = [...nodeList];

この例では、最初に querySelectorAll() メソッドを使用して、 li要素。次に、スプ​​レッド演算子を使用して NodeList オブジェクトを配列に変換します。

概要

上記の 3 つのメソッドは、配列のようなオブジェクトを実際の配列に変換できます。方法を選択するときは、コードの可読性とパフォーマンスを考慮する必要があります。大量のデータを変換する必要がある場合は、よりパフォーマンスの高い方法を使用してください。読みやすさがより重要な場合は、より読みやすい方法を使用してください。

以上がJavaScriptで配列のようなオブジェクトを配列に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。