In den meisten Fällen muss eine JavaScript-Anwendung mit Informationen arbeiten. Hier zwei Beispiele:
Ein Online-Shop – die Informationen können verkaufte Waren und einen Warenkorb umfassen.
Eine Chat-Anwendung – die Informationen können Benutzer, Nachrichten und vieles mehr umfassen.
Zur Speicherung dieser Informationen werden Variablen verwendet.
Eine Variable ist ein „benannter Speicher“ für Daten. Wir können Variablen verwenden, um Goodies, Besucher und andere Daten zu speichern.
Um eine Variable in JavaScript zu erstellen, verwenden Sie das Schlüsselwort let .
Die folgende Anweisung erstellt (mit anderen Worten: deklariert ) eine Variable mit dem Namen „Nachricht“:
Nachricht hinterlassen;
Jetzt können wir einige Daten einfügen, indem wir den Zuweisungsoperator = verwenden:
Nachricht hinterlassen; message = 'Hallo'; // speichere die Zeichenfolge „Hallo“ in der Variablen mit dem Namen „message“.
Die Zeichenfolge wird nun in dem mit der Variablen verknüpften Speicherbereich gespeichert. Wir können über den Variablennamen darauf zugreifen:
Nachricht hinterlassen; message = 'Hallo!'; Warnung (Nachricht); // zeigt den Variableninhalt an
Der Einfachheit halber können wir die Variablendeklaration und -zuweisung in einer einzigen Zeile kombinieren:
let message = 'Hallo!'; // Definiere die Variable und weise den Wert zu Warnung (Nachricht); // Hallo!
Wir können auch mehrere Variablen in einer Zeile deklarieren:
let user = 'John', age = 25, message = 'Hello';
Das mag kürzer erscheinen, wir empfehlen es aber nicht. Aus Gründen der besseren Lesbarkeit verwenden Sie bitte eine einzelne Zeile pro Variable.
Die mehrzeilige Variante ist etwas länger, aber besser lesbar:
let user = 'John'; lass Alter = 25; let message = 'Hallo';
Manche Leute definieren auch mehrere Variablen in diesem mehrzeiligen Stil:
let user = 'John', Alter = 25, message = 'Hallo';
…Oder sogar im „Komma-zuerst“-Stil:
let user = 'John' , Alter = 25 , message = 'Hallo';
Technisch gesehen bewirken alle diese Varianten das Gleiche. Es ist also eine Frage des persönlichen Geschmacks und der Ästhetik.
var statt let
In älteren Skripten finden Sie möglicherweise auch ein anderes Schlüsselwort: var anstelle von let :
var message = 'Hallo';
Das Schlüsselwort var ist fast dasselbe wie let . Es deklariert auch eine Variable, allerdings auf eine etwas andere, „altmodische“ Art und Weise.
Es gibt subtile Unterschiede zwischen let und var , aber sie spielen für uns noch keine Rolle. Wir werden sie im Kapitel „Die alte „Var““ ausführlich behandeln.
Wir können das Konzept einer „Variablen“ leicht verstehen, wenn wir sie uns als eine „Box“ für Daten vorstellen, auf der sich ein Aufkleber mit einem eindeutigen Namen befindet.
Beispielsweise kann man sich die Variable message als eine Box mit der Bezeichnung "message" und dem Wert "Hello!" vorstellen. darin:
Wir können jeden beliebigen Wert in das Feld eingeben.
Wir können es auch so oft ändern, wie wir wollen:
Nachricht hinterlassen; message = 'Hallo!'; message = 'Welt!'; // Wert geändert Warnung (Nachricht);
Wenn der Wert geändert wird, werden die alten Daten aus der Variablen entfernt:
Wir können auch zwei Variablen deklarieren und Daten von einer in die andere kopieren.
let hello = 'Hallo Welt!'; Nachricht hinterlassen; // „Hallo Welt“ aus „Hallo“ in die Nachricht kopieren Nachricht = Hallo; // Jetzt enthalten zwei Variablen dieselben Daten alarm(hallo); // Hallo Welt! Warnung (Nachricht); // Hallo Welt!
Eine zweimalige Deklaration löst einen Fehler aus
Eine Variable sollte nur einmal deklariert werden.
Eine wiederholte Deklaration derselben Variablen ist ein Fehler:
let message = „This“; // wiederholtes 'let' führt zu einem Fehler let message = „Das“; // SyntaxError: 'message' wurde bereits deklariert
Wir sollten also eine Variable einmal deklarieren und dann ohne let auf sie verweisen.
Funktionale Sprachen
Interessant ist, dass es sogenannte rein funktionale Programmiersprachen wie Haskell gibt, die das Ändern von Variablenwerten verbieten.
In solchen Sprachen bleibt der Wert, sobald er „in der Box“ gespeichert ist, für immer dort. Wenn wir etwas anderes speichern müssen, zwingt uns die Sprache, eine neue Box zu erstellen (eine neue Variable zu deklarieren). Wir können das alte nicht wiederverwenden.
Obwohl es auf den ersten Blick etwas seltsam erscheinen mag, sind diese Sprachen durchaus zu einer ernsthaften Entwicklung fähig. Darüber hinaus gibt es Bereiche wie parallele Berechnungen, in denen diese Einschränkung bestimmte Vorteile mit sich bringt.
Es gibt zwei Einschränkungen für Variablennamen in JavaScript:
Der Name darf nur Buchstaben, Ziffern oder die Symbole $ und _ enthalten.
Das erste Zeichen darf keine Ziffer sein.
Beispiele für gültige Namen:
let userName; lass test123;
Wenn der Name mehrere Wörter enthält, wird üblicherweise „camelCase“ verwendet. Das heißt: Wörter folgen nacheinander, wobei jedes Wort außer dem ersten mit einem Großbuchstaben beginnt: myVeryLongName .
Interessanterweise können auch das Dollarzeichen '$' und der Unterstrich '_' in Namen verwendet werden. Es handelt sich um regelmäßige Symbole, genau wie Buchstaben, ohne besondere Bedeutung.
Diese Namen sind gültig:
sei $ = 1; // eine Variable mit dem Namen „$“ deklariert sei _ = 2; // und jetzt eine Variable mit dem Namen „_“ alarm($ + _); // 3
Beispiele für falsche Variablennamen:
sei 1a; // kann nicht mit einer Ziffer beginnen lass meinen Namen; // Bindestriche „-“ sind im Namen nicht zulässig
Der Fall zählt
Variablen namens apple und APPLE sind zwei verschiedene Variablen.
Nicht-lateinische Buchstaben sind erlaubt, aber nicht empfohlen
Es ist möglich, jede beliebige Sprache zu verwenden, einschließlich kyrillischer Buchstaben, chinesischer Logogramme usw., wie folgt:
let имя = '...'; let 我 = '...';
Technisch gesehen liegt hier kein Fehler vor. Solche Namen sind zulässig, es gibt jedoch eine internationale Konvention, Englisch in Variablennamen zu verwenden. Selbst wenn wir ein kleines Drehbuch schreiben, kann es eine lange Lebensdauer vor sich haben. Menschen aus anderen Ländern müssen es möglicherweise irgendwann lesen.
Reservierte Namen
Es gibt eine Liste reservierter Wörter, die nicht als Variablennamen verwendet werden können, da sie von der Sprache selbst verwendet werden.
Beispiel: let , class , return und function sind reserviert.
Der folgende Code gibt einen Syntaxfehler aus:
lass lass = 5; // Eine Variable kann nicht „let“ genannt werden, Fehler! let return = 5; // kann es auch nicht „return“ nennen, Fehler!
Eine Zuweisung ohne use strict
Normalerweise müssen wir eine Variable definieren, bevor wir sie verwenden können. Aber früher war es technisch möglich, eine Variable durch bloße Zuweisung des Werts zu erstellen, ohne let zu verwenden. Dies funktioniert auch jetzt noch, wenn wir in unseren Skripten nicht use strict verwenden, um die Kompatibilität mit alten Skripten aufrechtzuerhalten.
// Hinweis: In diesem Beispiel gibt es kein „use strict“. Anzahl = 5; // die Variable „num“ wird erstellt, wenn sie nicht existiert alarm(num); // 5
Dies ist eine schlechte Praxis und würde im strikten Modus einen Fehler verursachen:
„strikt verwenden“; Anzahl = 5; // Fehler: Anzahl ist nicht definiert
Um eine konstante (unveränderliche) Variable zu deklarieren, verwenden Sie const anstelle von let :
const myBirthday = '18.04.1982';
Mit const deklarierte Variablen werden „Konstanten“ genannt. Sie können nicht neu zugewiesen werden. Ein Versuch, dies zu tun, würde einen Fehler verursachen:
const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // Fehler, die Konstante kann nicht neu zugewiesen werden!
Wenn ein Programmierer sicher ist, dass sich eine Variable nie ändern wird, kann er sie mit const deklarieren, um diese Tatsache zu garantieren und allen mitzuteilen.
Es ist weit verbreitet, Konstanten als Aliase für schwer zu merkende Werte zu verwenden, die vor der Ausführung bekannt sind.
Solche Konstanten werden mit Großbuchstaben und Unterstrichen benannt.
Lassen Sie uns zum Beispiel Konstanten für Farben im sogenannten „Web“-Format (Hexadezimalformat) erstellen:
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...wenn wir eine Farbe auswählen müssen let color = COLOR_ORANGE; Warnung (Farbe); // #FF7F00
Vorteile:
COLOR_ORANGE ist viel einfacher zu merken als "#FF7F00" .
Es ist viel einfacher, "#FF7F00" falsch einzugeben als COLOR_ORANGE .
Beim Lesen des Codes ist COLOR_ORANGE viel aussagekräftiger als #FF7F00 .
Wann sollten wir eine Konstante in Großbuchstaben schreiben und wann sollten wir sie normal benennen? Machen wir das klar.
Eine „Konstante“ zu sein bedeutet lediglich, dass sich der Wert einer Variablen nie ändert. Einige Konstanten sind jedoch vor der Ausführung bekannt (z. B. ein Hexadezimalwert für Rot), und einige Konstanten werden zur Laufzeit während der Ausführung berechnet , ändern sich jedoch nach ihrer anfänglichen Zuweisung nicht.
Zum Beispiel:
const pageLoadTime = /* Zeit, die eine Webseite zum Laden benötigt */;
Der Wert von pageLoadTime ist vor dem Laden der Seite nicht bekannt, daher wird er normal benannt. Aber es ist immer noch eine Konstante, weil es sich nach der Zuweisung nicht ändert.
Mit anderen Worten: Konstanten mit Großbuchstaben werden nur als Aliase für „hartcodierte“ Werte verwendet.
Wenn wir über Variablen sprechen, gibt es noch eine weitere äußerst wichtige Sache.
Ein Variablenname sollte eine klare, offensichtliche Bedeutung haben und die darin gespeicherten Daten beschreiben.
Die Benennung von Variablen ist eine der wichtigsten und komplexesten Fähigkeiten in der Programmierung. Ein Blick auf die Variablennamen verrät, welcher Code von einem Anfänger und einem erfahrenen Entwickler geschrieben wurde.
In einem echten Projekt wird die meiste Zeit damit verbracht, eine vorhandene Codebasis zu ändern und zu erweitern, anstatt etwas völlig Eigenes von Grund auf zu schreiben. Wenn wir zu einem Code zurückkehren, nachdem wir eine Zeit lang etwas anderes getan haben, ist es viel einfacher, gut beschriftete Informationen zu finden. Oder anders gesagt, wenn die Variablen gute Namen haben.
Bitte denken Sie über den richtigen Namen für eine Variable nach, bevor Sie sie deklarieren. Wenn Sie dies tun, werden Sie sich dafür reichlich entschädigen.
Einige gut zu befolgende Regeln sind:
Verwenden Sie für Menschen lesbare Namen wie userName oder shoppingCart .
Vermeiden Sie Abkürzungen oder Kurznamen wie a , b und c , es sei denn, Sie wissen, was Sie tun.
Machen Sie Namen möglichst aussagekräftig und prägnant. Beispiele für schlechte Namen sind data und value . Solche Namen sagen nichts. Ihre Verwendung ist nur dann in Ordnung, wenn der Kontext des Codes besonders deutlich macht, auf welche Daten oder Werte die Variable verweist.
Vereinbaren Sie Bedingungen innerhalb Ihres Teams und in Ihrem Kopf. Wenn ein Website-Besucher als „Benutzer“ bezeichnet wird, sollten wir die zugehörigen Variablen currentUser oder newUser anstelle von currentVisitor oder newManInTown nennen.
Klingt einfach? In der Tat ist dies der Fall, die Erstellung beschreibender und prägnanter Variablennamen ist in der Praxis jedoch nicht der Fall. Tue es.
Wiederverwenden oder erstellen?
Und die letzte Anmerkung. Es gibt einige faule Programmierer, die, anstatt neue Variablen zu deklarieren, dazu neigen, vorhandene wiederzuverwenden.
Dadurch sind ihre Variablen wie Kisten, in die Menschen verschiedene Dinge werfen, ohne ihre Aufkleber zu wechseln. Was ist jetzt in der Box? Wer weiß? Wir müssen näher kommen und nachsehen.
Solche Programmierer sparen ein wenig bei der Variablendeklaration, verlieren aber zehnmal mehr beim Debuggen.
Eine zusätzliche Variable ist gut, nicht böse.
Moderne JavaScript-Minifier und Browser optimieren den Code gut genug, sodass keine Leistungsprobleme auftreten. Die Verwendung unterschiedlicher Variablen für unterschiedliche Werte kann der Engine sogar dabei helfen, Ihren Code zu optimieren.
Wir können Variablen zum Speichern von Daten deklarieren, indem wir die Schlüsselwörter var , let oder const verwenden.
let – ist eine moderne Variablendeklaration.
var – ist eine Variablendeklaration der alten Schule. Normalerweise verwenden wir es überhaupt nicht, aber wir werden subtile Unterschiede zu let im Kapitel „Die alte „var““ behandeln, nur für den Fall, dass Sie sie brauchen.
const – ist wie let , aber der Wert der Variablen kann nicht geändert werden.
Variablen sollten so benannt werden, dass wir leicht verstehen können, was in ihnen enthalten ist.
Wichtigkeit: 2
Deklarieren Sie zwei Variablen: admin und name .
Weisen Sie name den Wert "John" zu.
Kopieren Sie den Wert von name nach admin .
Zeigen Sie den Wert von admin mithilfe alert an (muss „John“ ausgeben).
Im folgenden Code entspricht jede Zeile dem Element in der Aufgabenliste.
Lassen Sie Admin, Name; // kann zwei Variablen gleichzeitig deklarieren name = „John“; admin = Name; alarm( admin ); // „John“
Wichtigkeit: 3
Erstellen Sie eine Variable mit dem Namen unseres Planeten. Wie würden Sie eine solche Variable benennen?
Erstellen Sie eine Variable, um den Namen eines aktuellen Besuchers einer Website zu speichern. Wie würden Sie diese Variable benennen?
Das ist einfach:
let ourPlanetName = "Erde";
Beachten Sie, dass wir einen kürzeren Namen „ planet “ verwenden könnten, aber es ist möglicherweise nicht offensichtlich, auf welchen Planeten er sich bezieht. Es ist schön, ausführlicher zu sein. Zumindest bis die Variable NotTooLong ist.
let currentUserName = "John";
Auch hier könnten wir das auf userName verkürzen, wenn wir sicher wissen, dass der Benutzer aktuell ist.
Moderne Editoren und Autovervollständigung erleichtern das Schreiben langer Variablennamen. Sparen Sie nicht daran. Ein Name mit drei Wörtern ist in Ordnung.
Und wenn Ihr Editor nicht über eine ordnungsgemäße Autovervollständigung verfügt, besorgen Sie sich einen neuen.
Wichtigkeit: 4
Untersuchen Sie den folgenden Code:
const Geburtstag = '18.04.1982'; const age = someCode(birthday);
Hier haben wir für das Datum einen konstanten birthday und auch die age .
Das age wird ab birthday mit someCode() berechnet, was einen Funktionsaufruf bedeutet, den wir noch nicht erklärt haben (wir werden es bald tun!), aber die Details spielen hier keine Rolle, der Punkt ist, dass age irgendwie basierend auf berechnet wird birthday .
Wäre es richtig, birthday in Großbuchstaben zu schreiben? Für age ? Oder sogar für beides?
const BIRTHDAY = '18.04.1982'; // Geburtstag in Großbuchstaben schreiben? const AGE = someCode(BIRTHDAY); // Alter in Großbuchstaben schreiben?
Für Konstanten, die „hart codiert“ sind, verwenden wir im Allgemeinen Großbuchstaben. Oder mit anderen Worten, wenn der Wert vor der Ausführung bekannt ist und direkt in den Code geschrieben wird.
In diesem Code ist birthday genau so. Wir könnten also die Großschreibung dafür verwenden.
Im Gegensatz dazu wird age zur Laufzeit ausgewertet. Heute haben wir ein Alter, ein Jahr später werden wir ein anderes haben. Es ist in dem Sinne konstant, dass es sich durch die Codeausführung nicht ändert. Aber es ist etwas „weniger eine Konstante“ als birthday “: Es wird berechnet, daher sollten wir die Kleinschreibung beibehalten.