Array an eine Funktion in JavaScript übergeben

Um ein Array an eine JavaScript-Funktion zu übergeben, entscheiden Sie zuerst, ob die Funktion das Array als einen Wert oder seine Elemente als separate Positionsargumente erhalten soll. Übergeben Sie das Array direkt, wenn ein Array-Parameter erwartet wird. Verwenden Sie apply() oder die spread-Syntax, um einzelne Argumente zu übergeben. In einer gewöhnlichen Funktion können Sie ein übergebenes Array über arguments[0] auslesen. Welche Form passt, hängt von der Signatur der Funktion ab.

Die folgenden Beispiele sind eigenständige JavaScript-Codeausschnitte. Für die Beispiele mit apply(), spread und arguments wird die beobachtete Ausgabe gezeigt.

Mit apply() Array-Elemente als Funktionsargumente übergeben

Function.prototype.apply() ruft eine Funktion mit einem festgelegten this-Wert und einem Array oder arrayähnlichen Objekt auf, dessen Einträge zu Positionsargumenten werden. Der erste Parameter ist der this-Wert, der zweite die Argumentliste. apply() gibt kein arguments-Objekt zurück, sondern den Rückgabewert der aufgerufenen Funktion. Verwenden Sie diese Form, wenn Sie beim Übergeben einer Argumentliste auch this festlegen müssen.

Dieses Beispiel übergibt jedes Array-Element an den entsprechenden Parameter. Die Bezeichnung in der Ausgabe stammt vom ausgewählten this-Wert.

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(first, second, third, fourth) {
  console.log(`${this.label}: ${first}, ${second}, ${third}, ${fourth}`);
}

displayName.apply({ label: 'Names' }, names);

Names: Mehvish, John, Henry, Thomas

Erwartet die Funktion das Array als einen einzelnen Parameter, deklarieren Sie einen Parameter und übergeben Sie names direkt. Die Funktion erhält dann das vollständige Array als einzelnen Wert:

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(names) {
  console.log(names.join(', '));
}

displayName(names);

Diese Signatur unterscheidet sich von der Funktion displayName mit vier Parametern oben: Bei der direkten Übergabe erhält die Funktion ein Array-Argument, während apply() die vier Array-Elemente als vier separate Argumente übergibt. Die spread-Syntax erweitert die Elemente ebenfalls beim Funktionsaufruf.

Mit der Spread-Syntax Array-Elemente als Funktionsargumente übergeben

Die spread-Syntax (...) erweitert ein iterierbares Objekt wie ein Array beim Funktionsaufruf zu einzelnen Werten. Jeder Wert wird der Reihe nach einem Positionsparameter zugeordnet. Verwenden Sie diese Syntax, wenn die Funktion separate Argumente erwartet und Sie this nicht mit apply() festlegen müssen.

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(first, second, third, fourth) {
  console.log(`${first}, ${second}, ${third}, ${fourth}`);
}

displayName(...names);

Mehvish, John, Henry, Thomas

Hier erhält displayName vier Zeichenketten als Argumente. Im Gegensatz dazu übergibt displayName(names) ein Argument, dessen Wert das vollständige Array ist. Die deklarierten Parameter einer Funktion und der Funktionsaufruf sollten zur benötigten Datenform passen. Da der Spread-Ausdruck beim Aufruf steht, kann die Funktion gewöhnliche benannte Parameter beibehalten.

Mit dem Objekt arguments Funktionsargumente auslesen

Das Objekt arguments ist innerhalb einer gewöhnlichen Funktion verfügbar und enthält die bei diesem Aufruf übergebenen Werte. Es ist arrayähnlich und besitzt eine length-Eigenschaft sowie indizierte Einträge, ist aber kein Array. Insbesondere verfügt es nicht über alle Array-Methoden. Pfeilfunktionen definieren kein eigenes arguments-Objekt; verwenden Sie für dieses Muster daher eine gewöhnliche Funktion.

Wird eine Funktion einmal mit einem Array aufgerufen, befindet sich dieses Array in arguments[0] und arguments.length hat den Wert 1. Die Funktion kann das Array an diesem Index anschließend untersuchen oder durchlaufen. arguments beschreibt die Werte, die eine Funktion empfangen hat; es dient nicht dazu, ein Array zu übergeben.

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function inspectArguments() {
  console.log(arguments.length);
  console.log(arguments[0].join(', '));
}

inspectArguments(names);

1
Mehvish, John, Henry, Thomas

Um die arrayähnliche Sammlung arguments für Array-Methoden zu kopieren, verwenden Sie Array.from(arguments). Bei modernen Funktionen mit einer bekannten Menge an Eingaben sind benannte Parameter oder Rest-Parameter oft übersichtlicher. Übergeben Sie das Array direkt, wenn die Funktion es als Sammlung benötigt. Verwenden Sie apply() oder die spread-Syntax, wenn die Funktion seine Einträge als separate Parameter erwartet.