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

Vollständige Liste der CentOS7-Firewall-Betriebsbefehle

Inhaltsverzeichnis Installieren: 1. Grundlegende ...

Beispiel für die Bereitstellung eines Django-Projekts mit Docker

Es ist auch sehr einfach, Django-Projekte mit Doc...

Grundlegendes zu MySQL-Sperren basierend auf Update-SQL-Anweisungen

Vorwort Die MySQL-Datenbanksperre ist ein wichtig...

Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

Vorwort Aus beruflichen Gründen musste ich kürzli...

Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8

Geben Sie den Ordner /etc/yum.repos.d/ ein Erstel...

So entfernen Sie die Trennlinie einer Webseitentabelle

<br />So entfernen Sie die Trennlinien einer...

Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet

In diesem Artikel wird der spezifische Code für d...

Verwenden des CSS-Loaders zum Implementieren des CSS-Moduls in Vue-CLI

【Vorwort】 Sowohl die modularen CSS-Lösungen von V...

Detaillierte Erklärung der MySQL-Berechtigungssteuerung

Inhaltsverzeichnis MySQL-Berechtigungskontrolle B...

Einführung in semantische HTML-Tags

In den letzten Jahren war DIV+CSS bei der Website-...

Ein kurzer Vortrag über MySQL-Pivottabellen

Ich habe eine Produktteiletabelle wie diese: Teil...

Probleme bei der Installation von MySQL und mysql.sock unter Linux

Vor kurzem traten bei der Installation von Apache...