JavaScript-Grundlagen: Teil 5

Zuvor in JavaScript Essentials: Teil 4 haben wir if- und else-Anweisungen sowie for- und while-Schleifen besprochen. In diesem Teil betrachten wir Folgendes:

• Funktionen
• Rückrufe, Versprechen, asynchron und warten
• Das nächste große Ding

Kommentare

Kommentare sind großartig und wir werden jetzt darüber sprechen. Es ist so spät, dass Sie wissen sollten, was ein Kommentar ist. Ein Kommentar in unserem Programm wird jedenfalls nicht ausgeführt. Ein Kommentar soll unseren Code dokumentieren. Es gibt drei Möglichkeiten, Kommentare in Javascript hinzuzufügen. Wir haben Inline, Multiline und JsDoc.

Inline

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Mehrzeilig

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

JsDoc

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Kommentare können überall platziert werden; Seien Sie jedoch vorsichtig, wenn Sie sie nach (oder am Ende) einer Codezeile oder darunter oder darüber platzieren.

Semikolon

In Javascript ist das Semikolon ; nicht erforderlich, es hilft jedoch manchmal. Es gibt Tools, die Ihnen dabei helfen. Ein Semikolon gibt das Ende einer Anweisung an. Gut.

Vertiefung

Einrückungen werden verwendet, um den Code so anzuordnen, dass er klarer und leichter lesbar ist. Zum Einrücken wird die Tabulatortaste (auf der Tastatur) verwendet. Einrückungen sind manchmal „Tabulatoren“ oder „Leerzeichen“. Der Platz beträgt normalerweise 2 oder 4. Wenn Sie vscode verwenden, müssen Sie sich keine Sorgen machen.

Beispiele

Es gab einige Übungen aus JavaScript Essentials: Teil 4, die unter anderem „Fizzbuzz“, Passwort- und E-Mail-Validierung usw. beinhalteten. Wenn Sie meinem Pseudocode gefolgt wären, wären Sie auf einige Probleme gestoßen. Ich werde einen Ausschnitt bereitstellen, der die Bestellung berücksichtigt.

Fizzbuzz für eine einzelne Nummer

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Fizzbuzz für ein Array

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Passwortvalidierung

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Einige andere Lösungen würden verschachtelte if und else verwenden.

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Was haltet Ihr von den beiden Snippets? Praktisch ist der zweite Ausschnitt, auch wenn er funktioniert, nicht so toll.

Funktionen

Eine Funktion ist ein Codestück, das wiederverwendet werden kann. Normalerweise führt eine Funktion eine bestimmte Aufgabe aus. Eine Sache. Es kann alles sein.

Sehen wir uns die allgemeine Form (Struktur) einer Funktion in JavaScript an.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

