webentwicklung-frage-antwort-db.com.de

Übergeben eines Arrays als Funktionsparameter in JavaScript

Ich möchte eine Funktion mit einem Array als Parameter aufrufen:

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

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

Gibt es eine bessere Möglichkeit, den Inhalt von x an call_me() zu übergeben?

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

Siehe MDN-Dokumente für Function.prototype.apply() .


Wenn die Umgebung ECMAScript 6 unterstützt, können Sie stattdessen ein Argument spread verwenden:

call_me(...args);
363
KaptajnKold

Warum übergeben Sie nicht das gesamte Array und verarbeiten es nach Bedarf innerhalb der Funktion?

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

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

Angenommen, call_me ist eine globale Funktion, Sie erwarten also nicht, dass dies gesetzt ist.

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

Im ES6-Standard gibt es einen neuen spread-Operator..., der genau das tut.

call_me(...x)

Es wird von allen gängigen Browsern mit Ausnahme von IE unterstützt.

Der Spread-Operator kann viele andere nützliche Dinge tun, und die verknüpfte Dokumentation kann dies sehr gut zeigen.

36
BoltKey

Da hatte @KaptajnKold geantwortet

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

Sie müssen auch nicht alle Parameter für die call_me-Funktion definieren. Sie können nur arguments verwenden.

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

Beachten Sie dies

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-Seite

<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>

funktion kann mit beliebigen Args aufgerufen werden

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

oder

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

Funktionsargumente können auch Arrays sein:

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

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

natürlich kann man auch spread verwenden:

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

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

1
vsync

Bei der Verwendung des Spread-Operators muss beachtet werden, dass es der letzte oder einzige übergebene Parameter sein muss. Sonst wird es scheitern.

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

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

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

Wenn Sie ein Array als Startargument übergeben müssen, können Sie Folgendes tun:

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

Die Antwort war bereits gegeben, aber ich möchte nur mein Stück Kuchen geben. Was Sie erreichen möchten, heißt method borrowing im Kontext von JS. Wenn Sie eine Methode von einem Objekt nehmen und sie im Kontext eines anderen Objekts aufrufen. Es ist durchaus üblich, Array-Methoden zu verwenden und auf Argumente anzuwenden. Lassen Sie mich Ihnen ein Beispiel geben. 

Wir haben also eine "Super" -Hashing-Funktion, die zwei Zahlen als Argument verwendet und einen "super sicheren" Hash-String zurückgibt:

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

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

So weit so gut, aber wir haben wenig Probleme mit dem obigen Ansatz, es ist eingeschränkt, funktioniert nur mit zwei Zahlen, das ist nicht dynamisch, lassen Sie es mit einer beliebigen Zahl funktionieren und Sie müssen kein Array übergeben (Sie können wenn Sie immer noch darauf bestehen). Ok, genug geredet, lass uns kämpfen!

Die natürliche Lösung wäre die Verwendung der arr.join-Methode:

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

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

Oh Mann. Leider funktioniert das nicht. Da wir Hash (Argumente) und Argumente aufrufen, ist das Objekt sowohl iterierbar als auch arrayartig, jedoch kein reales Array. Wie wäre es mit dem untenstehenden Ansatz?

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

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

Der Trick heißt method borrowing.

Wir leihen eine join-Methode aus einem regulären Array [].join. und verwenden [].join.call, um sie im Kontext von arguments auszuführen.

Warum funktioniert es?

Das liegt daran, dass der interne Algorithmus der nativen Methode arr.join(glue) sehr einfach ist.

Aus der Spezifikation fast "wie besehen" genommen:

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.

Technisch nimmt es dies und fügt diese [0], diese [1]… usw. zusammen. Es ist absichtlich so geschrieben, dass jedes Array wie dieses möglich ist (kein Zufall, viele Methoden folgen dieser Praxis). Deshalb funktioniert es auch mit this=arguments.

0
Humoyun

sie können den Spread-Operator in einer grundlegenderen Form verwenden

[].concat(...array)

im Fall von Funktionen, die Arrays zurückgeben, von denen jedoch erwartet wird, dass sie als Argumente übergeben werden

Beispiel:

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

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

0
rman