11 unverzichtbare JavaScript- und TypeScript-Kurzschriften für effizientes Codieren

JavaScript und TypeScript sind sehr beliebte Programmiersprachen im Bereich der Webentwicklung. Beide verfügen über umfangreiche Funktionssätze und viele Syntaxverknüpfungen, die erheblich zur Verbesserung der Codierungseffizienz beitragen.

Erfahren Sie, wie Sie Ihren Code straffen und diese Sprachen mit einigen nützlichen Verknüpfungen optimal nutzen.

1. Ternärer Operator

Der ternäre Operator bietet eine prägnante und effiziente Syntax zum Ausdrücken bedingter Anweisungen. Es besteht aus drei Teilen: einer Bedingung, einem Ausdruck, der ausgeführt wird, wenn die Bedingung wahr ist, und einem Ausdruck, der ausgeführt wird, wenn sie falsch ist.

Dieser Operator erweist sich als besonders nützlich, wenn Entscheidungen auf der Grundlage von Bedingungen getroffen werden und dementsprechend unterschiedliche Werte zugewiesen werden.

Betrachten Sie das folgende Beispiel:

const Alter = 20;
const ageType = Alter >= 18? "Erwachsene": "Kind";
Konsole.log (ageType); // Ausgabe: „Erwachsener“

In diesem Beispiel wird der ternäre Operator verwendet, um zu prüfen, ob die Variable vorhanden ist Alter größer oder gleich ist 18. Wenn dies der Fall ist, weist der Code den Wert zu Erwachsene zur Variablen Alterstyp, andernfalls wird der Wert „Child“ zugewiesen.

2. Vorlagenliterale

