JavaScriptで関数パラメーターとして配列を渡す


291

配列をパラメーターとして使用して関数を呼び出したい:

const x = ['p0', 'p1', 'p2'];
call_me(x[0], x[1], x[2]); // I don't like it

function call_me (param0, param1, param2 ) {
  // ...
}

の内容をxに渡すより良い方法はありcall_me()ますか?

回答:


422
const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);

のMDNドキュメントを参照してくださいFunction.prototype.apply()


環境がECMAScript 6をサポートしている場合は、代わりにスプレッド引数を使用できます。

call_me(...args);

9
補足として、代わりに連想配列(名前付きキー)を渡したい場合は、オブジェクトを使用します。PHPから(そして常にgoogleによってこのスレッドにつながっています)、これを理解するのにしばらく時間がかかりました。オブジェクト全体をパラメータとして渡すことができます。w3schools.com/js/js_objects.asp
timhc22

「広がる」議論を指摘してくれてありがとう!それについて知りませんでした。
トーマス・アン

@timhc-サイドノートのコメントは興味をそそられますが、解析できません(私はいくつかのチュートリアルで動作するjavascript noobです)。JSでは、いくつかのチュートリアルによると、連想配列オブジェクトです。
NateT 2018

@ timhc22、およびjsonオブジェクトを使用して関数にパラメーターとして渡す場合、読みやすくするためにパラメーターの破棄を忘れないでください
Muhammad Omer Aslam

113

配列全体を渡して、関数内で必要に応じて処理しませんか?

var x = [ 'p0', 'p1', 'p2' ]; 
call_me(x);

function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}

37
これは、call_me()を変更できないためです。他のいくつかのライブラリで定義されており、APIをいじることはできません。
ロバート

62
+1は元の質問には答えませんが、おそらくこのページを閲覧した10万人以上の人が探していたものです。
石川

誰かが「call_me(x)」行が何をしているのか説明できますか?functionキーワードのない関数名のようですか?正確には何をしていますか?
泳いだ

1
@swam call_me関数の呼び出しです。最後にセミコロンがないだけです。
SantiBailors 2015

@swam宣言されたcall_me(params)関数を実行します。
フリオロドリゲス

43

call_meがグローバル関数であると仮定すると、これが設定されることは期待できません。

var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);

41

ES6標準には、まさにそれを行う新しいスプレッドオペレーターが ...あります。

call_me(...x)

IEを除くすべての主要ブラウザでサポートされています。

スプレッドオペレーターは他の多くの便利なことを行うことができ、リンクされたドキュメントはそれを示すのに非常に優れています。



7

@KaptajnKoldが答えたように

var x = [ 'p0', 'p1', 'p2' ];
call_me.apply(this, x);

また、call_me関数のすべてのパラメーターを定義する必要もありません。そのまま使えますarguments

function call_me () {
    // arguments is a array consisting of params.
    // arguments[0] == 'p0',
    // arguments[1] == 'p1',
    // arguments[2] == 'p2'
}

4
これは非常に悪い習慣です...関数を見ると、関数に必要なものを確認できず、すべてのパラメーターはオプションです。
2016年

3

これに注意してください

function FollowMouse() {
    for(var i=0; i< arguments.length; i++) {
        arguments[i].style.top = event.clientY+"px";
        arguments[i].style.left = event.clientX+"px";
    }

};

// ---------------------------

HTMLページ

<body onmousemove="FollowMouse(d1,d2,d3)">

<p><div id="d1" style="position: absolute;">Follow1</div></p>
<div id="d2" style="position: absolute;"><p>Follow2</p></div>
<div id="d3" style="position: absolute;"><p>Follow3</p></div>


</body>

任意の引数で関数を呼び出すことができます

<body onmousemove="FollowMouse(d1,d2)">

または

<body onmousemove="FollowMouse(d1)">

これは明らかに答えの一部です。呼び出し後に配列を取得するには、「引数」が必ず必要です。ありがとう!
FlorianB 2016年

2

関数の引数は配列にすることもできます:

function foo([a,b,c], d){
  console.log(a,b,c,d);
}

foo([1,2,3], 4)

もちろん、spreadを使用することもできます。

function foo(a, b, c, d){
  console.log(a, b, c, d);
}

foo(...[1, 2, 3], 4)


2

スプレッド演算子を使用している間、それは渡される最後または唯一のパラメーターでなければならないことに注意する必要があります。そうでなければ失敗します。

function callMe(...arr){ //valid arguments
    alert(arr);
}

function callMe(name, ...arr){ //valid arguments
    alert(arr);
}

function callMe(...arr, name){ //invalid arguments
    alert(arr);
}

開始引数として配列を渡す必要がある場合は、次のようにすることができます。

function callMe(arr, name){
    let newArr = [...arr];
    alert(newArr);
}

1

より基本的な形式でスプレッド演算子を使用できます

[].concat(...array)

配列を返すが引数として渡されることが期待される関数の場合

例:

function expectArguments(...args){
  return [].concat(...args);
}

JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))

0

答えは出ましたが、ケーキだけあげたいです。あなたが達成したいものはmethod borrowing、JSのコンテキストで呼び出されます。つまり、オブジェクトからメソッドを取得し、それを別のオブジェクトのコンテキストで呼び出します。配列メソッドを引数に適用することはよくあることです。例を挙げましょう。

したがって、2つの数値を引数として取り、「超安全」なハッシュ文字列を返す「超」ハッシュ関数があります。

function hash() {
  return arguments[0]+','+arguments[1];
}

hash(1,2); // "1,2" whoaa

これまでのところ良好ですが、上記のアプローチにはほとんど問題がありません。制約があり、2つの数値でのみ機能します。これは動的ではありません。任意の数値で機能させ、配列を渡す必要がないようにします(あなたがまだ主張する場合)。わかりました、十分な話、戦いましょう!

自然な解決策は、arr.joinメソッドを使用することです:

function hash() {
  return arguments.join();
}

hash(1,2,4,..); //  Error: arguments.join is not a function

ちょっと、あなた。残念ながら、それはうまくいきません。hash(arguments)とargumentsオブジェクトを呼び出しているため、オブジェクトは反復可能で配列のようですが、実際の配列ではありません。以下のアプローチはどうですか?

function hash() {
  return [].join.call(arguments);
}

hash(1,2,3,4); // "1,2,3,4" whoaa

トリックは呼ばれています method borrowing.

join通常の配列からメソッドを借りて、のコンテキストで実行するために[].join.使用[].join.callしますarguments

なぜ機能するのですか?

これは、ネイティブメソッドの内部アルゴリズムが arr.join(glue)が非常に単純だからです。

仕様からほぼ「現状のまま」:

Let glue be the first argument or, if no arguments, then a comma ",".
Let result be an empty string.
Append this[0] to result.
Append glue and this[1].
Append glue and this[2].
Do so until this.length items are glued.
Return result.

したがって、技術的にはこれを取得してthis [0]、this [1]…などを結合します。これは、このような配列を許可するように意図的に記述されています(偶然ではなく、多くのメソッドがこの慣例に従います)。それがまた動作する理由ですthis=arguments.

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.