So verwenden Sie optionale Funktionsparameter in JavaScript

In diesem kurzen Artikel besprechen wir die Verwendung optionaler Funktionsparameter in JavaScript.

JavaScript ist eine der Kerntechnologien des Internets. Es wird von den meisten Websites verwendet und von allen modernen Webbrowsern unterstützt, ohne dass Plugins erforderlich sind. In dieser Serie besprechen wir verschiedene Tipps und Tricks, die Ihnen bei Ihrer täglichen JavaScript-Entwicklung helfen.

Bei der JavaScript-Codierung müssen Sie Funktionsparameter häufig optional machen. Wenn Sie JavaScript-Funktionen verwenden, gibt es zwei Arten von Parametern: obligatorische Parameter und optionale Parameter. Bei obligatorischen Parametern müssen Sie diese übergeben, sonst gibt JavaScript einen Fehler aus. Wenn Sie optionale Parameter jedoch nicht übergeben, werden sie auf Standardwerte initialisiert.

Heute besprechen wir die Grundlagen optionaler Funktionsparameter in JavaScript und deren Verwendung.

So verwenden Sie optionale Funktionsparameter in ES5 und früheren Versionen

In diesem Abschnitt besprechen wir eine Lösung, die auch auf älteren Browsern funktioniert. Dies wurde bis zu den Tagen von JavaScript ES5 häufig verwendet, als es keine integrierte Unterstützung dafür gab, Funktionsparameter optional zu machen.

Lassen Sie uns anhand des folgenden Beispiels verstehen, wie es funktioniert.

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’;

  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

Im obigen Beispiel ist der Parameter getFullImagePath 函数采用两个参数：imagePath 和 imageBaseUrl。我们希望将第二个 imageBaseUrl optional, sodass Sie die Übergabe überspringen können, wenn Sie den Standardparameterwert verwenden möchten. Um es optional zu machen, verwenden wir die folgende Anweisung.

imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';

Grundsätzlich überprüfen wir den imageBaseUrl 变量是否已定义。如果它被定义并且计算结果为 TRUE，我们假设第二个参数可用，并且我们将使用它。另一方面，如果 imageBaseUrl 参数未定义或计算结果为 FALSE，我们将使用 https://code.tutsplus.com/-Wert als Standardwert für diesen Parameter. Es ist wichtig, dass optionale Parameter immer am Ende der Parameterliste erscheinen.

Bitte beachten Sie, dass diese Methode nicht mit numerischen Werten funktioniert, da sie den Wert überschreibt. 0。同样，如果您希望能够将 0 或 null Wenn Sie ihn an die Funktion übergeben, müssen Sie explizit prüfen, ob das Argument undefiniert ist.

function getFullImagePath(imagePath, imageBaseUrl) {
  imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl;
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

In diesem Fall prüfen wir explizit imageBaseUrl 参数的值是否为 undefined, um zu entscheiden, ob es sich um einen optionalen Parameter handelt. Dies ist eine einfachere Möglichkeit, festzustellen, ob ein Parameter optional ist.

So machen Sie Funktionsparameter in Browsern optional, die ES6+-Versionen nicht unterstützen. Im nächsten Abschnitt werden wir es im Kontext moderner Browser besprechen.

So verwenden Sie optionale Funktionsparameter in JavaScript ES6

In diesem Abschnitt besprechen wir Methoden, die in modernen Browsern verwendet werden können, die die ES6-Version von JavaScript unterstützen. Lassen Sie uns anhand des folgenden Beispiels verstehen, wie es funktioniert. Wir werden das im vorherigen Abschnitt besprochene Beispiel mit einer ES6-Version umschreiben.

function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') {
  var fullImagePath = imageBaseUrl + imagePath;

  return fullImagePath;
}

Wenn Sie andere Programmiersprachen verwendet haben, sind Sie möglicherweise mit der oben genannten Methode zum Definieren optionaler Funktionsparameter vertraut. In diesem Fall werden den optionalen Parametern in der Funktionsdeklarationsanweisung selbst Standardwerte zugewiesen.

Darüber hinaus können Sie mehrere optionale Parameter haben, wie im folgenden Codeausschnitt gezeigt, sofern Sie diese am Ende der Parameterliste definieren.

function foo(a, b=0, c=10) {
  //...
}

Wie Sie sehen, ist die JavaScript ES6-Syntax einfacher und leichter zu schreiben als die alte Methode.

Fazit

Heute haben wir zusammen mit einigen praktischen Beispielen die Verwendung optionaler Funktionsparameter in JavaScript besprochen.

Hier ist ein Vergleich verschiedener Möglichkeiten zur Kodierung optionaler Funktionsparameter in JavaScript:

Methode	Notizen
arg = arg ||默认值	Gebräuchliche Redewendung vor ES6, aber 0 和 null wird durch den Standardwert überschrieben.
arg = (typeof arg === '未定义') ?默认值：arg	Der einfachste Weg, optionale Parameter vor ES6 zu implementieren.
函数某事(arg=defaultValue) { }	Beste Methode für ES6 und neuere Versionen von JavaScript.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie optionale Funktionsparameter in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!