• Funktion ist ein Schlüsselwort, das beim Erstellen einer Funktion erforderlich ist. Das Schlüsselwort for wird benötigt, wenn Sie eine for-Schleife verwenden möchten.
• functionName soll der Name sein, der der Funktion gegeben wird. Die Idee, eine Variable zu benennen, gilt für eine Funktion.
• /* Parameter */ bezieht sich auf die Daten, die Sie an die Funktion übergeben möchten.
• // etwas tun ist die Aktion oder Berechnung, die wir ausführen möchten. Funktionen geben normalerweise Daten zurück, nachdem eine bestimmte Verarbeitung abgeschlossen ist. Es gibt Zeiten, in denen das nicht der Fall ist. Es werden lediglich einige Daten aktualisiert und fertig.
• { // etwas tun } ist der Funktionskörper oder -block

Wir können eine Funktion haben, die „Hallo Welt“ ausgibt

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Wir haben uns den Gefallen getan, unserer Funktion einen Namen zu geben, der beschreibt, was die Funktion tut.

Wenn wir nun eine Funktion haben, müssen wir sie „aufrufen“, damit sie ausgeführt wird. Um eine Funktion aufzurufen, benötigen Sie den Namen der Funktion gefolgt von ( und ). Wenn die Funktion einen Parameter annimmt, würden Sie das Argument in ( und ) übergeben. In unserem Fall müssen wir für die Funktion „Hallo Welt“ Folgendes tun: printHelloWorld();.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Lassen Sie uns in eine kleine Richtung gehen, die unser Arsenal erweitert und dafür sorgt, dass das Erstellen von Funktionen Spaß macht. Betrachten Sie diese Funktion, die zwei Zahlen addiert und dann einen Text ausgibt, der Ihnen sagt, was passiert ist.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Bringt dich das auf Ideen? Wir können unser „Fizzbuzz“ und unsere Validierungen mithilfe von Funktionen schreiben. Wir können so geizig und empfindlich sein, dass wir jede Validierungsanforderung als Funktion schreiben. Es passiert. Übertreibe es einfach nicht.

Betrachten Sie nun die Add-Funktion. Was machen wir, wenn wir verschiedene Zahlen hinzufügen möchten? Wir können eine weitere Funktion erstellen. Wir können die Werte auch direkt ändern. Rechts? Ja. Sie werden staunen, was wir mit Funktionen erreichen können.

Wenn wir verschiedene Zahlen hinzufügen möchten, können wir zunächst die Zahlen ändern.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Okay, ändern wir die Funktion, um stattdessen 6 und 100 zu addieren. Jetzt müssen wir die Funktion ändern. Hierfür gibt es eine Lösung: Die Einführung von Parametern (Daten über Variablen). Dann würden wir diese Daten als Argumente übergeben.

Lassen Sie uns unsere Add-Funktion analysieren. Die Add-Funktion arbeitet mit x- und y-Operanden. Wir können unterschiedliche Werte an x ​​und y übergeben, indem wir x und y als Parameter übergeben.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Anstatt die Werte von x und y als interne Werte in add zu haben, übergeben wir sie. Der Unterschied zwischen Parametern und Argumenten besteht nun darin, dass Parameter beim Erstellen (Definieren) der Funktion übergeben werden. Argumente sind die Werte, die beim Aufruf der Funktion übergeben werden. In der Funktion add(x, y) sind x und y also Parameter (wir können Platzhalter sagen, die die an die Funktion zu übergebenden Daten darstellen). In add(3, 30); werden 3 und 30 als Argumente (die tatsächlich zu verarbeitenden Werte) übergeben. Beachten Sie, dass die Reihenfolge des Arguments und der Parameter übereinstimmen muss, sonst geraten wir in große Schulden.

Glauben Sie, dass es ausreicht, um es mit den großen Geschützen aufzunehmen? Nun, ich denke, das kannst du. Man muss nur ruhig sein und wissen, was man tut. Ich werde einige Ausschnitte bereitstellen.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Machen Sie dasselbe für das „Fizzbuzz“. Wickeln Sie eine Funktion um das Snippet. Sie müssen die verwendeten Variablen nicht kommentieren. Sehen Sie sich an, welche Daten an die Funktion (Eingabe) übergeben werden müssen.

Wir können beliebig viele Parameter an eine Funktion übergeben. Ich möchte Sie jedoch dazu ermutigen, einige Grenzen zu setzen. Es gibt einige Fachleute, die sagen, dass drei davon ausreichen. Manche sagen von weniger als fünf. Da muss man schlau sein. Nehmen wir zunächst an, dass wir immer dann, wenn die Anzahl der Parameter drei überschreitet, ein Array oder ein Objekt verwenden würden. Ja. Wir können ein Array oder ein Objekt als Argument übergeben.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Schreiben Sie eine Funktion, die den Durchschnitt einer Reihe von Zahlen berechnet, indem Sie diese Funktion vervollständigen.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

An dieser Stelle sollte klar sein, dass Funktionen Argumente annehmen können. Praktischerweise geben unsere Funktionen einen Wert oder einen anderen Wert zurück, nachdem eine Berechnung abgeschlossen ist. Der berechnete Wert wird von der Funktion zurückgegeben. Eine Funktion, die einen Wert zurückgibt, hat die Form:

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

• // return someValue ist das einzig Neue hier. return ist ein Schlüsselwort.
• someValue ist der von der Funktion zurückgegebene Wert. Und es könnte alles bis nichts sein, eine leere Funktion. Mach dir keine Sorgen. Wir werden einige dieser Funktionen, die wir zuvor geschrieben haben, ändern, damit die Dinge einfacher werden.

Erinnern Sie sich an die Add-Funktion? Anstatt den Wert innerhalb der Funktion zu protokollieren, geben wir ihn zurück und weisen diesen Wert einer Variablen zu und verwenden den Wert später wieder.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Das ist so einfach, wie wir es ausdrücken können. Machen Sie dasselbe für die Funktion „calcInterest“.

Eine Funktion kann alles zurückgeben, was zurückgegeben werden kann.

Pfeilfunktionen

Eine Pfeilfunktion ist eine andere Möglichkeit, eine Funktion zu schreiben. Normalerweise verwende ich Pfeilfunktionen, wenn ich eine einfache Funktion habe, die eine sehr kleine „Sache“ ausführt, oder in Array- oder String-Methoden für Schleifen. Sie können es anstelle der Funktionsdeklarationen (benannte Funktionen) verwenden. Wir sagen Funktion, um anzuzeigen, dass wir eine Funktion erstellen möchten. Pfeilfunktionen haben die gleichen Funktionen wie die deklarative Funktion.

Pfeilfunktionen werden wegen =>, dem Fettpfeiloperator, so genannt. Es hat die Form, die Sie vielleicht schon einmal gesehen haben:

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

oder

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Lassen Sie uns die Add-Funktion mithilfe der Pfeilfunktion neu schreiben.

function functionName(/* parameters */) {
  // do something
}

=> gibt eine Rückgabe des Werts aus dem x-y-Express an. Daher wird das Schlüsselwort return implizit verwendet. Auch hier können wir mit dem Schlüsselwort return explizit einen Wert von der Funktion zurückgeben, allerdings müssen wir den Funktionsblock hinzufügen.

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Der Unterschied zwischen den beiden besteht darin, dass wir im zweiten einen Block, { und }, und ein Rückgabeschlüsselwort hinzugefügt haben, das einen Wert von der Funktion zurückgibt. Auch hier können Sie wählen, ob Sie einen Wert zurückgeben möchten oder nicht.

Übergabe von Funktionen als Argumente

Wir können Funktionen als Argumente an andere Funktionen übergeben. Im Wesentlichen behandeln wir Funktionen als Werte. Betrachten wir dieses triviale Beispiel.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Ein weiterer Ort, an dem wir dies tun können, sind Array-Methoden oder String-Methoden. Betrachten Sie diese Funktion

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Wir können sehen, dass wir die Rückruffunktion (total, element) => Gesamtelement, 0. Tatsächlich ist es das Gesamtelement, das wir ersetzen können.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Sie wissen, dass wir eine weitere Funktion übergeben, die ein Argument mit zwei Zahlen annimmt und eine Zahl zurückgibt. Wir müssen nicht einmal eine Funktion erstellen.

Wir haben bereits einige Berechnungen durchgeführt, aber dieses Mal werden wir Funktionen verwenden, um die Operatoren zu abstrahieren.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Der letzte Parameter wird als Standardparameter bezeichnet und normalerweise als
platziert das letzte Argument. Das ist etwas, was Sie tun müssen, wenn Sie es wollen
Standardwerte verwenden. Dieses Snippet unterscheidet sich nicht wesentlich vom vorherigen
eins mit Ausnahme der Einführung des Standardparameters, was für das dritte bedeutet
Argument, wir können wählen, ob wir dafür einen Wert übergeben möchten oder nicht.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

In const total = performActionOnArray(numArray, add); wir hätten eine Funktion direkt übergeben können

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Versprechen

Lassen Sie uns zunächst einige Begriffe definieren. Versprechen sind in unserer Nische wichtig.

Synchronbetrieb: Dabei handelt es sich um Vorgänge, die sequentiell, von oben nach unten, nacheinander ausgeführt werden. Bei einigen Vorgängen A1 und A2 muss A1 abgeschlossen sein, bevor A2 ausgeführt wird. Auf diese Weise wird A2 erst bei A1 ausgeführt. Es wird jeweils eine Operation ausgeführt. Dieser Nachteil wird als Blockierung bezeichnet.

function functionName(/* parameters */) {
  // do something
}

Die Ausgabe für das Obige erfolgt in der oben beschriebenen linearen Reihenfolge.

// function to print "hello world"
function printHelloWorld() {
  console.log("Hello world");
}

Kurz gesagt, der Code, den wir bisher geschrieben haben, wird alle in einer synchronen Reihenfolge ausgeführt und wir können erkennen, wann eine Zeile ausgeführt wird.

Asynchrone Operationen: Dies sind Operationen, die nicht sequentiell ausgeführt werden. Diese Vorgänge werden gleichzeitig ausgeführt. Dabei kann es sich um mehrere Vorgänge handeln, die praktisch Stück für Stück gleichzeitig ablaufen. Da der Erfolg oder die Ausführung einer Operation unabhängig von der Reihenfolge ist und die Ausführung anderer Zeilen nicht behindert, nennen wir dieses Verhalten nicht blockierend. Wir können nicht sagen, wann eine asynchrone Zeile ausgeführt wird.

printHelloWorld();

// the output of this function will be on the console/terminal

Und das ist die Ausgabe.

function add() {
  const x = 3;
  const y = 20;

  const sum = x + y;

  console.log(`${x} + ${y} = ${sum}`);
}

add(); // 3 + 20 = 23

Können Sie den asynchronen Vorgang anhand der Ausgabe identifizieren?

Es ist die setTimeout-Funktion. Nehmen wir an, es läuft im Hintergrund. Es ist nicht blockierend, daher wurde das letzte console.log ausgeführt.

Einige asynchrone Vorgänge

• Netzwerkanfragen (z. B. API-Aufrufe)
• Datenbankabfragen
• Datei-E/A-Vorgänge
• Javascript-Web-APIs (setTimeout, setInterval, fetch usw.)

Ein Versprechen bietet ein Mittel zur Verwaltung oder Abwicklung asynchroner Vorgänge. Auf diese Weise können Sie feststellen, in welchem ​​Zustand sich ein asynchroner Vorgang befindet, wann er ausgeführt wird und ob er „erfüllt“ ist oder fehlgeschlagen ist.

Lasst uns ein Versprechen schaffen

Ein Versprechen hat die Form:

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Neu und Versprechen sind Schlüsselwörter. „resolve“ und „reject“ sind Rückruffunktionen. Wir können sie durch andere Namen ersetzen. Bei der Konvertierung verwenden wir „Auflösen“ und „Ablehnen“.

Halten Sie ein Versprechen ein

Promise hat dann eine Methode, die den aufgelösten Wert bereitstellt, eine Catch-Methode, die den zurückgewiesenen Fehler bereitstellt, und schließlich gibt es eine Möglichkeit, nach dem gesamten Prozess aufzuräumen. „final“ ist allerdings optional. Hier ist ein einfaches Beispiel, mit dem Sie spielen können.

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Sehen Sie sich die Ausgabe an und sehen Sie, wie der Code ausgeführt wird. console.log("Bye"); war nicht der letzte, der hingerichtet wurde. Wir haben unseren asynchronen Vorgang mithilfe eines Versprechens erstellt und ihn mithilfe von „then“ und „catch“ abgewickelt. Wenn wir darüber nachdenken, diese Operationen der Reihe nach auszuführen, können oder müssen wir die verbleibende Logik in den Then-Block einfügen.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Was ist passiert?

Das Problem bei diesem Ansatz zum Umgang mit Versprechen besteht darin, dass wir dazu neigen, diesen Vorgang zu verschachteln oder zu verketten, wodurch der Then-Block dicker wird und er nicht so benutzerfreundlich ist. Schauen wir uns also Async an und warten ab.

asynchron und warten

Im normalen Datenfluss möchten wir nicht, dass der asynchrone Vorgang im Hintergrund ausgeführt wird. Wir wollen ihm zuhören und sein Ergebnis nutzen, um etwas anderes zu tun (wie wir es damals getan haben und fangen).

Lassen Sie uns einen asynchronen Vorgang erstellen und ihn mit „async“ und „await“ verarbeiten.

Wir wissen, wie man benannte Funktionen und Pfeilfunktionen erstellt.

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Um eine Funktion asynchron zu machen, verwenden wir das Schlüsselwort async.

const numbers = [3, 6, 10, 15];

for (const givenNumber of numbers) {
  if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
    console.log("fizzbuzz");
  } else if (givenNumber % 3 === 0) {
    console.log("fizz");
  } else if (givenNumber % 5 === 0) {
    console.log("buzz");
  }
}

