Heim > Web-Frontend > js-Tutorial > Hauptteil

Tag-Astering-Variablen in JavaScript: „const', „let' und „var' anhand von Beispielen aus der Praxis verstehen.

WBOY
Freigeben: 2024-08-31 06:32:32
Original
692 Leute haben es durchsucht

Day astering Variables in JavaScript: Understanding `const`, `let`, and `var` with Real-World Examples.

Wenn Sie mit JavaScript arbeiten, lernen Sie als Erstes, wie man Variablen deklariert. Variablen sind wie Container, die Informationen wie Zahlen, Text oder sogar komplexe Daten speichern. In JavaScript gibt es drei Möglichkeiten, Variablen zu deklarieren: const, let und var. Jedes davon hat seine eigenen Regeln und Best Practices, was zunächst etwas verwirrend sein kann. In diesem Beitrag werden wir es anhand einfacher Beispiele aufschlüsseln, damit Sie besser verstehen, wann und wie Sie jedes einzelne verwenden.

Beispielcode

Beginnen wir mit einem einfachen Blick auf den Code:

`Javascript
const accountId = 14423;
var accountEmail = "aman@google.com";
let accountPassword = "12345";
accountCity = "jamshedpur";
lass AccountRoll;

// accountId = 13242; // Nicht erlaubt – wird einen Fehler auslösen

console.table([accountEmail, accountId, accountRoll, accountPassword]);
`

const verstehen

Die erste Variable, die wir mit const deklariert haben, ist accountId. Das Schlüsselwort const wird verwendet, wenn Sie eine Variable deklarieren möchten, deren Wert sich nie ändern soll. Sobald Sie einer Konstantenvariablen einen Wert zugewiesen haben, können Sie ihn nicht mehr einer anderen Variable zuweisen. Zum Beispiel:

const accountId = 14423;
accountId = 13242; // This will throw an error!
Nach dem Login kopieren

Im obigen Beispiel führt der Versuch, die Account-ID neu zuzuweisen, zu einem Fehler, da Const-Variablen nach ihrer anfänglichen Zuweisung unveränderlich sind.

Wichtige Punkte zu const:

  • Kann nicht neu zugewiesen werden: Sobald ein Wert einer Konstantenvariablen zugewiesen wurde, kann er nicht mehr geändert werden.
  • Blockbereich: Auf die Variable kann nur innerhalb des Blocks zugegriffen werden, in dem sie deklariert ist (z. B. innerhalb von {}).

Verstehen lassen

Als nächstes haben wir accountPassword mit let deklariert. Das Schlüsselwort let wird verwendet, wenn Sie eine Variable deklarieren möchten, deren Wert sich später ändern könnte. Im Gegensatz zu const können Sie eine let-Variable neu zuweisen:

let accountPassword = "12345";
accountPassword = "67890"; // This is perfectly fine!
Nach dem Login kopieren

Wie const ist auch let jedoch blockbezogen, was bedeutet, dass nur innerhalb des Blocks darauf zugegriffen werden kann, in dem es deklariert wurde.

Wichtige Punkte zu let:

  • Kann neu zugewiesen werden:Sie können den Wert einer Let-Variable ändern, nachdem sie zugewiesen wurde.
  • Blockbereich: Auf die Variable kann nur innerhalb des Blocks zugegriffen werden, in dem sie deklariert ist.

Var verstehen

Lassen Sie uns abschließend über var sprechen, so haben wir accountEmail deklariert. var ist die alte Art, Variablen in JavaScript zu deklarieren. Es weist einige wesentliche Unterschiede zu let und const auf:

var accountEmail = "aman@google.com";
var accountEmail = "john@google.com"; // This is allowed!
Nach dem Login kopieren

Wie Sie sehen, können Sie im Gegensatz zu let und const eine var-Variable im gleichen Gültigkeitsbereich ohne Fehler neu deklarieren. Dies kann manchmal zu Fehlern und unerwartetem Verhalten führen, weshalb viele Entwickler let und const.

bevorzugen

Wichtige Punkte zu var:

  • Kann neu zugewiesen und neu deklariert werden:Sie können den Wert ändern und sogar eine Var-Variable neu deklarieren.
  • Funktionsbereich: Im Gegensatz zu let und const, die einen Blockbereich haben, ist var funktionsbereichsgebunden. Dies bedeutet, dass innerhalb der Funktion, in der es deklariert wurde, darauf zugegriffen werden kann, jedoch nicht auf den Block beschränkt.

Ein schneller Vergleich

Hier ist ein kurzer Vergleich, um die Unterschiede zusammenzufassen:

{
    var x = 10;
    var x = 20; // Allowed, no error

    let y = 10;
    let y = 20; // Not allowed, will throw a syntax error
}
Nach dem Login kopieren

Praxisbeispiel: Verwendung von console.table

Am Ende unseres Codes verwenden wir console.table, um die Werte unserer Variablen in einem übersichtlichen Tabellenformat anzuzeigen:

console.table([accountEmail, accountId, accountRoll, accountPassword]);
Nach dem Login kopieren

Dies gibt eine Tabelle mit den aktuellen Werten von accountEmail, accountId, accountRoll und accountPassword aus. Dies ist eine praktische Möglichkeit, Ihre Variablen beim Debuggen oder einfach nur beim Überprüfen Ihrer Arbeit zu visualisieren.

Abschluss

Das Verständnis der Unterschiede zwischen const, let und var ist entscheidend für das Schreiben von sauberem, fehlerfreiem JavaScript-Code. Hier ist eine kurze Zusammenfassung:

  • Verwenden Sie const, wenn eine Variable konstant bleiben soll.
  • Verwenden Sie let, wenn Sie erwarten, dass sich der Wert der Variablen ändert.
  • Vermeiden Sie var, es sei denn, Sie haben einen bestimmten Grund, es zu verwenden (aufgrund seines funktionsbezogenen Verhaltens).

Wenn Sie diese drei Schlüsselwörter beherrschen, sind Sie auf dem besten Weg, zuverlässigeren und wartbareren JavaScript-Code zu schreiben. Ausführlichere Informationen finden Sie jederzeit in der MDN-Dokumentation.

Viel Spaß beim Codieren und bis zum nächsten Mal!!

Das obige ist der detaillierte Inhalt vonTag-Astering-Variablen in JavaScript: „const', „let' und „var' anhand von Beispielen aus der Praxis verstehen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage