So verwenden Sie ES6-Argumente und -Parameter

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Entwickler verwenden ECMAScript 6-Features immer mehr und bald werden diese Features unvermeidlich sein. In diesem Tutorial erfahren Sie, wie ECMAScript 6 die Parameterbehandlung in JavaScript verbessert hat und vieles mehr.

ECMAScript 6 (oder ECMAScript 2015) ist die neueste Version des ECMAScript-Standards und hat die Parameterbehandlung in JavaScript erheblich verbessert. Wir können jetzt neben anderen neuen Funktionen Ruheparameter, Standardwerte und Destrukturierung verwenden.

In diesem Tutorial werden wir Argumente und Parameter im Detail untersuchen und sehen, wie ECMAScript 6 sie aktualisiert hat.

Argumente versus Parameter

Argumente und Parameter werden oft synonym bezeichnet. Dennoch werden wir für die Zwecke dieses Tutorials eine Unterscheidung treffen. In den meisten Standards werden Parameter (oder formale Parameter) in der Funktionsdeklaration angegeben, und Argumente (oder tatsächliche Parameter) werden an die Funktion übergeben. Betrachten Sie diese Funktion:

 function foo(param1, param2) { // do something } foo(10, 20);

In dieser Funktion sind param1 und param2 Funktionsparameter und die an die Funktion übergebenen Werte ( 10 und 20 ) sind Argumente.

Spread-Operator (…)

In ECMAScript 5 ist die apply() Methode ein bequemes Werkzeug, um ein Array als Argumente an eine Funktion zu übergeben. Beispielsweise wird es häufig mit der Methode Math.max() verwendet, um den höchsten Wert in einem Array zu finden. Betrachten Sie dieses Codefragment:

 var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50

Die Methode Math.max() unterstützt keine Arrays; es akzeptiert nur Zahlen. Wenn ein Array an die Math.max() -Funktion übergeben wird, wird ein Fehler ausgegeben. Aber wenn die apply() Methode verwendet wird, wird das Array als einzelne Zahlen gesendet, sodass die Math.max() Methode damit umgehen kann.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Glücklicherweise müssen wir mit der Einführung des Spread-Operators in ECMAScript 6 die apply() Methode nicht mehr verwenden. Mit dem Spread-Operator können wir einen Ausdruck einfach in mehrere Argumente erweitern:

 var myArray = [5, 10, 50]; Math.max(...myArray); // 50

Hier erweitert der Spread-Operator myArray , um einzelne Werte für die Funktion zu erstellen. Während die Simulation des Spread-Operators mit apply() in ECMAScript 5 möglich ist, ist die Syntax verwirrend und es fehlt die Flexibilität des Spread-Operators. Der Spread-Operator ist nicht nur einfacher zu bedienen, sondern bietet auch mehr Funktionen. Beispielsweise kann es mehrfach verwendet und mit anderen Argumenten in einem function gemischt werden:

 function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25

Ein weiterer Vorteil des Spread-Operators ist, dass er einfach mit Konstruktoren verwendet werden kann:

 new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Natürlich könnten wir den vorangehenden Code in ECMAScript 5 umschreiben, aber wir müssten ein kompliziertes Muster verwenden, um einen Typfehler zu vermeiden:

 new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Spread-Operator-Browser-Unterstützung in Funktionsaufrufen

Desktop-Browser:

Chrom Feuerfuchs Internet Explorer Microsoft Edge Oper Safari
46 27 Unterstützt 7.1

Mobile Browser:

Chrome für Android Firefox-Mobil Safari-Mobil Opera Mobile IE Mobil
46 27 8

Ruheparameter

Der rest-Parameter hat die gleiche Syntax wie der Spread-Operator, aber anstatt ein Array in Parameter zu erweitern, sammelt er Parameter und wandelt sie in ein Array um.

 function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]

Wenn keine Argumente vorhanden sind, wird der rest-Parameter auf ein leeres Array gesetzt:

 function myFunction(...options) { return options; } myFunction(); // []

Ein rest-Parameter ist besonders nützlich, wenn Sie eine variadische Funktion erstellen (eine Funktion, die eine variable Anzahl von Argumenten akzeptiert). Rest-Parameter haben den Vorteil, dass sie Arrays sind, und können problemlos das arguments -Objekt ersetzen (was wir später in diesem Tutorial erklären werden). Betrachten Sie diese in ECMAScript 5 geschriebene Funktion:

 function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

