Heute lernen Sie eine Reihe erstaunlicher JavaScript-Kurzbefehle kennen, mit denen Sie Ihren Code lesbarer, prägnanter und professioneller gestalten können.

In jedem Beispiel löse ich zuerst eine Aufgabe mit einer längeren Form, die Sie wahrscheinlich auch selbst verwenden würden. Dann zeige ich einen saubereren Einzeiler / Kurzschrift-Ansatz, um genau dasselbe zu tun.

Lassen Sie uns darauf eingehen!

1. Einzeilige if-else-Anweisungen

Denken Sie daran, dass diese Art von Kurzschrift dazu gedacht ist, den Code sauberer zu machen und Codezeilen in einfachen if-elseAnweisungen wie der obigen einzusparen. Überbeanspruchen Sie es nicht, da es den Code weniger lesbar machen kann!

2. Nullish-Koaleszenz

Der nullische Koaleszenzoperator ??gibt die rechte Seite zurück, wenn die linke Seite nicht definiert ist. Ist dies der Fall, wird die linke Seite zurückgegeben:

3. Optionale Verkettung

Wenn Sie mit dem Operator auf eine Eigenschaft eines Objekts zugreifen .und diese nicht definiert ist, wird ein Fehler ausgegeben. Hier wird die optionale Verkettung verwendet.

Wenn Sie den optionalen Verkettungsoperator verwenden ?.und die Eigenschaft nicht definiert ist, undefinedwird anstelle eines Fehlers zurückgegeben:

4. Wandeln Sie einen beliebigen Wert in einen booleschen Wert um

Verwenden Sie doppelte Ausrufezeichen ( !!), um alles in JS in einen booleschen Wert umzuwandeln.

5. Der Spread-Operator

Sie können die Elemente eines Arrays in einem anderen Array „verteilen“, indem Sie den Spread-Operator ( …) verwenden. Lassen Sie uns zum Beispiel zwei Arrays von Zahlen verketten:

Diese Syntax kann auch verwendet werden, anstatt Werte in ein Array zu verschieben:

6. Destrukturieren mit dem Spread-Operator

Sie können den Spread-Operator mit Destrukturierung verwenden, um die übrig gebliebenen Elemente einer neuen Variablen zuzuweisen:

Im obigen Beispiel werden die Eigenschaften cityund einer Konstanten als Überbleibsel statezugewiesen .address

7. Duplikate aus einem Array entfernen

8. Kurzschlussauswertung mit &&

Anstatt mit einer ifAussage prüfen zu müssen, ob etwas wahr ist, können Sie den &&Operator verwenden:

9. Saiten auf Steroiden

Sie können eine Variable direkt in einen String einbetten, indem Sie den String in Backticks umschließen und ${}den Wert mit einbetten:

10. Eine kürzere Alternative zu Switch-Case

Sie können ein Objekt mit Funktionsnamen verwenden, die einer Taste zugeordnet sind, um eine switchAnweisung zu ersetzen:

Und nein, ich habe nicht vergessen, die Klammern im casesObjekt aufzurufen!

11. Zuweisung von Objekteigenschaften

Falls Sie möchten, dass Ihre Objektschlüssel denselben Namen wie Werte haben, können Sie die Objektliterale weglassen:

12. Pfeilfunktionen

Anstatt eine Funktion mit dem functionSchlüsselwort zu deklarieren, kann es übersichtlicher sein, die Pfeilfunktionssyntax zu verwenden:

Hinweis: Da es in diesem Beispiel nur einen Ausdruck in der Funktion gibt, können Sie die geschweiften Klammern ( {}) weglassen. Wenn der Ausdruck jedoch mehr als eine Zeile umfasst, müssen Sie geschweifte Klammern verwenden!

13. Return ohne das Return-Schlüsselwort

Wenn Sie mit Pfeilfunktionenreturn arbeiten, können Sie das Schlüsselwort und die geschweiften Klammern der Funktion weglassen, wenn Sie nur einen einzigen Ausdruck in der Funktion haben:

14. Kürzer für Schleifen

Anstatt forSchleifen für eine Sammlung zu verwenden, möchten Sie vielleicht manchmal die integrierte forEach()Methode verwenden, um sie kürzer zu durchlaufen:

15. Standardwerte für Funktionsparameter

In JavaScript können Sie einem Funktionsparameter einen Standardwert zuweisen, sodass eine Funktion sowohl mit als auch ohne Parameter aufgerufen werden kann:

Noch kürzer geht es übrigens mit den Pfeilfunktionen!

16. Variablen deklarieren

Sie können Variablendeklarationen wie folgt in einer einzigen Zeile kombinieren:

17. Setzen Sie Werte in ein Array

Sie können verwenden Object.values(), um die Werte eines Objekts abzurufen und sie in ein Array einzufügen, anstatt eine Schleife zu durchlaufen:

18. Finden Sie ein Element in einem Array

Verwenden Sie die integrierte find()Methode des Arrays, um ein Element zu finden, das einem bestimmten Kriterium entspricht, anstatt dies mit langen Schleifen zu tun:

19. Überprüfen Sie, ob sich ein Element in einem Array befindet

Dies ist nicht unbedingt eine Abkürzung, da Sie kaum ein paar Zeichen sparen. Aber es ist ein viel saubererer Ansatz.

Anstatt die indexOf()Methode zu verwenden, um zu prüfen, ob sich ein Element im Array befindet, können Sie die includes()Methode verwenden. Dies macht Ihre Absicht sehr deutlich:

20. Überprüfen Sie mehrere Bedingungen

Um lange ||Ketten beim Überprüfen mehrerer Bedingungen zu vermeiden, können Sie das verwenden, was Sie gerade im vorherigen Tipp gelernt haben, also stattdessen die includes()Methode verwenden:

21. Weisen Sie mehrere Werte in einer Zeile zu

Sie können die sogenannte Destrukturierung verwenden , um mehrere Werte auf einmal zuzuweisen:

Dies kann auch beim Arbeiten mit Objekten verwendet werden:

22. Vertausche zwei Variablen ohne eine dritte

Dieser ist ein Klassiker.

In JavaScript können Sie die Destrukturierung verwenden, um Werte aus einem Array herauszuziehen. Dies kann auch verwendet werden, um zwei Variablen ohne einen dritten Helfer zu tauschen:

23. Exponentenoperator

Anstatt die Math.pow()Funktion zu verwenden, um eine Zahl zu potenzieren, können Sie den **Operator verwenden:

24. Abkürzung für Math.floor beim Runden von Zahlen

Anstatt die Math.floor()Funktion zum Abrunden einer Zahl zu verwenden, können Sie den ~~Operator verwenden:

25. Konvertieren Sie eine Zeichenfolge in eine Zahl

Sie können den unären Operator ( +) verwenden, um eine Zeichenfolge in eine Zahl umzuwandeln:

Ich wollte diese Kurzschrift in die Liste aufnehmen, aber man könnte darüber streiten, ob sie nützlich ist oder nicht, da sie tatsächlich etwas verwirrend aussehen könnte.