JavaScript の関数に配列を渡す

Mehvish Ashiq 2023年10月12日
  1. JavaScript で apply() メソッドを使用して関数に配列を渡す
  2. spread 演算子を使用して、JavaScript の関数に配列を渡する
  3. JavaScript で arguments オブジェクトを使用して関数に配列を渡す
JavaScript の関数に配列を渡す

このチュートリアルは、JavaScript を使用して配列を関数に渡すさまざまな方法を教えることを目的としています。apply() メソッド、spread 演算子、arguments オブジェクト、および配列全体をパラメーターとして関数に渡す方法を強調しています。

apply() メソッドは、this 値を使用して関数を実行し、配列または配列のようなオブジェクトとして arguments を提供します。渡さなければならない特定の関数で使用されます。

apply() メソッドでは、this 値が関数を呼び出す最初のパラメーターであり、arguments が渡される引数の配列を持つ 2 番目のパラメーターです。

this 値が関数から見た元の値にできない場合(メソッドが非厳密モードコードの関数である場合)、覚えておいてください。グローバルオブジェクトは nullundefined になり、プリミティブ値はボックス化されます。

ECMAScript 6(ES6)は、spread という名前のすばらしい演算子を提供します。JavaScript コード内では ... と記述されています。この演算子は、たとえば配列を反復可能にします。これは、すべての配列要素またはオブジェクトを処理するために使用されます。

一方、arguments オブジェクトは配列のような(つまり、arguments には length プロパティがあります)オブジェクトであり、引数の値を持つ関数内で使用できます。

JavaScript で apply() メソッドを使用して関数に配列を渡す

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName.apply(this, names);

function displayName() {
  for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
  }
}

出力:

"Mehvish"
"John"
"Henry"
"Thomas"

上記の例では、names の配列と displayName() という名前の関数があり、names 配列のすべての要素を出力します。apply() メソッドを使用して、配列を displayName() 関数に渡します。

spread 演算子を使用して、JavaScript の関数に配列を渡する

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName(...names);

function displayName() {
  for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
  }
}

出力:

"Mehvish"
"John"
"Henry"
"Thomas"

ここでは、すべての配列要素を出力するための names 配列と displayNames() 関数が再びあります。spread 構文 ... を使用して、配列全体を関数に渡します。

JavaScript で arguments オブジェクトを使用して関数に配列を渡す

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName(names);

function displayName() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

出力:

["Mehvish", "John", "Henry", "Thomas"]

上記のコードスニペットでは、arguments オブジェクトを使用して、names 配列を displayName() 関数に渡します。コードを単純化するために、配列全体を引数として関数に渡すことができます。

このために、次のコードを練習できます。

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName(names);

function displayName() {
  for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
  }
}

出力:

"Mehvish"
"John"
"Henry"
"Thomas"
著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript Array