Diese Funktion prüft, ob ein String mehrere Teilstrings enthält. Das erste Problem bei dieser Funktion besteht darin, dass wir in den Rumpf der function schauen müssen, um zu sehen, dass sie mehrere Argumente akzeptiert. Das zweite Problem ist, dass die Iteration bei 1 statt bei 0 beginnen muss, da arguments[0] auf das erste Argument zeigt. Wenn wir später entscheiden, einen weiteren Parameter vor oder nach der Zeichenfolge hinzuzufügen, vergessen wir möglicherweise, die Schleife zu aktualisieren. Mit den restlichen Parametern vermeiden wir diese Probleme leicht:

 function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

Die Ausgabe dieser Funktion ist die gleiche wie die vorherige. Auch hier wird der Parameterstring mit dem zuerst übergebenen string gefüllt, aber die restlichen Argumente werden in einem Array abgelegt und der Variablen keys zugewiesen.

Die Verwendung des rest-Parameters anstelle des arguments -Objekts verbessert die Lesbarkeit des Codes und vermeidet Optimierungsprobleme in JavaScript. Dennoch ist der Ruheparameter nicht ohne Einschränkungen. Beispielsweise muss es das letzte Argument sein; Andernfalls tritt ein Syntaxfehler auf:

 function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

Eine weitere Einschränkung besteht darin, dass in der function nur ein rest-Parameter zulässig ist:

 function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

Rest-Parameter-Browser-Unterstützung

Desktop-Browser:

Chrom Feuerfuchs Internet Explorer Microsoft Edge Oper Safari
47 fünfzehn Unterstützt 34

Mobile Browser:

Chrome für Android Firefox-Mobil Safari-Mobil Opera Mobile IE Mobil
47 fünfzehn

Standardparameter

Standardparameter in ECMAScript 5

JavaScript unterstützt keine Standardparameter in ECMAScript 5, aber es gibt eine einfache Problemumgehung. Mit einem logischen OR Operator ( || ) innerhalb der Funktion können wir einfach Standardparameter in ECMAScript 5 simulieren. Betrachten Sie diese Funktion:

 function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10

Diese Funktion erwartet zwei Argumente, aber wenn sie ohne Argumente aufgerufen wird, verwendet sie die Standardwerte. Innerhalb der Funktion werden fehlende Argumente automatisch auf undefiniert gesetzt; Daher können wir diese Argumente erkennen und Standardwerte für sie deklarieren. Um fehlende Argumente zu erkennen und Standardwerte festzulegen, verwenden wir den logischen OR -Operator ( || ). Dieser Operator untersucht sein erstes Argument: Wenn es wahr ist, gibt der Operator es zurück; Ist dies nicht der Fall, gibt der Operator sein zweites Argument zurück.

Dieser Ansatz wird häufig in Funktionen verwendet, hat aber einen Fehler. Das Übergeben von 0 oder null löst ebenfalls einen Standardwert aus, da diese als falsche Werte betrachtet werden. Wenn wir also tatsächlich 0 oder null an diese Funktion übergeben müssen, bräuchten wir eine alternative Methode, um zu prüfen, ob ein Argument fehlt:

 function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10

Innerhalb dieser Funktion werden die Typen der übergebenen Argumente überprüft, um sicherzustellen, dass sie nicht definiert sind, bevor Standardwerte zugewiesen werden. Dieser Ansatz erfordert nur etwas mehr Code, ist aber eine sicherere Alternative und ermöglicht es uns, 0 und null an die Funktion zu übergeben.

Standardparameter in ECMAScript 6

Mit ECMAScript 6 müssen wir nicht mehr nach undefinierten Werten suchen, um Standardparameter zu simulieren. Wir können jetzt Standardwerte direkt in die function einfügen:

 function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null

Wie Sie sehen können, löst das Weglassen eines Arguments den Standardwert aus, aber das Übergeben von 0 oder null nicht. Wir können sogar Funktionen verwenden, um Werte für Standardparameter abzurufen:

 function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)

Beachten Sie, dass die getParam Funktion nur aufgerufen wird, wenn das zweite Argument weggelassen wird. Wenn wir also die Funktion multiply() mit zwei Parametern aufrufen, wird die Warnung nicht angezeigt.

Ein weiteres interessantes Merkmal von Standardparametern ist, dass wir in der function auf andere Parameter und Variablen verweisen können:

 function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4

Sie können sogar Operationen in der function ausführen:

 function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36

Beachten Sie, dass JavaScript im Gegensatz zu einigen anderen Sprachen Standardparameter zum Zeitpunkt des Aufrufs auswertet:

 function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]