Was auch immer die Operation nun in den Block der Funktion einfügt und sagen wir, in die asynchrone Funktion, die wir erstellen möchten, wir müssten uns mit einer weiteren asynchronen Operation befassen, dann können wir das Warten verwenden.

const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length !== 6) {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}
// - start with uppercase p, 'P'
else if (!veryWeakPassword.startsWith("P")) {
  console.log(
    `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
      "P"
    )} that "${veryWeakPassword}" starts with 'P'`
  );
}
// - end with underscore
else if (!veryWeakPassword.endsWith("_")) {
  console.log(
    `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
      "_"
    )} that "${veryWeakPassword}" ends with '_'`
  );
}
// - have uppercase q, 'Q'
else if (!veryWeakPassword.includes("Q")) {
  console.log(
    `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
      "Q"
    )} that "${veryWeakPassword}" has 'Q'`
  );
}
// - have lowercase r, 'r'
else if (!veryWeakPassword.includes("r")) {
  console.log(
    `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
      "r"
    )} that "${veryWeakPassword}" has 'r'`
  );
}
// - have its fifth character as uppercase v, 'V'
// fifth character with have index = fifth position - 1 = 4
// const fifthCharacter = veryWeakPassword[4]
else if (veryWeakPassword.charAt(4) !== "V") {
  console.log(
    `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
      4
    )}'`
  );
} else {
  console.log(`${veryWeakPassword} is a valid password`);
}

