Zusammenfassung einiger effizienter magischer Operatoren in JS

JavaScript veröffentlicht mittlerweile jedes Jahr eine neue Version, die auch einige neue Operatoren hinzufügt, die bequemer und effizienter sind. Heute werden wir uns einige effiziente Zauberkünstler genauer ansehen.

1. Optionaler Verkettungsoperator

Wenn wir bisher eine Eigenschaft mit einer tieferen Struktur verwenden wollten und nicht sicher sein konnten, dass alle übergeordneten Elemente vorhanden waren, mussten wir eine Reihe von Beurteilungen vornehmen, beispielsweise hinsichtlich einer Datenstruktur:

const Schüler = {
  Punktzahl: {
    Mathematik: 98,
  },
};

Wenn wir den Wert des innersten mathematischen Attributs erhalten möchten:

wenn (Student && Student.Score) {
  Konsole.log(Studentenscore.Mathe);
}

1.1 Holen Sie sich tiefe Eigenschaften

Wenn wir jedoch den optionalen Verkettungsoperator verwenden, wird die Beurteilung viel einfacher. Wenn der optionale Verkettungsoperator in der Kette auf null oder undefined stößt, gibt er direkt undefined zurück, ohne eine Fehlerausnahme auszulösen:

Konsole.log(Schüler?.Punktzahl?.Mathe);

1.2 Ausführen einer optionalen Methode

Es kann auch beim Ausführen einer möglichen Funktion verwendet werden. Beispielsweise ist in einer React-Komponente die übergebene Methode optional:

// getScore ist ein optionaler Parameter, entweder nicht definiert oder eine Funktion const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    // Wenn getScore vorhanden ist, führen Sie die Methode getScore() normal aus getScore?.();
  }, []);

  zurückgeben <div></div>;
};

Oder wir können es auch verwenden, wenn wir eine Methode eines DOM-Elements ausführen.

document.querySelector gibt zwei Typen zurück. Wenn das DOM-Element tatsächlich existiert, wird das Element zurückgegeben, andernfalls wird null zurückgegeben. Jeder, der schon einmal Typescript geschrieben hat, weiß, dass wir beim Aufrufen einer Methode immer sicherstellen müssen, dass das DOM-Element vorhanden ist:

const dom = document.querySelector('.score');
wenn (dom) {
  dom.getBoundingClientRect(); //Diese Methode wird nur ausgeführt, wenn das Dom-Element vorhanden ist}

Wenn Sie den optionalen Verkettungsoperator verwenden, rufen Sie ihn einfach direkt auf:

: Dokument.QuerySelector('.score')?.getBoundingClientRect();

1.3 Holen Sie sich den Wert im Array

Wenn das Array existiert, holen wir uns den Wert eines bestimmten Index. Wir müssen nicht mehr feststellen, ob das Array existiert, sondern können direkt Folgendes verwenden:

arr?.[1]; // Wenn arr existiert, hole den Wert in arr[1] normal

Die oben genannten drei Situationen können auch kombiniert auftreten. Wenn eine Struktur komplexer ist, gibt es verschiedene Typen. Hier müssen wir die Array-Math-Index-2-Methode ausführen:

const Schüler = {
  Punktzahl: {
    Mathematik: [
      98,
      67,
      () => {
        Rückgabe 99;
      },
    ],
  },
};

implementieren:

Schüler?.Punktzahl?.Mathe?.[2]?.(); // 99

Gibt es eine solche Operation?

1.4 Zuweisungsvorgang kann nicht durchgeführt werden

Der optionale Verkettungsoperator kann nur Get-Operationen, keine Zuweisungsoperationen ausführen.

Wenn beispielsweise einem möglichen Array oder DOM-Element ein Wert zugewiesen wird, wird direkt eine Syntaxausnahme ausgelöst:

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

Wenn wir die obige Anweisung ausführen, wird die folgende Eingabeaufforderung angezeigt:

Nicht abgefangener Syntaxfehler: Ungültige linke Seite in der Zuweisung

Das heißt, der optionalen Kette auf der linken Seite kann kein Wert zugewiesen werden.

2. Doppelter Fragezeichenoperator

Der Operator mit dem doppelten Fragezeichen ?? ist, so wie ich es verstehe, dazu gedacht, den ODER-Operator || zu lösen.

Sehen wir uns zunächst die Funktionsweise des Operators „oder“ an. Wenn die Daten auf der linken Seite einen falschen Wert aufweisen (die Zahl 0, Boolescher Typ „false“, leere Zeichenfolge, undefiniert, null), wird die Anweisung auf der rechten Seite ausgeführt.

falsch || 123;
0 || 123;
'' || '123';
undefiniert || 123;
null || 123;

In manchen Fällen sind „false“ und „0“ beides normale Werte, aber die Verwendung des „or“-Operators führt zu einem Fehler.

Wenn im folgenden Beispiel beispielsweise „score“ leer ist, ist der Standardwert „1“. Bei Eingabe des normalen Wertes 0 sollte 0 zurückgegeben werden (tatsächlich wird aber 1 zurückgegeben):

const getSCore = (Punktzahl: Zahl) => {
  Rückgabewert || 1;
};

getScore(0); // 1

Derzeit verwenden wir den Operator „??“ mit doppeltem Fragezeichen. Der Operator mit dem doppelten Fragezeichen führt die Anweisung auf der rechten Seite nur dann aus, wenn die linke Seite undefiniert oder null ist.

const getSCore = (Punktzahl: Zahl) => {
  Rückgabewert: 1;
};

getScore(0); // 0

Gleichzeitig kann der Operator mit doppeltem Fragezeichen auch mit = kombiniert werden, um eine Zuweisungsoperation zu werden. Wenn die linke Seite null oder undefiniert ist, wird das Ergebnis der Anweisung auf der rechten Seite der Variablen auf der linken Seite zugewiesen:

Punktzahl ??= 1; // 1

Ich lese viel, ich werde dich nicht anlügen

3. Zuweisungsoperationen von ODER und UND

Als wir zuvor den „oder“-Operator zum Durchführen von Zuweisungsoperationen verwendet haben, haben wir ihn folgendermaßen geschrieben:

Punktzahl = Punktzahl || 1;
Alter = Alter && 24;

Jetzt kann es wie folgt abgekürzt werden:

Punktzahl || = 1; // entspricht Punktzahl = Punktzahl || 1
Alter &&= 24; // entspricht Alter = Alter && 24

4. Doppelter Sternchenoperator

Der Doppelsternchen-Operator ** wurde relativ früh in js eingeführt, wir verwenden ihn aber selten. Tatsächlich führt es eine Potenzoperation aus, die Math.pow() entspricht.

2 ** 10; // 1024, 2 hoch 10, entspricht Math.pow(2, 10);

5. Fazit

Alle oben genannten Beispiele wurden erfolgreich auf Chrome 90 ausgeführt.

Wenn wir bereits über Babel als Konvertierungshilfe verfügen, können wir diese Operatoren entsprechend im Code anwenden, was unseren Code erheblich vereinfachen kann.

Damit ist dieser Artikel über die Zusammenfassung einiger effizienter Operatoren in JS abgeschlossen. Weitere relevante effiziente JS-Operatoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!