JavaScript で引数を配列に変換する

JavaScript の引数オブジェクトとは何ですか

引数は、すべての関数内に存在するオブジェクトです。JavaScript で関数に渡すパラメーターが何であれ、それらのパラメーターはこの引数リスト内にオブジェクトの形式で格納されます。このオブジェクトのキーは、ゼロから始まる数字です。arguments オブジェクト内に存在する値にアクセスするには、これらのキーを使用できます。

この arguments オブジェクトは配列として使用できますが、forEach、sort、filter、map などの JavaScript 関数をサポートしていません。したがって、これらの関数を引数オブジェクトとともに使用する場合は、このオブジェクト全体を配列に変換する必要があります。

arguments オブジェクトは、さまざまな方法で配列に変換できます。rest パラメータ、array.from()、配列リテラルの使用など、最も一般的な方法に焦点を当てます。それぞれについて詳しく説明しましょう。

JavaScript の rest パラメータを使用して、arguments オブジェクトを配列に変換する

rest パラメーターを使用すると、関数は可変数の引数を入力として受け入れることができます。...args で表されます。ここでは、args の代わりに任意の名前を付けることができ、トリプルドット ... はスプレッド演算子として知られています。

これで、関数にパラメータとして ...args を渡すと、arguments オブジェクトが配列に変換され、args という名前を使用して arguments オブジェクトにアクセスできるようになりました。

function func(...args) {
  console.log(args);
  console.log(args[0]);
}

func(1, 2, 3);

出力：

[ 1, 2, 3 ]
1

この例では、パラメーター1,2,3 を引数として関数 func() に渡します。rest 演算子を使用したので、arguments オブジェクトを配列の形式で取得します。これで、この配列で並べ替えやフィルターなどのさまざまな方法を使用できるようになりました。

JavaScript の Array.from() メソッドを使用して、arguments オブジェクトを配列に変換する

引数オブジェクトを配列に変換する別の方法は、メソッド Array.from() を使用することです。ここでは、from() メソッド内に arguments オブジェクトを渡して、配列を指定する必要があります。結果の配列を変数に格納するか、この配列内の要素に直接アクセスすることもできます。

function func() {
  console.log(Array.from(arguments));
  console.log(Array.from(arguments)[0]);
}

func(1, 2, 3);

出力：

[ 1, 2, 3 ]
1

同じ例も取り上げましたが、唯一の違いは、Array.from() を使用し、rest 演算子を使用する代わりに arguments オブジェクトを渡すことです。Array.from(arguments)[0] などの配列インデックスを使用して、個々の要素にアクセスできます。これにより、配列の最初の要素が返されます。

JavaScript の配列リテラルを使用して、引数オブジェクトを配列に変換する

配列リテラルは、インデックス番号 0 で始まる 0 個以上の要素で構成されるリストです。配列リテラルでは、要素は角括弧 [] で囲まれています。ここでは、すべての要素にそのインデックス番号を使用してアクセスできます。

function func() {
  let args = [].slice.call(arguments);

  console.log(args);
  console.log(args[2]);
}

func(1, 2, 3);

出力：

[ 1, 2, 3 ]
3

引数オブジェクトを配列に変換するために、最初に空の配列を取得しました。その配列で、call() メソッドを使用して slice() メソッドを呼び出します。これで、slice() メソッドは渡されたオブジェクトを反復処理します。この場合、それは arguments オブジェクトであり、オブジェクト内のすべての要素を空の配列に追加します。最後に、この結果を変数 args 内に格納します。

この変数には、arguments オブジェクトに含まれていたすべての要素が含まれるようになったため、args 変数を使用して、適切なインデックス番号を持つすべての要素にアクセスできます。