Das Warten weist Javascript an, zu „warten“ und den aufgelösten oder erfüllten Wert aus dem Versprechen zu erhalten.

// password validation
const veryWeakPassword = "PrQ1V_";
// const veryWeakPassword = "rtfy67Fg";
// const veryWeakPassword = "OlJgRc__1qwPVa";
console.log(`Password validation for "${veryWeakPassword}"`);

// - be six characters
if (veryWeakPassword.length === 6) {
  if (veryWeakPassword.startsWith("P")) {
    if (veryWeakPassword.endsWith("_")) {
      if (veryWeakPassword.includes("Q")) {
        if (veryWeakPassword.includes("r")) {
          if (veryWeakPassword.charAt(4) === "V") {
            console.log(`${veryWeakPassword} is a valid password`);
          } else {
            console.log(
              `- Password must have its fifth character as uppercase v, 'V' => "${veryWeakPassword}" has its 5th character as '${veryWeakPassword.charAt(
                4
              )}'`
            );
          }
        } else {
          console.log(
            `- Password must have lowercase r, 'r' => it is ${veryWeakPassword.includes(
              "r"
            )} that "${veryWeakPassword}" has 'r'`
          );
        }
      } else {
        console.log(
          `- Password must have uppercase q, 'Q' => it is ${veryWeakPassword.includes(
            "Q"
          )} that "${veryWeakPassword}" has 'Q'`
        );
      }
    } else {
      console.log(
        `- Password must end with '_' => it is ${veryWeakPassword.endsWith(
          "_"
        )} that "${veryWeakPassword}" ends with '_'`
      );
    }
  } else {
    console.log(
      `- Password must start with 'P' => it is ${veryWeakPassword.startsWith(
        "P"
      )} that "${veryWeakPassword}" starts with 'P'`
    );
  }
} else {
  console.log(
    `- Password must have 6 characters => "${veryWeakPassword}" has '${veryWeakPassword.length}' characters`
  );
}

