JavaScript Standardfunktionsparameter

Dieser Artikel erläutert JavaScript-Standardfunktionsparameter, die es ermöglichen, benannte Parameter mit Standardwerten zu initialisieren (wenn aktuelle Parameter nicht übergeben werden oder undefinedübergeben wird). Wir lernen den Unterschied zwischen benannten Parametern und tatsächlichen Parametern und deren Verwendung kennen.

Tatsächliche Parameter sind die tatsächlichen Werte, die von ihrem Aufrufer an die Funktion übergeben werden. Benannte Parameter verwenden Namen für die eigentlichen Parameter. Diese Namen sind den formalen Parametern in der Funktionsdefinition zugeordnet.

Die eigentlichen Parameter sind innerhalb des Funktionskörpers beschriftet. Bei benannten Parametern spielt die Reihenfolge keine Rolle, solange sie korrekt beschriftet sind.

JavaScript-Standardfunktionsparameter

Im folgenden Code wäre der Wert von num2 zwei (2), wenn beim Aufruf der Funktion sum() kein Wert übergeben wird (oder undefined übergeben wird).

function sum(num1, num2 = 2) {
  return num1 + num2;
}

console.log(sum(10, 3));         // expected output: 13
console.log(sum(3));             // expected output: 5
console.log(sum(3, undefined));  // expected output: 5

Was ist nun, wenn wir keine JavaScript-Standardfunktionsparameter verwenden? Siehe das unten angegebene Beispiel.

function sum(num1, num2) {
  return num1 + num2;
}

console.log(sum(10, 3));         // expected output: 13
console.log(sum(3));             // expected output: NaN
console.log(sum(3, undefined));  // expected output: NaN

Wir können die folgende Technik anwenden, um NaN (Not a Number) zu vermeiden. Der typeof prüft, ob der Wert oder Typ von num2 undefined ist, dann wäre der Wert von num2 1. typeof erlaubt Ihnen, alles zu übergeben, einschließlich null und false.

function sum(num1, num2) {
  num2 = (typeof num2 !== 'undefined') ? num2 : 1
  return num1 + num2;
}

console.log(sum(5, 2));  // expected output: 7
console.log(sum(5));     // expected output: 6

Bei Verwendung von ES2015 ist es nicht erforderlich, die Standardparameter im Funktionsrumpf anzugeben. Jetzt können wir innerhalb der Funktionsdefinition Standardwerte zuweisen. Überprüfen Sie den folgenden Beispielcode.

function sum(num1, num2 = 1) {
  return num1 + num2;
}

console.log(sum(5, 2));          // expected output: 7
console.log(sum(5));             // expected output: 6
console.log(sum(5, undefined));  // expected output: 6

Wir können auch eine andere Funktion als Standardwert aufrufen. Sehen Sie sich das folgende Beispiel an.

function multiply(num1 = 2, num2 = 3) {
  return num1 * num2;
}
function sum(num1, num2 = multiply()) {
  return num1 + num2;
}

console.log(sum(5, 2));          // expected output: 7
console.log(sum(5));             // expected output: 11
console.log(sum(5, undefined));  // expected output: 11

Lassen Sie uns üben, indem Sie die Zeichenkettendaten verwenden.

function greetings(
    name, greeting, message = greeting + ' ' + name + ', How are you?') {
  return message;
}
console.log(greetings('Mehvish', 'Hello'));
// expected output: "Hello Mehvish, How are you?"

console.log(greetings('Mehvish', 'Hello', 'What\'s up'));
// expected output: "What's up"

Wir haben Standardfunktionsparameter unter Verwendung von Zahlen, Zeichenketten und Funktionen untersucht. Lassen Sie uns verstehen, wie Standardwerte mit der Destrukturierungszuweisung festgelegt werden. Aber schauen Sie sich vorher an, was eine Destrukturierungszuweisung genau ist?

const person = {
  firstname: 'Mehvish',
  lastname: 'Ashiq',
  age: 30,
  email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} = person
console.log(firstname);
console.log(lastname);
console.log(email);

Ausgabe:

"Mehvish"
"Ashiq"
"delfstack@example.com"

Sie haben vielleicht bemerkt, dass wir die Eigenschaften des Objekts direkt in console.log und nicht in objectname.propertyname verwenden. Wenn Sie die Zeile const {firstname,lastname,age,email} = person auskommentieren, müssen Sie person.firstname, person.lastname, person.email für alle console.log-Anweisungen verwenden.

Also, was macht die folgende Codezeile? Es ist eine destrukturierende Aufgabe, was bedeutet, dass das Objekt entpackt wird. Im Moment haben wir minimale Eigenschaften im Objekt person.

Stellen Sie sich vor, wir haben Hunderte von Eigenschaften in einem Objekt und verwenden jedes Mal Objektname.Eigenschaftsname. Es wird chaotisch aussehen. Hier ist das Entpacken des Objekts sinnvoll.

Damit werden wir Objektname los. Teil und verwenden Sie nur propertyname.

const {firstname, lastname, age, email} = person;

Lassen Sie uns diese destrukturierende Zuweisung für JavaScript-Standardfunktionsparameter verwenden.

function displayPerson(lastname, firstname, email = 'mehvish.ashiq@gmail.com') {
  if (typeof email !== 'undefined') {
    console.log('not using default value of email');
    console.log(firstname, lastname, email);
  } else {
    console.log('using default value of email');
    console.log(firstname, lastname, email);
  }
}

const person = {
  firstname: 'Mehvish',
  lastname: 'Ashiq',
  age: 30,
  email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} =
    person  // destructure assignment (unpack the object)
displayPerson(age, firstname, email);
displayPerson(
    age,
    firstname);  // default value of email will be used in this function call

Ausgabe:

"not using default value of email"
"Mehvish", 30, "delfstack@example.com"
"not using default value of email"
"Mehvish", 30, "mehvish.ashiq@gmail.com"

In diesem Beispiel wird der Standardwert email verwendet, wenn der Anrufer ihn nicht passiert.