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

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

Aug 31, 2024 am 06:32 AM

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!

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!

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!

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
}

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]);

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!

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

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Stock Market GPT

Stock Market GPT

KI-gestützte Anlageforschung für intelligentere Entscheidungen

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Vercel Spa Routing und Ressourcenbelastung: Lösen Sie Probleme mit tiefem URL -Zugriff Vercel Spa Routing und Ressourcenbelastung: Lösen Sie Probleme mit tiefem URL -Zugriff Aug 13, 2025 am 10:18 AM

Dieser Artikel soll das Problem der tiefen URL -Aktualisierung oder des direkten Zugriffs lösen, wodurch die Seitungsressourcenladefehler bei der Bereitstellung von Einzelseiten -Anwendungen (SPAs) auf Vercel verursacht wird. Der Kern besteht darin, den Unterschied zwischen dem Routing -Umschreibmechanismus von Vercel und dem Parsen von Browser -Parsen relative Pfade zu verstehen. Durch die Konfiguration von Vercel.json, um alle Pfade zu index.html umzuleiten und die Referenzmethode der statischen Ressourcen in HTML zu korrigieren, ändern Sie den relativen Pfad in den absoluten Pfad, um sicherzustellen, dass die Anwendung alle Ressourcen korrekt unter eine URL laden kann.

SPA -Bereitstellungshandbuch für Einzel -Seiten -Anwendungen (Vercel Einzelseiten SPA -Bereitstellungshandbuch für Einzel -Seiten -Anwendungen (Vercel Einzelseiten Aug 13, 2025 pm 01:03 PM

Dieses Tutorial zielt darauf ab, das Problem des Ladens von Assets (CSS, JS, Bildern usw.) beim Zugriff auf mehrstufige URLs (wie z. B. /Projekte /Home) bei der Bereitstellung von Einzelseiten-Anwendungen (SPAS) auf Vercel zu lösen. Der Kern liegt darin, den Unterschied zwischen dem Routing -Umschreibmechanismus von Vercel und den relativen/absoluten Wegen in HTML zu verstehen. Stellen Sie durch die korrekte Konfiguration von Vercel.json sicher, dass alle nicht-file-Anfragen in Index.html umgeleitet werden und die Vermögensreferenzen in HTML als absolute Pfade korrigieren, wodurch ein stabiler Betrieb von Spa in jeder Tiefen-URL erreicht wird.

QWIK: Ein wiederauflösbares Framework für Sofortladungs-Web-Apps QWIK: Ein wiederauflösbares Framework für Sofortladungs-Web-Apps Aug 15, 2025 am 08:25 AM

QwikachievesInstantloadingByDefaultThroughResumability, Nothydration: 1) theserverrendershtmlwithserializedStateandand-MappentListerner;

Js fügen Element hinzu, um Array zu beginnen Js fügen Element hinzu, um Array zu beginnen Aug 14, 2025 am 11:51 AM

In JavaScript ist die häufigste Methode, um Elemente zu Beginn eines Arrays hinzuzufügen, die Verwendung der Unshift () -Methode. 1. Wenn Sie Unshift () verwenden, können Sie das ursprüngliche Array direkt ändern. Sie können ein oder mehrere Elemente hinzufügen, um die neue Länge des hinzugefügten Arrays zurückzugeben. 2. Wenn Sie das ursprüngliche Array nicht ändern möchten, wird empfohlen, den Erweiterungsoperator (z. B. [NewLement, ... arr]) zu verwenden, um ein neues Array zu erstellen. 3.. Sie können auch die concat () -Methode verwenden, um das neue Element -Array mit der ursprünglichen Nummer zu kombinieren, das neue Array zurückgibt, ohne das ursprüngliche Array zu ändern. Zusammenfassend verwenden Sie Unshift () beim Ändern des ursprünglichen Arrays und empfehlen Sie den Erweiterungsoperator, wenn Sie das ursprüngliche Array unverändert halten.

So laden Sie Bilder mit JavaScript. Laden Sie Bilder So laden Sie Bilder mit JavaScript. Laden Sie Bilder Aug 14, 2025 pm 06:43 PM

Usetheloading = "Lazy" AttributeFornativaLaLaLaLoadingInmodernBrowsers-WithoutjavaScript.2.FormoreControlOrolderBrowsersupport, implementleLaDingWithTheIntersectionObServerapibysettingData-SrcFeTheActualimageurlandusingAplaeholmerinsrc.3.obse

Eingehende Analyse gemeinsamer Schwachstellen und Verbesserungsstrategien für die Verteidigungsfunktionen von JavaScript XSS Eingehende Analyse gemeinsamer Schwachstellen und Verbesserungsstrategien für die Verteidigungsfunktionen von JavaScript XSS Aug 14, 2025 pm 10:06 PM

In diesem Artikel werden in den benutzerdefinierten Verteidigungsfunktionen von JavaScript XSS die angehenden Sicherheitslücken in den benutzerdefinierten JavaScript XSS untersucht, insbesondere in unvollständigen Charakter-Flucht und einfacher Umgehung der keyword-basierten Filterung. Durch die Analyse einer Beispielfunktion werden die Risiken unverarbeiteter Schlüsselwortzeichen wie Zitate und Backquoten angezeigt und wie Code -Verschleierungstechniken die einfache Keyword -Erkennung umgehen. Der Artikel betont die Bedeutung der kontextsensitiven Flucht und empfiehlt die Einführung ausgereifter Bibliotheken und Verteidigungsstrategien für mehrschichtige, um einen robusteren Sicherheitsschutz zu schaffen.

Optimieren Sie das Ereignishandling von dynamischen externen Link-Sprüngen im Jquery-Popup-Fenster Optimieren Sie das Ereignishandling von dynamischen externen Link-Sprüngen im Jquery-Popup-Fenster Sep 01, 2025 am 11:48 AM

Dieser Artikel zielt darauf ab, das Problem der Umleitung der externen Link-Umleitungstaste im Jquery-Popup-Fenster zu lösen, wodurch Sprungfehler verursacht werden. Wenn ein Benutzer nacheinander mehrere externe Links klickt, kann die Sprungschaltfläche im Popup immer auf den ersten Klick-Link verweisen. Die Kernlösung besteht darin, die OFF -Methode ('Click') zu verwenden, um den alten Ereignishandler vor jeder Bindung eines neuen Ereignisses rückgängig zu machen, um sicherzustellen, dass das Sprungverhalten immer auf die neueste Ziel -URL zeigt, wodurch eine genaue und kontrollierbare Umleitung von Link erreicht wird.

So greifen Sie in JavaScript auf und ändern Sie HTML -Elemente mit dem DOM So greifen Sie in JavaScript auf und ändern Sie HTML -Elemente mit dem DOM Aug 16, 2025 am 11:25 AM

ToaccessandModifyHtmlelementsuSusingjavaScript, FirstSelectTheelementuSusingMethodslikedocument

See all articles