Wenn wir das obige Snippet ausführen, erhalten wir eine Fehlermeldung ähnlich der folgenden: Warnung: Um ein ES-Modul zu laden, legen Sie „type“: „module“ in package.json fest oder verwenden Sie die Erweiterung .mjs.

Wir können dieses Problem leicht beheben. Führen Sie den Befehl npm init -y aus. Gehen Sie in die Datei package.json und fügen Sie die Zeile „type“: „module“ hinzu. Die package.json sollte wie folgt aussehen:

// this is a number
const numberOfBirds = 3;

// the above comment is useless since the initial value assigned to the variable
// is physically a number and the variable name also has a number in it
// so use comments wisely by using proper naming

Führen Sie nun das Snippet erneut aus und Sie sollten eine Ausgabe ähnlich der von
erhalten

/* 
Everything in here is or will be ignored.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


*/

const emptyString = "";

Nehmen wir nun an, wir möchten den Promise-Ablehnungsfehler behandeln. Falls dies nicht der Fall ist, müssen wir die Try-and-Catch-Klausel um den asynchronen Aufruf herum verwenden.

/**
 * This is a multiline comment
 *
 * But used for documentation
 */

Es wird keine Ablehnung des Versprechens geben, da wir const result = true setzen. Setzen Sie es auf „false“. Und unsere Ausgabe sollte ähnlich sein wie

