Einige wissenswerte praktische Tipps zur JavaScript-Optimierung

So starten Sie schnell mit VUE3.0: Geben Sie den Lernaufwand

„Schwierigkeit:?“ ein. „ Empfohlene Lesezeit: 5 min “

Das Hauptvideo

• if...else

-Nudelcode

• , wir sollten darüber nachdenken, ob es eine bessere Optimierungsmethode gibt.
• Jetzt müssen wir beispielsweise den Preis für Lebensmittel in Mai Lao anhand des Namens berechnen. Sie können dies tun.

• Diese Schreibweise führt dazu, dass der Funktionskörper viele bedingte Beurteilungsanweisungen enthält. Wenn wir das nächste Mal ein Produkt hinzufügen möchten, müssen wir die Logik in der Funktion ändern und eine if...else - Anweisung hinzufügen Das Prinzip besteht darin, dass wir, wenn wir eine Logik hinzufügen müssen, versuchen sollten, die Änderung der Anforderungen zu lösen, indem wir die Software-Entität erweitern, anstatt den vorhandenen Code zu ändern, um die Änderung abzuschließen.
• Dies ist eine sehr klassische Optimierungsmethode. Wir können eine Datenstruktur ähnlich Map verwenden, um alle Produkte zu speichern. Hier erstellen wir direkt ein Objekt, um sie zu speichern.

• Auf diese Weise müssen wir die Logik von getPrice nicht ändern, wenn wir das nächste Mal ein weiteres Produkt hinzufügen müssen. Natürlich möchten mehr Leute hier foodMap direkt dort verwenden, wo es verwendet wird diese Idee.
• Dann werden einige Schüler zu diesem new Map fragen: Was ist, wenn ich nicht nur Zeichenfolgen als key verwenden möchte? Die Idee ist ähnlich und es wird eine zusätzliche Entität zum Speichern von Änderungen verwendet.

Pipeline-Operationen ersetzen redundante Schleifen.

• Es gibt eine solche Lebensmittelliste von Mai Moulao

• Wenn Sie das Essen finden möchten, das zu Set 1 gehört, wie würden Sie es finden?
• Das Obige ist eine Methode, die wir zuvor oft verwendet haben. Offensichtlich kann unser Ersatz durch filter und map anstelle for -Schleife nicht nur den Code rationalisieren, sondern auch die Semantik klarer machen Array wird zuerst过滤und dann重组.

Find ersetzt die redundante Schleife

• oder das obige Beispiel. Wenn wir ein bestimmtes Lebensmittel anhand des Attributwerts in diesem Lebensmittelobjekt-Array finden möchten, kommt die Verwendung von find zum Einsatz.

Includes ersetzt redundante Schleifen

• . Ähnlich wie bei den beiden oben genannten Details handelt es sich hierbei um integrierte Funktionen, die von uns nicht neu geschrieben werden müssen, was viel Zeit spart.
• Wie wir alle wissen, besteht eine Schüssel mit eingelegten Kang Fu Lao Tan-Rindfleischnudeln aus Sauerkraut , Nudeln , Rindfleischwürfeln , Zigarettenkippen und Fußhaut . Daher möchten wir eine Funktion verwenden, um zu überprüfen, ob sich in dieser Nudel Fußhaut befindet Wir schreiben es prägnanter?

• Ebenso können nicht nur Kang Fus Sauerkraut und Rindernudeln auf diese Weise gespielt werden, sondern alle ähnlichen Operationen zum Auffinden bestimmter Elemente in einem Array können mit der includes -Funktion aufgerufen werden.

Ergebnisrückgabewert

• Wenn wir einige Funktionen mit Rückgabewerten schreiben, haben wir oft Schwierigkeiten mit der Benennung der Rückgabewertvariablen. Selbst bei einigen langen Funktionen verwenden wir keine Variablen, sondern geben diese direkt return , da wir die Logik klären müssen noch einmal, wenn wir uns das nächste Mal auf diesen Code beziehen.
• Normalerweise können wir in einer kleinen Funktion result als Rückgabewert verwenden.

Frühzeitige Rückgabe

• Die Verwendung von result als Rückgabewert oben gilt jedoch nicht für alle Situationen. Manchmal müssen wir den Funktionskörper vorzeitig beenden, um zu verhindern, dass nachfolgende Kollegen redundante Programme lesen.

• Wenn unser selectedKey im folgenden Beispiel nicht existiert, sollten wir sofort return , damit wir den folgenden Code nicht weiter lesen müssen, da sonst die Lesekosten bei komplexeren Funktionen erheblich steigen.

Um das Objekt intakt zu halten

• , werden die vom Backend über eine Anfrage zurückgegebenen Daten häufig anhand einiger Attribute verarbeitet. Wenn nur wenige Attribute verarbeitet werden müssen, sind viele Schüler daran gewöhnt erste Methode.
• Tatsächlich ist diese Angewohnheit jedoch schlecht, denn wenn Sie nicht sicher sind, ob diese Funktion in Zukunft Abhängigkeitsattribute hinzufügen muss, sollten Sie lernen, die Integrität des Objekts beizubehalten getDocDetail ist nicht auf die Verwendung icon und content beschränkt. In Zukunft können Attribute wie title und date vorhanden sein. Daher können wir das vollständige Objekt auch direkt übergeben, wodurch nicht nur die Parameterliste verkürzt, sondern auch der Code verbessert wird lesbar.

Cleverer Einsatz von Operatoren

• Wenn wir eine neue Variable erstellen müssen und manchmal überprüfen müssen, ob die durch ihren Wert referenzierte Variable null oder undefiniert ist, können wir einfaches Schreiben verwenden.

Zum Abschluss

• möchte ich mich zunächst bei Ihnen allen für das Lesen bedanken. Ich werde diesen Artikel hier teilen und einige sehr grundlegende Optimierungsmethoden zusammenfassen.

[Empfohlene verwandte Video-Tutorials: Web-Frontend]

Im Folgenden finden Sie einige wissenswerte praktische Tipps zur JavaScript-Optimierung. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.