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!