Standard-Parameter-Browser-Unterstützung

Desktop-Browser:

Feature Chrom Feuerfuchs Internet Explorer Microsoft Edge Oper Safari
Grundlegende Unterstützung 49 fünfzehn 14
Parameter ohne Standardwerte nach Standardparameter 49 26 14

Mobile Browser:

Feature Chrome für Android Firefox-Mobil Safari-Mobil Opera Mobile IE Mobil
Grundlegende Unterstützung 49 fünfzehn
Parameter ohne Standardwerte nach Standardparameter 46 26

Destrukturieren

Die Destrukturierung ist eine neue Funktion in ECMAScript 6, die es uns ermöglicht, Werte aus Arrays und Objekten zu extrahieren und sie mithilfe einer Syntax, die Objekt- und Array-Literalen ähnelt, Variablen zuzuweisen. Die Syntax ist klar und leicht verständlich und ist besonders nützlich, wenn Argumente an eine Funktion übergeben werden.

In ECMAScript 5 wird ein Konfigurationsobjekt häufig verwendet, um eine große Anzahl optionaler Parameter zu handhaben, insbesondere wenn die Reihenfolge der Eigenschaften keine Rolle spielt. Betrachten Sie diese Funktion:

 function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);

Dieses Muster wird häufig von JavaScript-Entwicklern verwendet und funktioniert gut, aber wir müssen in den function schauen, um zu sehen, welche Parameter erwartet werden. Mit destrukturierten Parametern können wir die Parameter in der function eindeutig angeben:

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);

In dieser Funktion haben wir anstelle eines Konfigurationsobjekts ein Objektdestrukturierungsmuster verwendet. Das macht unsere Funktion nicht nur übersichtlicher, sondern auch lesbarer.

Wir können auch destrukturierte Parameter mit regulären kombinieren:

 function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);

Beachten Sie, dass ein Typfehler ausgelöst wird, wenn Parameter im function weggelassen werden:

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'

Dies ist das gewünschte Verhalten, wenn Parameter erforderlich sein müssen, aber was ist, wenn wir möchten, dass sie optional sind? Um diesen Fehler bei fehlenden Parametern zu vermeiden, müssen wir destrukturierten Parametern einen Standardwert zuweisen:

 function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error

In dieser Funktion wird ein leeres Objekt als Standardwert für die destrukturierten Parameter bereitgestellt. Wenn diese Funktion nun ohne Parameter aufgerufen wird, tritt kein Fehler auf.

Wir können jedem destrukturierten Parameter auch einen Standardwert zuweisen:

 function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }

In diesem Beispiel hat jede Eigenschaft einen Standardparameter, sodass wir nicht manuell nach undefinierten Parametern suchen und Standardwerte innerhalb des function zuweisen müssen.

Destrukturierung der Browserunterstützung

Desktop-Browser:

Feature Chrom Feuerfuchs Internet Explorer Microsoft Edge Oper Safari
Grundlegende Unterstützung 49 2.0 14 7.1
Destrukturierter Parameter mit Defaultwertzuweisung 49 47 14

Mobile Browser:

Feature Chrome für Android Firefox-Mobil Safari-Mobil Opera Mobile IE Mobil
Grundlegende Unterstützung 49 1 8
Parameter ohne Standardwerte nach Standardparameter 49 47

Argumente übergeben

Es gibt zwei Möglichkeiten, Argumente an eine Funktion zu übergeben: per Referenz oder per Wert. Das Ändern eines Arguments, das als Referenz übergeben wird, wird global widergespiegelt, aber das Ändern eines Arguments, das als Wert übergeben wird, wird nur innerhalb der Funktion widergespiegelt.

In einigen Sprachen wie Visual Basic und PowerShell haben wir die Möglichkeit anzugeben, ob ein Argument als Referenz oder als Wert übergeben werden soll, aber das ist bei JavaScript nicht der Fall.

Übergabe von Argumenten nach Wert

Technisch gesehen kann JavaScript nur als Wert übergeben werden. Wenn wir ein Argument als Wert an eine Funktion übergeben, wird eine Kopie dieses Werts innerhalb des function erstellt. Daher werden alle Änderungen am Wert nur innerhalb der function widergespiegelt. Betrachten Sie dieses Beispiel:

 var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5

Hier hat das Ändern des Arguments innerhalb der Funktion keine Auswirkung auf den ursprünglichen Wert. Wenn also die Variable von außerhalb der Funktion protokolliert wird, ist der gedruckte Wert immer noch 5 .

Übergabe von Argumenten per Referenz

