Geben Sie einige Tipps zur Verwendung von JavaScript-Operatoren

Im Entwicklungsprozess von ECMAScript wird es viele funktionale Updates geben, wie z. B. Zerstörung, Pfeilfunktionen und Module. Sie werden die Art und Weise, wie JavaScript geschrieben wird, stark verändern. Manchen Leuten wird es gefallen, anderen nicht, aber wie bei jeder neuen Funktion werden wir uns irgendwann daran gewöhnen. Die neue Version von ECMAScript führt drei neue logische Zuweisungsoperatoren ein: den Nulloperator, den AND-Operator und den OR-Operator. Die Einführung dieser Operatoren soll unseren Code auch übersichtlicher und prägnanter machen. Hier sind einige elegante Tipps zur Verwendung von JavaScript-Operatoren.

1. Optionaler Verkettungsoperator [? .】

Der optionale Verkettungsoperator befindet sich in Phase 4 des ES2020-Vorschlags und sollte daher der Spezifikation hinzugefügt werden. Dadurch ändert sich die Art und Weise, wie Sie auf die internen Eigenschaften eines Objekts zugreifen, insbesondere auf tief verschachtelte Eigenschaften. Es ist auch als Funktion in TypeScript 3.7+ verfügbar.

Ich glaube, dass die meisten Freunde, die Front-Ends entwickeln, auf Null- und undefinierte Eigenschaften stoßen werden. Aufgrund der dynamischen Natur der JS-Sprache ist es unmöglich, ihnen nicht zu begegnen. Insbesondere beim Umgang mit verschachtelten Objekten kommt der folgende Code sehr häufig vor:

wenn (Daten && Daten.Kinder && Daten.Kinder[0] && Daten.Kinder[0].Titel) {
    // Ich habe einen Titel!
}

Der obige Code ist für eine API-Antwort, bei der ich das JSON analysieren muss, um sicherzustellen, dass der Name existiert. Allerdings können solche Situationen auftreten, wenn Ihre Objekte optionale Eigenschaften haben oder einige Konfigurationsobjekte dynamische Zuordnungen bestimmter Werte aufweisen, in denen Sie viele Randbedingungen überprüfen müssen.

Wenn wir an dieser Stelle den optionalen Verkettungsoperator verwenden, wird alles noch einfacher. Es überprüft für uns verschachtelte Eigenschaften, ohne dass wir die Leiter explizit durchsuchen müssen. Wir müssen lediglich den Operator „?“ nach der Eigenschaft verwenden, die wir auf Nullwerte überprüfen möchten. Wir können diesen Operator in einem Ausdruck beliebig oft verwenden und er wird frühzeitig zurückgegeben, wenn ein Begriff nicht definiert ist.

Für statische Eigenschaften gilt:

Objekt?.Eigenschaft

Ändern Sie für dynamische Eigenschaften Folgendes in:

Objekt?.[Ausdruck] 

Der obige Code kann wie folgt vereinfacht werden:

let title = Daten?.Kinder?.[0]?.Titel;

Wenn wir dann haben:

Daten lassen;
console.log(Daten?.Kinder?.[0]?.Titel) // undefiniert

Daten = {Kinder: [{Titel:'codercao'}]}
console.log(Daten?.Kinder?.[0]?.Titel) // codercao

Ist es nicht einfacher, so zu schreiben? Da der Operator beendet wird, sobald er einen Nullwert erreicht, können Sie ihn auch verwenden, um Methoden bedingt aufzurufen oder bedingte Logik anzuwenden.

const bedingteEigenschaft = null;
lass Index = 0;

console.log(bedingteEigenschaft?.[index++]); // undefiniert
konsole.log(index); // 0

Sie können den Methodenaufruf wie folgt schreiben:

Objekt.runsOnlyIfMethodExists?.()

Wenn wir beispielsweise parent.getTitle() direkt für das übergeordnete Objekt unten aufrufen, erhalten wir die Fehlermeldung „Uncaught TypeError: parent.getTitle ist keine Funktion und parent.getTitle?.() wird beendet, ohne ausgeführt zu werden.“

lass Elternteil = {
    Name: "Elternteil",
    Freunde: ["p1", "p2", "p3"],
    getName: Funktion() {
      console.log(dieser.Name)
    }
  };
  
  übergeordnetes Element.getName?.() // übergeordnetes Element
  parent.getTitle?.() //Wird nicht ausgeführt

Verwendung bei ungültiger Zusammenführung

Bietet eine Möglichkeit, undefinierte Werte und Ausdrücke zu verarbeiten oder Standardwerte für Nullwerte und Ausdrücke bereitzustellen. Wir können den Operator ?? verwenden, um einen Standardwert für einen Ausdruck bereitzustellen

console.log(undefiniert ?? 'codercao'); // codercao

Sie können also den Void-Koaleszenzoperator in Verbindung mit dem optionalen Verkettungsoperator verwenden, um einen Standardwert bereitzustellen, wenn die Eigenschaft nicht vorhanden ist.

lass Titel = Daten?.Kinder?.[0]?.Titel ?? 'codercao';
console.log(Titel); // codercao

2. Logische leere Zuweisung (?? =)

Ausdruck1 ??= Ausdruck2

Der logische Nulloperator weist expr1 nur dann einen Wert zu, wenn dieser null ist (null oder undefiniert), wie in:

x ??= y

könnte etwa so aussehen:

x = x ?? y;

Aber das ist nicht der Fall! Es gibt einen subtilen Unterschied.

Der Null-Koaleszenzoperator (??) arbeitet von links nach rechts und verursacht einen Kurzschluss, wenn x nicht null ist. Wenn x nicht null oder undefiniert ist, wird der Ausdruck y daher nie ausgewertet. Wenn y eine Funktion ist, wird sie daher überhaupt nicht aufgerufen. Daher ist dieser logische Zuweisungsoperator äquivalent zu

x ?? (x = y);

3. Logische Oder-Zuweisung (|| =)

Dieser logische Zuweisungsoperator weist nur dann einen Wert zu, wenn der linke Ausdruck ein falscher Wert ist. „Falsy“ unterscheidet sich von „Null“, da „Falsy“ jeden beliebigen Wert annehmen kann: „falsy“, „0“, „“, „null“, „undefiniert“ und „NaN“ usw.

Grammatik

x ||= y

Äquivalent zu

x || (x = y)

Dies ist in Situationen nützlich, in denen wir den vorhandenen Wert beibehalten möchten, wenn er nicht vorhanden ist, andernfalls möchten wir ihm einen Standardwert zuweisen. Wenn beispielsweise die Suchanfrage keine Daten enthält, möchten wir das innere HTML des Elements auf einen Standardwert setzen. Andernfalls möchten wir die vorhandene Liste anzeigen. Auf diese Weise vermeiden wir unnötige Aktualisierungen und jegliche Nebenwirkungen wie Parsen, erneutes Rendern, Fokusverlust usw. Wir können diesen Operator einfach verwenden, um HTML mit JavaScript zu aktualisieren:

document.getElementById('search').innerHTML ||= '<i>Keine Beiträge gefunden, die dieser Suche entsprechen.</i>'

4. Logische UND-Zuweisung (&& =)

Wie Sie vielleicht schon vermutet haben, weist dieser logische Zuweisungsoperator nur dann einen Wert zu, wenn die linke Seite wahr ist. daher:

x &&= y

Äquivalent zu

x && (x = y)

endlich

Dieses Mal werde ich einige elegante Tipps zur Verwendung von JavaScript-Operatoren geben und mich dabei auf die Verwendung optionaler Verkettungsoperatoren konzentrieren, die uns einen einfachen Zugriff auf verschachtelte Eigenschaften ermöglichen, ohne in unseren Beispielen viel Code schreiben zu müssen. Der Internet Explorer unterstützt dies allerdings nicht. Wenn Sie also diesen oder ältere Browser unterstützen müssen, müssen Sie möglicherweise ein Babel-Plugin hinzufügen. Für Node.js müssen Sie hierfür auf die LTS-Version von Node 14 aktualisieren, da 12.x dies nicht unterstützt.

Wenn Sie elegante Tipps zur Verwendung von JavaScript-Operatoren haben, teilen Sie diese gerne im Kommentarbereich mit uns.

Oben finden Sie ausführliche Informationen zu mehreren Tipps zur Verwendung von JavaScript-Operatoren. Weitere Informationen zur Verwendung von JavaScript-Operatoren finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!