So optimieren Sie den Logikbeurteilungscode in JavaScript

So optimieren Sie den Logikbeurteilungscode in JavaScript

Vorwort

Zu den logischen Urteilsaussagen, die wir im täglichen Leben verwenden, gehören if...else..., switch...case..., do...while... usw.

In einfachen Szenarien spüren wir die Leistung dieser Syntax möglicherweise nicht, aber bei komplexen Geschäftsszenarien kommt es bei unsachgemäßer Handhabung zu zahlreichen logischen Verschachtelungen, schlechter Lesbarkeit und Schwierigkeiten bei der Erweiterung.

Eine tausend Meilen lange Reise beginnt mit einem einzigen Schritt. Um gut wartbaren und qualitativ hochwertigen Code zu schreiben, müssen wir mit den Details beginnen. Heute werden wir hauptsächlich darüber sprechen, wie man Code mit logischen Urteilen in JavaScript optimiert.

Optimierung der Verschachtelungsebene

Funktion Angebot(Obst, Menge) {
    const redFruits = ['Apfel', 'Erdbeere', 'Kirsche', 'Preiselbeeren'];
    // Bedingung 1: Frucht existiertwenn (Frucht) {
        // Bedingung 2: Es ist eine rote Frucht, wenn (redFruits.includes(fruit)) {
            console.log('rote Frucht');
            // Bedingung 3: Die Anzahl der Früchte ist größer als 10 if (quantity > 10) {
                console.log('Die Zahl ist größer als 10');
            }
        }
    } anders {
        throw new Error('Es gibt kein Obst!');
    }
}

Aus dem obigen Beispiel können wir erkennen, dass der Beurteilungsprozess standardisiert ist und mit der Abbildung der realen Welt übereinstimmt. Der Code ist jedoch verschachtelt, was das Lesen und Warten erschwert.

Wenn der Parameter „fruit“ übergeben wird, sind für jede Ausführung mindestens zwei Schritte zur if-Beurteilung erforderlich, was ebenfalls zu Leistungsproblemen führt.

Lassen Sie uns den obigen Code optimieren:

Funktion Angebot(Obst, Menge) {
    const redFruits = ['Apfel', 'Erdbeere', 'Kirsche', 'Preiselbeeren'];
    if (!fruit) throw new Error('Es ist kein Obst vorhanden'); // Bedingung 1: Wenn das Obst ungültig ist, behandle den Fehler im Voraus if (!redFruits.includes(fruit)) return; // Bedingung 2: Wenn es kein rotes Obst ist, gib im Voraus zurück

    console.log('rote Frucht');

    // Bedingung 3: Die Anzahl der Früchte ist größer als 10 if (quantity > 10) {
        console.log('Die Zahl ist größer als 10');
    }
}

Hier optimieren wir hauptsächlich die Verschachtelungsebene, beenden die nicht qualifizierten Bedingungen im Voraus, reduzieren die dreistufige Verschachtelung auf eine Ebene, vereinfachen die Code-Ergebnisstruktur und verbessern die Lesbarkeit.

Optimierung mehrerer bedingter Verzweigungen

Ich glaube, viele von uns kennen den folgenden Code, oder? (Denken Sie daran, als Sie zum ersten Mal mit dem Schreiben von Code begonnen haben)

Funktion pick(Farbe) {
    // Wähle die Frucht nach Farbe aus, wenn (Farbe === 'rot') {
        return ['Apfel', 'Erdbeere'];
    } sonst wenn (Farbe === 'gelb') {
        return ['Banane', 'Ananas'];
    } sonst wenn (Farbe === 'lila') {
        return ['Traube', 'Pflaume'];
    } anders {
        zurückkehren [];
    }
}

Wir müssen ein kleines Prinzip kennen: „if else“ eignet sich besser für die bedingte Intervallbeurteilung, während „switch case“ besser für die Verzweigungsbeurteilung spezifischer Aufzählungswerte geeignet ist.

Wir verwenden switch...case... um es umzuschreiben:

Funktion pick(Farbe) {
    // Frucht anhand Farbschalter (Farbe) auswählen {
        Fall 'rot':
            return ['Apfel', 'Erdbeere'];
        Fall 'gelb':
            return ['Banane', 'Ananas'];
        Fall 'lila':
            return ['Traube', 'Pflaume'];
        Standard:
            zurückkehren [];
    }
}

Der optimierte Code sieht ordentlich formatiert und durchdacht aus, ist aber dennoch lang. Weiter optimieren:

