Ein Beispiel für das elegante Schreiben von Urteilen in JavaScript

Ein Beispiel für das elegante Schreiben von Urteilen in JavaScript

Vorwort

Wenn wir JavaScript schreiben, stoßen wir häufig auf logische Urteile, die mit if/else oder switch umgesetzt werden können. Bei komplexen Urteilen machen jedoch zu viele Bedingungen unseren Code oft lang und verringern die Lesbarkeit. Also müssen wir unseren Code optimieren, um ihn eleganter zu machen💎.

1. Monadisches Urteil

1.1 Beispiel

Wir schreiben eine allgemeine if/else-Beurteilungsfunktion und optimieren sie dann.

const meineFunktion = (status) => {
  wenn (Status === 1) {
    console.log("status1");
  } sonst wenn (Status === 2) {
    console.log("status2");
  } sonst wenn (Status === 3) {
    console.log("status3");
  }
};

1.2 Setzen Sie es in das Objekt ein

Wir wissen, dass das Objekt von JavaScript eigentlich eine ungeordnete Sammlung von Schlüssel-Wert-Paaren ist, weshalb wir es zum Speichern von Beurteilungsbedingungen verwenden können. Beispielsweise ist im obigen Fall die Beurteilungsbedingung ein numerischer Typ und die nachfolgende Operation verwendet nur eine Zeichenfolge. Zu diesem Zeitpunkt können wir ein Objekt erstellen und die verwendete Zahl und Zeichenfolge als Schlüsselnamen bzw. entsprechenden Wert des Objekts verwenden.

//Setze die Beurteilungsbedingung in das Objekt ein const statusObj = {
  1: "status1",
  2: "status2",
  3: "status3",
};

// Optimierte Funktion 💎
const meineFunktion = (status) => {
  console.log(statusObj[status]);
};

1.3 In Karte einfügen

Zusätzlich zu primitiven Objekten können wir auch Map-Objekte verwenden. Sehen wir uns die Beschreibung von MDN dazu an:

Map-Objekte speichern Schlüssel-Wert-Paare und können sich die ursprüngliche Einfügereihenfolge der Schlüssel merken. Jeder beliebige Wert (Objekt oder Primitiv) kann als Schlüssel oder Wert verwendet werden.

Es ist nicht schwer zu erkennen, dass das Map-Objekt tatsächlich eine erweiterte Version des normalen Objekts ist. Insbesondere kann jeder Wert als Schlüssel-Wert-Paar verwendet werden, was bedeutet, dass Funktionen, reguläre Ausdrücke usw. auch als Schlüssel oder Wert verwendet werden können, was unsere Operationen, bei denen wir es als Beurteilung verwenden, erheblich erleichtert. Auf die Details zum Map-Objekt wird hier nicht näher eingegangen.

//Setze die Beurteilungsbedingungen in die Map ein const statusMap = new Map([
  [1, "status1"],
  [2, "status2"],
  [3, "status3"],
]);

// Optimierte Funktion 💎
const meineFunktion = (status) => {
  console.log(statusMap.get(status));
};

2. Mehrfachbeurteilung

2.1 Ein Beispiel

Da univariate Urteile optimiert werden können, können auch plurale Urteile optimiert werden. Im Folgenden wird ein Fall mit zwei Urteilsbedingungen beschrieben.

// Gib ein Beispiel 🌰
const meineFunktion = (rechts, status) => {
  if (rechts === "Administrator" && Status === 1) {
    console.log("Administrator mag Wang Bingbing");
  } sonst wenn (rechts === "Administrator" && Status === 2) {
    console.log("Administrator mag Wang Bingbing nicht");
  } sonst wenn (rechts === "Benutzer" && Status === 1) {
    console.log("Benutzer mag Wang Bingbing");
  } sonst wenn (rechts === "Benutzer" && Status === 2) {
    console.log("Der Benutzer mag Wang Bingbing nicht");
  }
};