In JavaScript wird alles als Wert übergeben, aber wenn wir eine Variable übergeben, die auf ein Objekt verweist (einschließlich Arrays), ist der „Wert“ eine Referenz auf das Objekt, und das Ändern einer Eigenschaft eines Objekts, auf das durch eine Variable verwiesen wird, ändert das zugrundeliegendes Objekt.

Betrachten Sie diese Funktion:

 function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value

Wie Sie sehen können, wird die Eigenschaft des Objekts innerhalb der Funktion geändert, aber der geänderte Wert ist außerhalb der Funktion sichtbar.

Wenn wir einen nicht primitiven Wert wie ein Array oder Objekt übergeben, wird im Hintergrund eine Variable erstellt, die auf den Speicherort des ursprünglichen Objekts im Speicher zeigt. Diese Variable wird dann an die Funktion übergeben, und ihre Änderung wirkt sich auf das ursprüngliche Objekt aus.

Geben Sie Überprüfung und fehlende oder zusätzliche Parameter ein

In einer stark typisierten Sprache müssen wir den Parametertyp in der function angeben, aber JavaScript fehlt diese Funktion. In JavaScript spielt es keine Rolle, welche Art von Daten oder wie viele Argumente wir an eine Funktion übergeben.

Angenommen, wir haben eine Funktion, die nur ein Argument akzeptiert. Wenn wir diese Funktion aufrufen, sind wir nicht darauf beschränkt, nur ein Argument an die Funktion zu übergeben; es steht uns frei, ein, zwei oder mehr Argumente weiterzugeben! Wir können uns sogar dafür entscheiden, überhaupt nichts weiterzugeben, und es werden keine Fehler auftreten.

Die Anzahl der Argumente und Parameter kann sich auf zwei Arten unterscheiden:

  • Weniger Argumente als Parameter .
    Die fehlenden Parameter entsprechen undefined .
  • Mehr Argumente als Parameter .
    Die zusätzlichen Parameter werden ignoriert, können aber über die speziellen Array-ähnlichen Variablenargumente abgerufen werden (wird als nächstes besprochen).

Obligatorische Argumente

Fehlt ein Argument in einem function , wird es auf undefined gesetzt. Wir können dieses Verhalten ausnutzen und einen Fehler ausgeben, wenn ein Argument weggelassen wird:

 function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }

In ECMAScript 6 können wir dies weiterführen und Standardparameter verwenden, um obligatorische Argumente festzulegen:

 function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter

Argumente-Objekt

Die Unterstützung für rest-Parameter wurde ECMAScript 4 mit der Absicht hinzugefügt, das arguments -Objekt zu ersetzen, aber ECMAScript 4 kam nie zum Tragen. Mit der Veröffentlichung von ECMAScript 6 unterstützt JavaScript nun offiziell die restlichen Parameter. Es hat auch den Plan zunichte gemacht, die Unterstützung für das arguments -Objekt einzustellen.

Das arguments -Objekt ist ein Array-ähnliches Objekt, das in allen Funktionen verfügbar ist. Es ermöglicht, dass die an die Funktion übergebenen Werte des argument nach Nummer statt nach Name abgerufen werden. Das Objekt ermöglicht es uns, eine beliebige Anzahl von Argumenten an eine Funktion zu übergeben. Betrachten Sie das folgende Codefragment:

 function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);

Diese Funktion erwartet, nur ein Argument zu erhalten. Wenn wir es mit zwei Argumenten aufrufen, ist das erste Argument in der Funktion über den Parameternamen param1 oder das Argumentobjekt arguments[0] zugänglich, aber das zweite Argument ist nur als arguments[1] zugänglich. Beachten Sie auch, dass das arguments Objekt in Verbindung mit benannten Argumenten verwendet werden kann.

Das arguments -Objekt enthält einen Eintrag für jedes Argument, das an die Funktion übergeben wird, und der Index des ersten Eintrags beginnt bei 0 . Wenn wir im obigen Beispiel auf mehr Argumente zugreifen wollten, würden wir arguments[2] , arguments[3] und so weiter schreiben.

Wir könnten sogar das Setzen benannter Parameter ganz überspringen und einfach das arguments Objekt verwenden:

 function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6

Tatsächlich sind benannte Parameter eine Annehmlichkeit, keine Notwendigkeit. Ebenso können die restlichen Parameter verwendet werden, um die übergebenen Argumente widerzuspiegeln:

 function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);

