Top 10 JavaScript Shorthands für Anfänger

JavaScript-Shorthands beschleunigen nicht nur den Codierprozess, sondern verkürzen auch die Scripts und führen daher zu schnelleren Seitenaufrufen . Kürzel sind genauso gültig wie ihre Langhandversionen; Sie stehen im Wesentlichen für das Gleiche - nur in einem kompakteren Format. Sie sind eine der einfachsten Code-Optimierungstechniken.

Es gibt mehrere JavaScript-Kürzel, sie haben jedoch keinen offiziellen Referenzleitfaden . Einige sind wirklich einfach, während andere sogar für erfahrene Entwickler ziemlich einschüchternd sind. In diesem Artikel finden Sie 10 JavaScript-Kürzel für Anfänger, mit denen Sie mit der Code-Optimierung beginnen und präziseren Code schreiben können.

1. Dezimalzahlen

Wenn Sie regelmäßig mit großen Dezimalzahlen arbeiten, kann diese Kurzschrift ein Glücksfall sein, da Sie nicht mehr alle Nullen eingeben müssen, ersetzen Sie sie einfach durch die e Notation. Zum Beispiel bedeutet 1e8 die Addition von acht Nullen nach der 1 Ziffer, es entspricht 100000000 .

Die Zahl nach dem Buchstaben e gibt die Anzahl der Nullen an, die hinter den Ziffern vor e . Ebenso ist 16e4 die Abkürzung für 160000 usw.

 / * Kurzschrift * / var myVar = 1e8; / * Langhand * / var myVar = 100000000; 

2. Inkrementieren, Dekrementieren

Die Inkrement-Kurzschrift besteht aus zwei Vorzeichen, das bedeutet, dass der Wert einer Variablen um eins erhöht werden soll . In ähnlicher Weise besteht die Dekrementkurzschrift aus zwei Vorzeichen und bedeutet, dass die Variable um eins dekrementiert werden soll .

Diese zwei shorthands können nur für numerische Datentypen verwandt werden . Sie haben eine unentbehrliche Rolle in Schleifen, ihr häufigster Anwendungsfall ist die for Schleife .

 / * Kurzschrift * / i ++; j--; / * Langhand * / i = i + 1; j = j-1; 

3. Addieren, ablenken, multiplizieren, dividieren

Für jede der vier grundlegenden mathematischen Operationen gibt es eine Kurzschrift: Addition, Ablenkung, Multiplikation und Division. Sie funktionieren ähnlich wie die Inkrement- und Dekrement-Operatoren, nur hier können Sie den Wert einer Variablen um eine beliebige Zahl (nicht nur um eine) ändern.

Im Beispiel unten wird die i Variable um 5 inkrementiert, j wird um 3 dekrementiert, k wird mit 10 multipliziert und l wird durch 2 .

 / * Kurzschrift * / i + = 5; j- = 3; k * = 10; l / = 2; / * Langhand * / i = i + 5; j = j-3; k = k * 10; l = 1/2; 

4. Bestimmen Sie die Zeichenposition

Die charAt() -Methode ist eine der am häufigsten verwendeten String-Methoden. Sie gibt das Zeichen an einer bestimmten Position zurück (z. B. das ^fünfte Zeichen einer Zeichenfolge). Es gibt eine einfache Kurzschrift, die Sie stattdessen verwenden können: Sie fügen die Zeichenposition in eckigen Klammern nach der Zeichenfolge hinzu.

charAt() dass die Methode charAt() Null basiert . Daher gibt myString[4] das myString[4] Zeichen in der Zeichenfolge ( "y" in dem Beispiel) zurück.

 var myString = "Alles Gute zum Geburtstag"; / * Kurzschrift * / myString [4]; / * Langhand * / myString.charAt (4); 

5. Deklarieren Sie Variablen in großen Mengen

Wenn Sie mehrere Variablen gleichzeitig erstellen möchten, müssen Sie sie nicht einzeln eingeben. Es genügt, das Schlüsselwort var (oder let ) nur einmal zu verwenden . Dann können Sie einfach die Variablen auflisten, die Sie erstellen möchten, getrennt durch ein Komma .

Mit dieser Abkürzung können Sie sowohl nicht definierte Variablen als auch Variablen mit einem Wert deklarieren.

 / * Kurzschrift * / var i, j = 5, k = "Guten Morgen", l, m = falsch; / * Langhand * / var i; var j = 5; var k = "Guten Morgen"; var l; var m = falsch; 

6. Deklarieren Sie ein assoziatives Array

Das Deklarieren eines Arrays in JavaScript ist eine relativ einfache Aufgabe, indem die var myArray = ["apple", "pear", "orange"] . Die Deklaration eines assoziativen Arrays ist jedoch etwas komplizierter, da hier nicht nur die Werte definiert werden müssen, sondern auch die Schlüssel (bei regulären Arrays sind die Schlüssel 0, 1, 2, 3, etc. ).

Ein assoziatives Array ist eine Sammlung von Schlüssel / Wert-Paaren . Der lange Weg besteht darin, das Array zu deklarieren und dann jedes Element einzeln hinzuzufügen. Mit der folgenden Kurzschrift können Sie jedoch auch das assoziative Array und alle seine Elemente gleichzeitig deklarieren .

Im folgenden Beispiel weist das assoziative Array myArray bekannten Personen (Schlüsseln) ihren Geburtsort (Werte) zu.

 / * Kurzschrift * / var myArray = {"Gnade Kelly": "Philadelphia", "Clint Eastwood": "San Francisco", "Humphrey Bogart": "New York City", "Sophia Loren": "Rom", "Ingrid Bergman ":" Stockholm "} / * Langhand * / var myArray = neues Array (); myArray ["Grace Kelly"] = "Philadelphia"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "New York City"; myArray ["Sophia Loren"] = "Rom"; myArray ["Ingrid Bergman"] = "Stockholm"; 