// Beispiel mit Duplizierung 🌰
const meineFunktion = (rechts, status) => {
  if (rechts === "Administrator" && Status === 1) {
    console.log("Administrator mag Wang Bingbing");
  } sonst wenn (rechts === "Administrator" && Status === 2) {
    console.log("Administrator mag Wang Bingbing");
  } sonst wenn (rechts === "Benutzer" && Status === 1) {
    console.log("Benutzer mag Wang Bingbing");
  } sonst wenn (rechts === "Benutzer" && Status === 2) {
    console.log("Benutzer mag Wang Bingbing");
  }
};

2.2 Setzen Sie die Beurteilungsbedingungen in eine Zeichenfolge und fügen Sie sie in das Objekt ein

Beide Situationen können auch durch die Verwendung von Object optimiert werden.

// „Beispiel 🌰“ optimieren

//Setze die Beurteilungsbedingung in das Objekt ein const actionsObj = {
  "administrator-1": "Administrator mag Wang Bingbing",
  "administrator-2": "Administrator mag Wang Bingbing nicht",
  "user-1": "Benutzer mag Wang Bingbing",
  "user-2": "Der Benutzer mag Wang Bingbing nicht",
};

// Optimierte Funktion 💎
const meineFunktion = (rechts, status) => {
  Konsole.log(actionsObj[`${right}-${status}`]);
};

// Sie können die Funktion als „Wert“ verwenden. Die folgenden Fälle sind ähnlich und werden nicht im Detail beschrieben.
const AktionenObj = {
  "administrator-1": () => console.log("Administrator mag Wang Bingbing"),
  "administrator-2": () => console.log("Administrator mag Wang Bingbing"),
  "user-1": () => console.log("Administrator mag Wang Bingbing"),
  "user-2": () => console.log("Administrator mag Wang Bingbing"),
};

// Optimierte Funktion 💎
const meineFunktion = (rechts, status) => {
  AktionenObj[`${right}-${status}`]();
};

// „Beispiele mit doppelten Situationen 🌰“ optimieren
// Öffentliche Funktionen können extrahiert werden. Die folgenden Situationen sind ähnlich und werden nicht wiederholt 🍓
const Aktionen = () => {
  const f1 = () => console.log("Administrator mag Wang Bingbing");
  const f2 = () => console.log("Benutzer mag Wang Bingbing");

  zurückkehren {
    "Administrator-1": f1,
    "Administrator-2": f1,
    "Benutzer-1": f2,
    "Benutzer-2": f2,
  };
};

// Optimierte Funktion 💎
const meineFunktion = (rechts, status) => {
  Aktionen()[`${right}-${status}`]();
};

2.3 Setzen Sie die Beurteilungsbedingungen in eine Zeichenfolge und fügen Sie sie in die Karte ein

In ähnlicher Weise können wir auch Map-Objekte verwenden. Wir speichern die beiden Bedingungen als Strings.

// „Beispiel 🌰“ optimieren

//Setze die Beurteilungsbedingungen in die Map ein const actionsMap = new Map([
    ['administrator-1', 'Administrator mag Wang Bingbing'],
    ['administrator-2', 'Der Administrator mag Wang Bingbing nicht'],
    ['user-1', 'Benutzer mag Wang Bingbing'],
    ['Benutzer-2', 'Der Benutzer mag Wang Bingbing nicht']
]);

// Optimierte Funktion 💎
const meineFunktion = (rechts, status) => {
    console.log(actionsMap.get(`${right}-${status}`));
};

2.4 Setzen Sie die Beurteilungsbedingung in das Objekt und dann in die Karte ein

// „Beispiel 🌰“ optimieren