Mithilfe der {key: value}-Struktur von Object können wir alle Fälle in Object aufzählen und dann den Schlüssel als Index verwenden, um den Inhalt direkt über Object.key oder Object[key] abzurufen:

const Fruchtfarbe = {
    rot: ['Apfel', 'Erdbeere'],
    gelb: ['Banane', 'Ananas'],
    lila: ['Traube', 'Pflaume'],
}
Funktion pick(Farbe) {
    returniere Fruchtfarbe[Farbe] || [];
}

Verwenden Sie die Map-Datenstruktur, die echte (Schlüssel, Wert) Schlüssel-Wert-Paarstruktur:

const Fruchtfarbe = neue Map()
    .set('rot', ['Apfel', 'Erdbeere'])
    .set('gelb', ['Banane', 'Ananas'])
    .set('lila', ['Traube', 'Pflaume']);

Funktion pick(Farbe) {
    gibt Fruchtfarbe zurück.get(Farbe) || [];
}

Nach der Optimierung ist der Code einfacher und leichter zu erweitern.

Zur besseren Lesbarkeit können Sie das Objekt auch semantischer definieren und dann Array.filter verwenden, um denselben Effekt zu erzielen:

const Früchte = [
    {Name: 'Apfel', Farbe: 'Rot'},
    {name: 'Erdbeere', Farbe: 'rot'},
    {Name: 'Banane', Farbe: 'Gelb'},
    {Name: 'Ananas', Farbe: 'Gelb'},
    {Name: 'Traube', Farbe: 'lila'},
    {Name: 'Pflaume', Farbe: 'lila'}
];

Funktion pick(Farbe) {
    gibt Früchte.Filter zurück (f => f.Farbe == Farbe);
}

Zusammenfassen

Die oben verwendeten Beispiele und Methoden sind relativ elementar, aber die darin enthaltenen Ideen sind eine sorgfältige Betrachtung wert. Ich hoffe, jeder kann etwas daraus lernen!

Dies ist das Ende dieses Artikels zur Optimierung von Logikbeurteilungscode in JavaScript. Weitere relevante Inhalte zu JavaScript-Optimierungslogikbeurteilungscode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Einführung in die logischen Urteilsoperatoren &&, || und ! in JavaScript
  • js logische Beurteilung von IP-Adresse, Subnetzmaske und Gateway
  • Eine allgemeine Diskussion über JS-Selektoren für logische Urteile || &&
  • Bei der Beurteilung der JS-Logik sollten nicht nur if-else- und Switch-Bedingungsbeurteilungen verwendet werden (Tipps)

<<:  Tutorial zur manuellen Installation von MySQL 8.0.13

>>:  Ubuntu installiert scrcpy, um die Bildschirmprojektion und -steuerung des Mobiltelefons abzuschließen (eine weitere Möglichkeit, QQ WeChat in Ubuntu zu verwenden).

Artikel empfehlen

10 hervorragende Web-UI-Bibliotheken/Frameworks

1. IT Mill-Toolkit IT Mill Toolkit ist ein Open-S...

Detaillierte Erklärung zum Anzeigen der MySQL-Speichernutzung

Vorwort Dieser Artikel stellt hauptsächlich die r...

So zeigen Sie Dateien im Docker-Image an

So zeigen Sie Dateien in einem Docker-Image an 1....

Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu

Heute ist mir plötzlich eingefallen, dass es cool ...

Detaillierte Erklärung von Objektliteralen in JS

Inhaltsverzeichnis Vorwort 1. Setzen Sie den Prot...

Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten

Inhaltsverzeichnis Vorwort Rendern setTable-Kompo...

Detaillierte Erklärung der MySQL Master-Slave-Inkonsistenz und Lösungen

1. MySQL Master-Slave-Asynchronität 1.1 Netzwerkv...

Detaillierte Erklärung, wann Javascript-Skripte ausgeführt werden

JavaScript-Skripte können überall in HTML eingebe...

Detaillierte Erklärung zum dynamischen Festlegen des Browsertitels in Vue

Inhaltsverzeichnis Unsinn Text Der erste router/i...

So autorisieren Sie Remoteverbindungen in MySQL unter Linux

Hinweis: Andere Maschinen (IP) können ohne Autori...

Beispielcode zum Erstellen von Desktop-Anwendungen mit Vue + Electron

1.vue-Verpackung Hier verwenden wir den Befehl „v...

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

Im täglichen Geschäftsleben gibt es zwei gängige ...