7. Deklarieren Sie ein Objekt

Die Abkürzung für die Objektdeklaration funktioniert ähnlich wie die für assoziative Arrays. Allerdings gibt es hier keine Schlüssel-Wert-Paare, sondern Eigenschaftswert-Paare, die Sie zwischen den geschweiften Klammern {} .

Der einzige Unterschied in der Kurzschreibensyntax besteht darin, dass Objekteigenschaften nicht in Anführungszeichen eingeschlossen sind ( name, placeOfBirth, age, wasJamesBond im folgenden Beispiel).

 / * Kurzschrift * / var myObj = {Name: "Sean Connery", OrtOfBirth: "Edinburgh", Alter: 86, wasJamesBond: true}; / * Longhand * / var myObj = neues Objekt (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edinburgh"; myObj.age = 86; myObj.wasJamesBond = wahr; 

8. Verwenden Sie den bedingten Operator

Der Bedingungsoperator (ternär) wird häufig als Verknüpfung für die if-else Anweisung verwendet . Es besteht aus drei Teilen :

1. die Bedingung
2. Was passiert, wenn die Bedingung wahr ist ( if ) if
3. Was passiert, wenn die Bedingung falsch ist ( else ) else

Im folgenden Beispiel senden wir eine einfache Nachricht (innerhalb der message ) an Personen, die in einen Club eintreten möchten. Unter Verwendung der Kurzschrift ist es nur eine Codezeile, um die Auswertung auszuführen .

 var Alter = 17; / * Kurzschrift * / var Nachricht = Alter> = 18? "Erlaubt": "Verweigert"; / * Longhand * / if (Alter> = 18) {var message = "Erlaubt"; } else {var message = "Verweigert"; } 

Wenn Sie es testen möchten, kopieren Sie einfach den Code in die Webkonsole (F12 in den meisten Browsern) und ändern Sie den Wert der Altersvariable einige Male.

9. Überprüfen Sie die Anwesenheit

Es kommt häufig vor, dass Sie prüfen müssen, ob eine Variable vorhanden ist oder nicht . Die "if presentation" -Handschrift hilft Ihnen, dies mit viel weniger Code zu tun.

Beachten Sie, dass die meisten Artikel zu JavaScript-Abkürzungen nicht die richtige Longhand-Form aufweisen, da die if( myVar ) -Notation nicht einfach prüft, ob die Variable nicht falsch ist, sondern auch eine Handvoll anderer Dinge. Die Variable kann nämlich nicht undefiniert, leer, null und falsch sein .

 var myVar = 99; / * Shorthand * / if (myVar) {console.log ("Die myVar-Variable ist definiert UND es ist nicht leer UND nicht null UND nicht falsch."); } / * Langhand * / if (typeof myVar! == "undefiniert" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == falsch) {console.log ("Die myVar Variable ist definiert und es ist nicht leer UND nicht null und nicht falsch. "); } 

Sie können testen, wie die Kurzschrift "if presence" funktioniert, indem Sie das folgende Code-Snippet in die myVar und den Wert von myVar einige Male myVar .

Um zu verstehen, wie diese Kurzschrift funktioniert, lohnt es sich, sie mit den Werten von "" (leere Zeichenfolge), false, 0, true, einer nicht leeren Zeichenfolge (z. B. "Hi" ), einer Zahl (z. B. 99 ) zu testen Variable ist nicht definiert (einfach var myVar; ).

10. Überprüfen Sie die Abwesenheit

Die Kurzschrift "if presentation" kann verwendet werden, um die Abwesenheit einer Variablen zu prüfen, indem ein Ausrufezeichen davor gesetzt wird . Das Ausrufezeichen ist der logische Nicht-Operator in JavaScript (und in den meisten Programmiersprachen).

Daher können Sie mit der if( !myVar ) -Notation überprüfen, ob die myVar Variable nicht definiert, leer, null oder falsch ist .

 var myVar; / * Kurzschrift * / if (! MyVar) {console.warn ("Die Variable myVar ist nicht definiert (OR) leer (OR) null (OR) falsch."); } / * Langhand * / if (typeof myVar === "undefiniert" || myVar === "" || myVar === null || myVar === 0 || myVar === false) {console.warn ("Die Variable myVar ist undefined (OR) leer (OR) null (OR) false."); } 

The Dash - Kabelloser Kopfhörer für Fitness-Tracking & Musik

Für die meisten von uns, die laufen oder trainieren, ist Musik ein fester Bestandteil jeder Trainingseinheit. Selbst Weltklasse-Athleten haben ihre Lieblingslieder oder Musikrichtungen, die sie hören können. Jedoch können normale Kopfhörer für die Arbeit völlig unzureichend sein.Kabel können sich verwickeln oder stören, außerdem müssen Sie Zubehör wie einen Musik-Player und einen Fitness-Tracker mitbringen. Aber was w

(Tech- und Design-Tipps)

Ein Blick in: Handlebars.js

In diesem Beitrag werden wir uns mit Handlebars beschäftigen, einer auf Moustache basierenden JavaScript-Template-Engine. Es teilt die gleichen Funktionen wie Moustache, bietet aber eine Reihe neuer Funktionen. Lenker ist ein handliches Vorlagenwerkzeug, insbesondere zum Anzeigen einer Datenserie in einer Form von JSON, das heutzutage ein allgemeines Datenformatierungsformular ist, das in einer Webanwendungs-API verwendet wird.

(Tech- und Design-Tipps)