//Setze die Beurteilungsbedingungen in die Map ein const actionsMap = new Map([
    [{ right: 'administrator', status: 1 }, () => console.log('Administrator mag Wang Bingbing')],
    [{ right: 'administrator', status: 2 }, () => console.log('Administrator mag Wang Bingbing nicht')],
    [{ right: 'user', status: 1 }, () => console.log('Benutzer mag Wang Bingbing')],
    [{ right: 'user', status: 2 }, () => console.log('Der Benutzer mag Wang Bingbing nicht')]
]);

// Optimierte Funktion 💎
const meineFunktion = (rechts, status) => {
    const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status));
    Aktion.fürJeden(([_, index]) => index.call());
};

2.5 Schreiben Sie die Beurteilungsbedingung als regulären Ausdruck und fügen Sie sie dann in die Karte ein

Mit regulären Ausdrücken können relativ komplexe Situationen behandelt werden.

// „Beispiele mit doppelten Situationen 🌰“ optimieren

// Schreibe die Beurteilungsbedingung als regulären Ausdruck und füge sie dann in die Map ein const actions = () => {
    const f1 = () => console.log('Dem Administrator gefällt Wang Bingbing');
    const f2 = () => console.log('Benutzer mag Wang Bingbing');

    gib eine neue Karte zurück ([
        [/^administrator-[1-2]/, f1],
        [/^Benutzer-[1-2]/, f2]
    ]);
};

// Optimierte Funktion 💎
const meineFunktion = (rechts, status) => {
    const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`));
    Aktion.fürJeden(([_, index]) => index.call());
};

Abschluss

Wir verwenden native Objekt- und Map-Objekte, um die Beurteilung zu optimieren, aber im eigentlichen Entwicklungsprozess müssen wir dennoch zunächst dem Prinzip der Praktikabilität folgen und eine Überoptimierung vermeiden.

Dies ist das Ende dieses Artikels über die elegante Art, Urteile in JavaScript zu schreiben. Weitere Informationen zur eleganten Art, Urteile in JavaScript zu schreiben, 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!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der Javascript-Grundlagenschleife
  • So verwenden Sie async und await richtig in JS-Schleifen
  • Vier Methoden zur Datentypbeurteilung in JS
  • Über den Unterschied zwischen js typeof und instanceof bei der Beurteilung von Datentypen und deren Entwicklung und Verwendung
  • So konvertieren Sie eine Zeichenfolge in JavaScript in eine Zahl
  • parseInt parseFloat js Zeichenfolge Konvertierung Nummer
  • Allgemeine JavaScript-Anweisungen: Schleife, Beurteilung, Zeichenfolge in Zahl

<<:  Tutorial zu HTML-Tabellen-Tags (8): Hintergrundbild-Attribut BACKGROUND

>>:  Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen

Artikel empfehlen

Was tun, wenn Sie Ihr MySQL-Passwort vergessen?

Lösung zum Vergessen des MySQL-Passworts: [root@l...

Implementierungscode zur Verwendung der MongoDB-Datenbank in Docker

Holen Sie sich das Mongo-Image sudo docker pull m...

Beispielcode zur einfachen Implementierung des Seitenlayouts mit Flex-Layout

Kommen wir ohne weitere Umschweife direkt zum Cod...

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

In diesem Artikel wird der spezifische Code von j...

So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu

sudo-Konfigurationsdatei Die Standardkonfiguratio...

Das Lazy-Loading-Attributmuster in JavaScript verstehen

Traditionell erstellen Entwickler Eigenschaften i...

17 404-Seiten, die Sie erleben möchten

Wie können wir sagen, dass wir 404 vermeiden soll...

Zusammenfassung der MySQL-Zeitstatistikmethoden

Beim Erstellen von Datenbankstatistiken müssen Si...

Installationsschritte der Ubuntu 20.04-Doppelpinyin-Eingabemethode

1. Chinesische Eingabemethode einrichten 2. Stell...

Reiner CSS-Code zum Erzielen eines Drag-Effekts

Inhaltsverzeichnis 1. Beispiel für Drag-Effekt 2....