const givenNumber = 3;

if (givenNumber % 3 === 0 && givenNumber % 5 === 0) {
  console.log("fizzbuzz");
} else if (givenNumber % 3 === 0) {
  console.log("fizz");
} else if (givenNumber % 5 === 0) {
  console.log("buzz");
}

Der Zweck des Gesprächs über Versprechen und Asynchronität und Warten besteht also darin, Sie wissen zu lassen, dass wir das häufig tun werden. Sehen Sie sich die oben aufgeführten Beispiele für asynchrone Vorgänge an.

asynchron und warten, versuchen und fangen und schließlich sind Schlüsselwörter.

Abschluss

An diesem Punkt, an dem wir Funktionen und Versprechen und den Umgang mit ihnen besprochen haben, sind wir meiner Meinung nach zu etwa 50 % mit dem „Wissen“ ausgestattet, Daten (Fluss) zu manipulieren. Was bleibt, ist, sich an das Schreiben von Javascript-Code zu gewöhnen und ein kompetenter Javascript-Programmierer zu sein. Machen Sie sich mit JavaScript die Hände schmutzig. Nur so programmieren Sie eine Backend-API und fühlen sich nicht eingeschränkt, weil Sie die Idee haben, aber nicht wissen, was Sie tun sollen.

Als nächstes müssen Sie etwas Code schreiben und einige Probleme lösen und dann tatsächlich mit der Entwicklung von APIs beginnen. Das werden wir als Nächstes tun. Ich empfehle Ihnen jedoch, sich die folgenden Ressourcen anzusehen.

Ressource

Dies sind Materialien, die zum Verständnis von Promises, Async und Wait sowie der Ereignisschleife hilfreich sein werden.

• Was zum Teufel ist eigentlich die Ereignisschleife? | Philip Roberts | JSConf EU
• Node.js animiert: Ereignisschleife
• JavaScript visualisiert – Ereignisschleife, Web-APIs, (Mikro-)Aufgabenwarteschlange
• JavaScript-Versprechen in 10 Minuten
• Wie JavaScript-Versprechen funktionieren – Tutorial für Anfänger

Dies sind einige Übungen, die Sie gerne ausprobieren würden.

• Übung – Javascript
• jschallenger – Javascript-Grundlagen
• Codecademy – 10 Javascript-Code-Herausforderungen-für-Anfänger
• TheOdinProject-javascript-exercises
• Codewars – Javascript
• RepublicServicesRepository-javascript-exercises
• leonardomso – 33-js-concepts
• Das ist eine gute Lektüre, getify – You-Dont-Know-JS
• Die Algorithmen – Javascript
• denysdovhan - wtfjs
• w3schools – js-Übung

Das obige ist der detaillierte Inhalt vonJavaScript-Grundlagen: Teil 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!