Vorlagenliterale bieten eine leistungsstarke und effiziente Möglichkeit Formatieren von JavaScript-Strings und das Einbinden von Variablen oder Ausdrücken darin. Im Gegensatz zur herkömmlichen Zeichenfolgenverkettung mit einfachen oder doppelten Anführungszeichen verwenden Vorlagenliterale Backticks (`).

Diese einzigartige Syntax bietet mehrere Vorteile bei der Arbeit mit Zeichenfolgen. Betrachten Sie das folgende Beispiel, das die Verwendung von Vorlagenliteralen demonstriert:

const Name = „Alice“;
const Begrüßung = „Hallo, ${Name}!`;
Konsole.log (Begrüßung); // Ausgabe: „Hallo, Alice!“

Das Beispiel enthält die Name Variable im Vorlagenliteral mit ${}. Dadurch können Sie ganz einfach dynamische Strings erstellen.

3. Nullish Coalescing Operator

Der nullische Koaleszenzoperator (??) bietet eine bequeme Möglichkeit, Standardwerte zuzuweisen, wenn eine Variable einer von beiden ist Null oder nicht definiert. Es gibt den Operanden auf der rechten Seite zurück, wenn der Operand auf der linken Seite dies ist Null oder nicht definiert.

Betrachten Sie das folgende Beispiel:

const Benutzername = Null;
const displayName = Benutzername?? "Gast";
Konsole.log (Anzeigename); // Ausgabe: „Gast“

In diesem Beispiel, da die Variable Nutzername Ist Null, weist der nullish-Koaleszenzoperator den Standardwert zu Gast zur Variablen Anzeigename.

4. Kurzschlussbewertung

Mit der Kurzschlussauswertung können Sie prägnante bedingte Ausdrücke mit logischen Operatoren schreiben, z && Und ||. Dabei wird die Tatsache ausgenutzt, dass ein logischer Operator mit der Auswertung von Ausdrücken aufhört, sobald er das Ergebnis ermitteln kann.

Betrachten Sie das folgende Beispiel:

const Name = "John";
const Begrüßung = Name && „Hallo, ${Name}`;
Konsole.log (Begrüßung); // Ausgabe: „Hallo, John“

In diesem Beispiel wird nur der Ausdruck ausgewertet „Hallo, ${name}“. wenn die Variable Name hat einen wahren Wert. Andernfalls wird es kurzgeschlossen und der Wert von zugewiesen Name selbst an die Variable Gruß.

5. Kurzschrift für die Zuweisung von Objekteigenschaften

Beim Erstellen von Objekten haben Sie die Möglichkeit, eine Kurzschreibweise zu verwenden, die Variablen als Eigenschaften mit demselben Namen zuordnet.

Durch diese Kurzschreibweise entfällt die Notwendigkeit, sowohl den Eigenschaftsnamen als auch den Variablennamen redundant anzugeben, was zu einem saubereren und prägnanteren Code führt.

Betrachten Sie das folgende Beispiel:

const Vorname = "John";
const Nachname = "Damhirschkuh";
const person = { Vorname, Nachname };
Konsole.log (Person); // Ausgabe: { Vorname: „John“, Nachname: „Doe“ }

In diesem Beispiel werden die Eigenschaften zugewiesen Vorname Und Familienname, Nachname unter Verwendung der Kurzschreibweise.

6. Optionale Verkettung

Optionale Verkettung (?.) ermöglicht Ihnen den Zugriff auf verschachtelte Eigenschaften eines Objekts, ohne sich Gedanken über Null- oder undefinierte Zwischenwerte machen zu müssen. Wenn eine Eigenschaft in der Kette null oder undefiniert ist, wird der Ausdruck kurzgeschlossen und gibt undefiniert zurück.

Betrachten Sie das folgende Beispiel:

const Benutzer = { Name: „Alice“, Adresse: { Stadt: "New York", Land: "USA" }};
const Land = Benutzer.Adresse?.Land;
Konsole.log (Land); // Ausgabe: „USA“

Im obigen Beispiel stellt der optionale Verkettungsoperator sicher, dass der Code keinen Fehler auslöst, wenn der Adresse Eigentum oder die Land Eigentum fehlt.

7. Objektzerstörung

Objektzerstörung ist eine leistungsstarke Funktion in JavaScript und TypeScript, mit der Sie Eigenschaften aus Objekten extrahieren und sie mithilfe einer prägnanten Syntax Variablen zuweisen können.

Dieser Ansatz vereinfacht den Zugriff auf und die Bearbeitung von Objekteigenschaften. Schauen wir uns anhand eines Beispiels genauer an, wie die Objektdestrukturierung funktioniert:

const Benutzer = { Name: "John", Alter: 30 };
const { Name, Alter } = Benutzer;
Konsole.log (Name, Alter); // Ausgabe: „John“ 30

In diesem Beispiel werden die Variablen extrahiert Name Und Alter von dem Benutzer Objekt durch Objektdestrukturierung.

8. Spread-Operator

Der Spread-Operator (...) ermöglicht es Ihnen, Elemente eines Iterables, wie eines Arrays oder Objekts, in einzelne Elemente zu erweitern. Es ist nützlich, um Arrays zu kombinieren oder flache Kopien davon zu erstellen.

Betrachten Sie das folgende Beispiel:

const Zahlen = [1, 2, 3];
const newNumbers = [...Zahlen, 4, 5];
Konsole.log (newNumbers); // Ausgabe: [1, 2, 3, 4, 5]

Im obigen Beispiel erweitert der Spread-Operator die Zahlen Array in einzelne Elemente aufteilen, die dann miteinander kombiniert werden 4 Und 5 um ein neues Array zu erstellen, neue Zahlen.

9. Abkürzung für Objektschleife

Wenn Sie über Objekte iterieren, können Sie die verwenden für in Schleife in Kombination mit Objektdestrukturierung, um Objekteigenschaften bequem zu iterieren.

Betrachten Sie dieses Beispiel:

const Benutzer = { Name: "John", Alter: 30 };
für (const [Schlüsselwert] vonObjekt.entries (Benutzer)) { 
Konsole.Protokoll(`${key}: ${Wert}`);
}
// Ausgang:
// Name: John
// Alter: 30

Im Beispiel oben: Object.entries (Benutzer) gibt ein Array von Schlüssel-Wert-Paaren zurück, das dann bei jeder Iteration in die Variablen zerlegt wird Taste Und Wert.

10. Array.indexOf Kurzform unter Verwendung des bitweisen Operators

Sie können Anrufe an die ersetzen Array.indexOf Methode mit einer Abkürzung unter Verwendung des bitweisen Operators ~ um zu prüfen, ob ein Element in einem Array vorhanden ist. Die Abkürzung gibt den Index des Elements zurück, wenn es gefunden wird oder -1 falls nicht gefunden.

Betrachten Sie das folgende Beispiel:

const Zahlen = [1, 2, 3];
const index = ~numbers.indexOf(2);
Konsole.log (Index); // Ausgabe: -2

Im Beispiel oben: ~numbers.indexOf (2) kehrt zurück -2 Weil 2 ist am Index 1, und der bitweise Operator negiert den Index.

11. Werte in Boolesche Werte umwandeln mit!!

Zu Konvertieren Sie einen Wert explizit zu einem booleschen Wert können Sie den doppelten Negationsoperator (!!). Es wandelt effektiv einen wahren Wert um WAHR und ein falscher Wert zu FALSCH.

Betrachten Sie das folgende Beispiel:

const Wert1 = "Hallo";
const Wert2 = "";
Konsole.log(!!value1); // Ausgabe: true
Konsole.log(!!value2); // Ausgabe: false

Im Beispiel oben: !!Wert1 kehrt zurück WAHR weil die Zeichenfolge Hallo ist wahr, während !!Wert2 kehrt zurück FALSCH weil die leere Zeichenfolge falsch ist.

Code-Effizienz und Lesbarkeit freischalten

Durch die Verwendung dieser Abkürzungen in JavaScript und TypeScript können Sie Ihre Codierungseffizienz steigern und prägnanteren und lesbareren Code erstellen. Ob es um die Verwendung des ternären Operators, die Kurzschlussauswertung oder die Nutzung der Leistungsfähigkeit von Vorlagenliteralen geht, diese Abkürzungen bieten wertvolle Werkzeuge für effizientes Codieren.

Darüber hinaus die Abkürzung für Objekteigenschaftenzuweisung, optionale Verkettung und Objektdestrukturierung Vereinfachen Sie die Arbeit mit Objekten, während der Spread-Operator und die Array-Abkürzungen ein effizientes Array ermöglichen Manipulation. Wenn Sie diese Abkürzungen beherrschen, werden Sie ein produktiverer und effektiverer JavaScript- und TypeScript-Entwickler.