Das arguments -Objekt ist ein Array-ähnliches Objekt, aber es fehlen Array-Methoden wie slice() und foreach() . Um Array-Methoden auf das arguments -Objekt anzuwenden, muss das Objekt zunächst in ein echtes Array konvertiert werden:

 function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

In dieser Funktion wird Array.prototype.slice.call() verwendet, um das arguments -Objekt schnell in ein Array umzuwandeln. Als nächstes sortiert die Methode sort() die Elemente des Arrays und gibt sie zurück.

ECMAScript 6 hat einen noch einfacheren Weg. Array.from() , eine neue Ergänzung in ECMAScript 6, erstellt ein neues Array aus einem beliebigen Array-ähnlichen Objekt:

 function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

Die Längeneigenschaft

Obwohl das arguments-Objekt technisch gesehen kein Array ist, verfügt es über eine length -Eigenschaft, mit der die Anzahl der an eine Funktion übergebenen Argumente überprüft werden kann:

 function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3

Durch die Verwendung der Eigenschaft length haben wir eine bessere Kontrolle über die Anzahl der Argumente, die an eine Funktion übergeben werden. Wenn zum Beispiel eine Funktion zwei Argumente benötigt, um zu funktionieren, könnten wir die Eigenschaft length verwenden, um die Anzahl der übergebenen Argumente zu überprüfen, und einen Fehler ausgeben, wenn sie weniger als erwartet sind:

 function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }

Rest-Parameter sind Arrays, also haben sie eine length . In ECMAScript 6 kann der vorangehende Code mit Restparametern umgeschrieben werden:

 function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }

Die Eigenschaften des Aufgerufenen und des Anrufers

Die callee Eigenschaft bezieht sich auf die Funktion, die derzeit ausgeführt wird, und der caller bezieht sich auf die Funktion, die die derzeit ausgeführte Funktion aufgerufen hat. Im strengen Modus von ECMAScript 5 sind diese Eigenschaften veraltet, und der Versuch, auf sie zuzugreifen, verursacht einen TypeError.

Die Eigenschaft arguments.callee ist in rekursiven Funktionen nützlich (eine rekursive Funktion ist eine reguläre Funktion, die sich mit ihrem Namen auf sich selbst bezieht), insbesondere wenn der Funktionsname nicht verfügbar ist (eine anonyme Funktion). Da eine anonyme Funktion keinen Namen hat, kann nur mit arguments.callee darauf verwiesen werden.

 var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24

Arguments-Objekt im strengen und nicht strengen Modus

Im nicht strikten Modus von ECMAScript 5 hat das arguments -Objekt eine ungewöhnliche Funktion: Es hält seine Werte synchron mit den Werten der entsprechenden benannten Parameter.

Betrachten Sie das folgende Codefragment:

 function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500

Innerhalb dieser Funktion wird arguments[0] ein neuer Wert zugewiesen. Da die Werte von arguments immer mit den Werten benannter Parameter synchron bleiben, ändert die Änderung an arguments[0] auch den Wert von param . Tatsächlich sind sie wie zwei verschiedene Namen für dieselbe Variable. Im strengen Modus von ECMAScript 5 wurde dieses verwirrende Verhalten des arguments Objekts entfernt:

 "use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200

Diesmal wirkt sich das Ändern von arguments[0] nicht auf param , und die Ausgabe ist wie erwartet. Die Ausgabe dieser Funktion in ECMAScript 6 ist dieselbe wie im strikten Modus von ECMAScript 5, aber denken Sie daran, dass das arguments Objekt nicht betroffen ist, wenn Standardwerte in der function verwendet werden:

 function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');

Obwohl param3 einen Standardwert hat, ist er in dieser Funktion nicht gleich arguments[2] , da nur zwei Argumente an die Funktion übergeben werden. Mit anderen Worten, das Festlegen von Standardwerten hat keine Auswirkung auf das arguments Objekt.

Fazit

ECMAScript 6 hat Hunderte von kleinen und großen Verbesserungen für JavaScript gebracht. Immer mehr Entwickler verwenden ECMAScript 6-Funktionen, und bald werden diese Funktionen unvermeidlich sein. In diesem Tutorial haben wir gelernt, wie ECMAScript 6 die Parameterbehandlung in JavaScript verbessert hat, aber wir haben nur an der Oberfläche von ECMAScript 6 gekratzt. Viele andere neue und interessante Funktionen der Sprache sind einen Besuch wert.

Verknüpfungen

  • ECMAScript 6-Kompatibilitätstabelle, Juriy Zaytsev
  • „ECMAScript 2015 Sprachspezifikation“, ECMA International