web-dev-qa-db-ja.com

JavaScriptの関数パラメータとして配列を渡る

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

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()に渡すより良い方法はありますか？

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

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

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

call_me(...args);
372
KaptajnKold

配列全体を渡して、必要に応じて関数内で処理しないのはなぜですか。

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

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

Call_meがグローバル関数であると仮定すると、これが設定されるとは思わない。

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

ES6標準では、新しい スプレッド演算子...があります。

call_me(...x)

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

スプレッド演算子は他にも多くの便利なことを実行できます。リンクされたドキュメントはそれを示すのに非常に役立ちます。

36
BoltKey

@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'
}
5
徐竟峰

これに注意

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>

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

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

または

<body onmousemove="FollowMouse(d1)">
3
ali.b.y

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

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
vsync

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

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
Naba

答えはすでに与えられていますが、私はただケーキをあげたいと思います。あなたが達成したいことはJSの文脈でmethod borrowingと呼ばれます、それは我々がオブジェクトからメソッドを取り出して、そして別のオブジェクトの文脈の中でそれを呼び出すとき。配列メソッドを取り、それらを引数に適用することは非常に一般的です。例を挙げましょう。

そのため、引数として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オブジェクトを呼び出しているので、objectは繰り返し可能で配列に似ていますが、実際の配列ではありません。以下のアプローチはどうですか？

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

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

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

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

なぜそれが機能するのですか？

これは、ネイティブメソッド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.でも動作するのはそのためです。

0
Humoyun

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

[].concat(...array)

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

例：

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

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