Sie müssen wahrscheinlich keine Switch-Anweisungen in JavaScript verwenden

Kein Schalter, keine komplexen Codeblöcke

Switch ist praktisch: Bei einem gegebenen Ausdruck können wir prüfen, ob er mit einer Reihe anderer Ausdrücke in einer Case-Klausel übereinstimmt. Betrachten Sie das folgende Beispiel:

Konstantenname = "Juliana";

Schalter (Name) {
  Fall "Juliana":
    console.log("Sie ist Juliana");
    brechen;
  Fall "Tom":
    console.log("Sie ist nicht Juliana");
    brechen;
}

Wenn der Name „Juliana“ lautet, drucken wir eine Nachricht und brechen sofort aus dem Block aus. Wenn Sie sich innerhalb einer Switch-Funktion befinden, können Sie „break“ weglassen, indem Sie „return“ direkt im Case-Block verwenden.

Wenn keine Übereinstimmungen vorhanden sind, kann die Standardoption verwendet werden:

Konstantenname = "Kris";

Schalter (Name) {
  Fall "Juliana":
    console.log("Sie ist Juliana");
    brechen;
  Fall "Tom":
    console.log("Sie ist nicht Juliana");
    brechen;
  Standard:
    console.log("Leider keine Übereinstimmung");
}

Switch wird auch häufig in Redux-Reducern verwendet (obwohl Redux Toolkit den Boilerplate-Code etwas vereinfacht), um viele if s zu vermeiden. Betrachten Sie das folgende Beispiel:

const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILED = "ANMELDUNG FEHLGESCHLAGEN";

const authState = {
  Token: "",
  Fehler: "",
};

Funktion authReducer(Zustand = authState, Aktion) {
  Schalter (Aktion.Typ) {
    Fall LOGIN_SUCCESS:
      return { ...Status, Token: Aktion.Nutzlast };
    Fall LOGIN_FAILED:
      return { ...Status, Fehler: Aktion.Nutzlast };
    Standard:
      Rückgabezustand;
  }
}

Ist daran etwas falsch? Wohl kaum. Aber gibt es eine bessere Alternative?

Inspiration von Python

Dieser Tweet von Telmo hat meine Aufmerksamkeit erregt. Er zeigt zwei Arten von „Switch“, von denen eine dem Muster in Python sehr nahe kommt.

Python hat keinen Schalter, was uns eine bessere Alternative bietet. Lassen Sie uns zunächst den Code von JavaScript nach Python portieren:

LOGIN_SUCCESS = "LOGIN_SUCCESS"
LOGIN_FAILED = "LOGIN_FEHLER"

auth_state = {"Token": "", "Fehler": ""}


def auth_reducer(Zustand=auth_zustand, Aktion={}):
    Zuordnung = {
        LOGIN_SUCCESS: {**Status, "Token": Aktion["Nutzlast"]},
        LOGIN_FAILED: {**Status, "Fehler": Aktion["Nutzlast"]},
    }

    returniere Mapping.get(Aktion["Typ"], Status)

In Python können wir ein Wörterbuch verwenden, um einen Schalter zu simulieren. dict.get() kann verwendet werden, um die Standardanweisung eines Schalters darzustellen.

Beim Zugriff auf einen nicht vorhandenen Schlüssel löst Python einen KeyError-Fehler aus:

>>> mein_dict = {

"Name": "John",

"Stadt": "Rom",

"Alter": 44

}

>>> mein_dict["nicht_hier"]

# Ausgabe: KeyError: 'nicht_hier'

Die Methode .get() ist ein sicherer Ansatz, da sie keinen Fehler auslöst und Sie einen Standardwert für einen nicht vorhandenen Schlüssel angeben können:

>>> mein_dict = {

"Name": "John",

"Stadt": "Rom",

"Alter": 44

}

>>> my_dict.get("nicht_hier", "nicht gefunden")

# Ausgabe: 'nicht gefunden'

Daher diese Zeile in Python:

returniere Mapping.get(Aktion["Typ"], Status)

Das Äquivalent in JavaScript lautet:

Funktion authReducer(Zustand = authState, Aktion) {
  ...
    Standard:
      Rückgabezustand;
  ...
}

Verwenden Sie ein Wörterbuch, um den Schalter zu ersetzen

Betrachten Sie das vorherige Beispiel noch einmal:

const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILED = "ANMELDUNG FEHLGESCHLAGEN";

const authState = {
  Token: "",
  Fehler: "",
};

Funktion authReducer(Zustand = authState, Aktion) {
  Schalter (Aktion.Typ) {
    Fall LOGIN_SUCCESS:
      return { ...Status, Token: Aktion.Nutzlast };
    Fall LOGIN_FAILED:
      return { ...Status, Fehler: Aktion.Nutzlast };
    Standard:
      Rückgabezustand;
  }
}

Ohne Switch zu verwenden, können wir Folgendes tun:

Funktion authReducer(Zustand = authState, Aktion) {
  Konstante Zuordnung = {
    [LOGIN_SUCCESS]: { ...Status, Token: Aktion.Nutzlast },
    [LOGIN_FAILED]: { ...Status, Fehler: Aktion.Nutzlast }
  };

  Rückgabezuordnung[Aktion.Typ] || Status;
}

Hier verwenden wir berechnete Eigenschaften in ES6. Hier werden die Eigenschaften der Zuordnung im laufenden Betrieb basierend auf zwei Konstanten berechnet: LOGIN_SUCCESS und LOGIN_FAILED.
Der dem Attribut entsprechende Wert ist die Objektdestrukturierung, die aus ES9 (ECMAScript 2018) stammt.

Konstante Zuordnung = {
  [LOGIN_SUCCESS]: { ...Status, Token: Aktion.Nutzlast },
  [LOGIN_FAILED]: { ...Status, Fehler: Aktion.Nutzlast }
}

Was halten Sie von diesem Ansatz? Für Schalter weist es möglicherweise einige Einschränkungen auf, für Reduzierstücke ist es jedoch möglicherweise die bessere Lösung.

Aber wie ist die Leistung dieses Codes?

Wie ist die Leistung?

Die Leistung von Switch ist besser als die von Dictionary. Wir können dies anhand des folgenden Beispiels testen:

Konsole.Zeit("Beispiel");
für (sei i = 0; i < 2000000; i++) {
  const nextState = authReducer(authState, {
    Typ: LOGIN_SUCCESS,
    Nutzlast: „some_token“
  });
}
console.timeEnd("Beispiel");

Messen Sie sie etwa zehnmal,

für t in {1..10}; führe Knoten switch.js >> switch.txt aus; fertig

für t in {1..10}; führe node map.js >> map.txt aus; fertig

Oben finden Sie Einzelheiten dazu, warum Sie die Switch-Anweisung in JavaScript möglicherweise nicht verwenden müssen. Weitere Informationen zu JavaScript-Switch-Anweisungen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!