Einfache Tipps helfen dabei, Code CLEAR und MAIN einfacher zu machen

Aufgrund meiner eigenen Erfahrung als Frontend-Programmierer baue ich beim Schreiben von Code oft meine eigenen Gewohnheiten auf, um den Code flexibler zu machen und die Lese- und Pflegefähigkeiten des Codes zu verbessern.
Dies sind alles sehr einfache, aber äußerst nützliche Tipps, die ich weitergeben möchte, damit Sie sie auf den ersten Blick vollständig verstehen.

Technik 1: Reduzieren Sie die Anzahl der if-else-Anweisungen

Jedes Mal, wenn wir etwas schreiben, das mehr als 2 if-else verwendet, müssen wir überlegen, ob es eine optimalere Möglichkeit gibt, den Code zu schreiben. Ein einfaches Beispiel ist wie folgt:

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

In diesem Beispiel schreibe ich eine Funktion, um die Preise von Telefonmarken abzurufen. Wenn ich den Preis eines Oppo-Telefons hinzufügen möchte, muss ich einen If-Else-Zweig hinzufügen, oder ich möchte den Preis von ändern Das Xiaomi-Telefon. Ich muss hart arbeiten, um den Standort des Xiaomi-Telefons in meinem Kiefer zu finden.
Das Schreiben von Code wie diesem kann dazu führen, dass der Code fehleranfällig ist, z. B. dass er ausführlich, schwer lesbar, schwer zu durchsuchen und zu erweitern ist.
Aber keine Sorge, ich zeige Ihnen, wie Sie es richtig schreiben, ohne das DRY-Prinzip zu verletzen. Wir werden ein Objekt verwenden, um Preise für Produkte zu speichern, anstatt eine if-else-if
-Kette zu verwenden.

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Im obigen verbesserten Beispiel können wir den Code klarer lesen, oder wenn wir den Preis eines Produkts ändern möchten, müssen wir die Kernlogik der getPrice()-Funktion nicht ändern.

Technik 2: Die Pipelining-Technik reduziert die unnötige Anzahl von Schleifen

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Dies ist eine herkömmliche Methode. Sie können eine for-Schleife verwenden, um jedes Element im Array zu durchlaufen und zu prüfen, welches Element die Bedingung erfüllt, und es dann zum Ergebnisarray hinzuzufügen.
Obwohl die obige Methode nicht falsch ist, kann das Schreiben von Code wie diesem dazu führen, dass der Code ausführlicher und schwieriger zu lesen ist. Stattdessen können wir allgemeine Funktionen wie Filter und Map verwenden, um den Code prägnant zu halten und die Semantik zu verbessern.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Technik 3: Verwenden Sie find, um doppelte Schleifen zu ersetzen

Fahren Sie mit dem Telefonsegment-Beispiel oben fort. Dann zeigt die Verwendung von „find“ offensichtliche Bequemlichkeit

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

Mit dieser Suchmethode können Sie schnell das erste Element im Array finden, das die bereitgestellte Bedingung erfüllt, wodurch der Code viel klarer wird als bei der Verwendung herkömmlicher Schleifen.

Technik 4: Verwendung umfasst das Ersetzen redundanter Schleifen

Wenn wir überprüfen müssen, ob ein Array einen bestimmten Wert enthält, kann die Verwendung von Includes Ihren Code vereinfachen, anstatt das Array zu durchlaufen, um die Existenz eines Elements zu überprüfen.

Zum Beispiel:

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Sie müssen nur includes verwenden:

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Diese Methode bietet eine elegante Lösung für den umständlicheren Prozess der Verwendung herkömmlicher Schleifen.

Diese Funktion ist besonders nützlich, wenn Sie mit Arrays arbeiten, die Sie häufig überprüfen müssen.

Technik 5: Verwenden Sie Variablen, die eindeutige Ergebnisse liefern

Soweit ich weiß, können wir insbesondere in kompakten Funktionen konsistente Variablennamen für die zurückgegebenen Ergebnisse verwenden. Dies verdeutlicht, woher der Rückgabewert kommt, und stellt eine Standardkonvention für die Benennung von Variablen bereit, damit jemand anderes Ihren Code leicht erkennen kann, wenn er ihn liest.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Technik 6: Objektintegrität wahren

Bei der Bearbeitung der vom Backend zurückgegebenen JSON-Daten verarbeiten wir häufig bestimmte Attribute einzeln in einem Schlüsselwert. Dies wird umso deutlicher, wenn wir manchmal Fälle haben, in denen nur wenige Attribute verwendet werden. Viele Programmierer neigen dazu, nur die notwendigen Eigenschaften für Operationen zu extrahieren. Dies ist die erste Methode, an die die Leute denken, es handelt sich jedoch um eine praktische und kurzlebige Art, Dinge zu erledigen.

Wenn Unsicherheit darüber besteht, ob eine Funktion später zusätzliche Abhängigkeiten benötigt, ist es ratsam, die Integrität des gesamten Objekts aufrechtzuerhalten. Beispielsweise kann eine Funktionskomponente ein Symbol und einen Inhalt verwenden, aber möglicherweise können später auch Titel oder Datum verwendet werden. Die Übergabe ganzer Objekte an Funktionskomponenten anstelle einzelner Eigenschaften reduziert nicht nur die Länge der Requisitenliste, sondern verbessert auch die Lesbarkeit und Flexibilität des Codes

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

? Abschließendes Fazit

Die oben genannten JS-Codierungstechniken können die Qualitätsleistung Ihres Codes verbessern und ihn langfristig einfacher zu lesen und zu pflegen machen. Probieren Sie diese einfachen Tipps also in Ihrem Projekt aus und erleben Sie die Verbesserungen aus erster Hand. Ich wünsche Ihnen viel Spaß beim Codieren !!!

Das obige ist der detaillierte Inhalt vonEinfache Tipps helfen dabei, Code CLEAR und MAIN einfacher zu machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!