Unterschied zwischen var und let in JavaScript

Unterschied zwischen var und let in JavaScript

Vorwort:

var ist ein Schlüsselwort für die Variablendeklaration, das seit dem ersten Erscheinen JavaScript existiert, während let ein Schlüsselwort für die Variablendeklaration ist, das erst in ES6 auftauchte. Es gibt zweifellos einen großen Unterschied zwischen den beiden. Was sind also die konkreten Unterschiede?

1. Bereiche werden in verschiedenen Formen ausgedrückt

var ist Funktionsumfang, let ist Blockumfang

{
  var Affe = "Xun Wukong";
  let pig='Schweinekotelett-Abdeckung';    
}
console.log(monkey); //Ausgabe undefiniert
console.log(pig); //Fehler: Pig ist nicht definiert


Wie aus dem obigen Code ersichtlich ist, sind mit let deklarierte Variablen nur in dem Codeblock gültig, in dem sie sich befinden, und außerhalb des Codeblocks ungültig und nicht zugänglich, während mit var deklarierte Variablen im Funktionsbereich gültig sind, in dem sich der Codeblock befindet.

2. Der Unterschied zwischen variabler Promotion und Nicht-Promotion

Mit var deklarierte Variablen werden angehoben, mit let deklarierte Variablen werden jedoch nicht angehoben.

console.log(Affe); //undefiniert
var Affe = "Xun Wukong";

console.log(pig); //Fehler: Pig ist nicht definiert
let pig='Schweinekotelett-Abdeckung'; 


Warum wird nach derselben Logik eine mit var deklarierte Variable als undefiniert angezeigt, wenn sie vor ihrer Deklaration aufgerufen wird, während eine mit let deklarierte Variable eine Ausnahme auslöst, wenn sie vor ihrer Deklaration aufgerufen wird? Dies ist der Unterschied zwischen den beiden bei der Variablenpromotion. Mit var deklarierte Variablen haben eine Variablenpromotion, während dies bei mit let deklarierten Variablen nicht der Fall ist.

Was ist also variable Promotion? Ich werde hier keine konzeptionelle Beschreibung geben. Ich werde nur mein persönliches Verständnis davon äußern, dass der obige Code tatsächlich dem Folgenden entspricht:

var Affe;

console.log(Affe); //undefiniert
Affe = „Xun Wukong“;

console.log(pig); //Fehler: Pig ist nicht definiert
let pig='Schweinekotelett-Abdeckung'; 

Sehen Sie den Unterschied? Die mit var deklarierte Variable wird zur Definition an den Anfang des Gültigkeitsbereichs extrahiert, aber es wird kein Wert zugewiesen. Die Zuweisungsoperation befindet sich noch in Ihrem Code. Wenn Sie also die mit var deklarierte Variable aufrufen, handelt es sich um eine Variable, die deklariert, aber nicht definiert wurde. Das Ergebnis des Aufrufs ist also undefined . Dies ist die sogenannte Variablenpromotion. Für durch let definierte Variablen gibt es jedoch keine solche Variablenförderung.

3. Unterschiede bei temporären toten Zonen

Temporäre Totzone: Wenn eine Variable in einen Bereich aufgenommen wird und es im äußeren Bereich eine Variable mit demselben Namen gibt, hat dies keine Auswirkungen auf den äußeren Bereich, selbst wenn die Variable im Bereich geändert wird.

Die spezifischen Leistungen sind wie folgt:

für(var i=0;i<5;i++){
    setzeTimeout(Funktion(){
        Konsole.log(i)
    },1000)
}
für (lass i = 0; i < 5; i++) {
  setzeTimeout(Funktion(){
     Konsole.log(i)          
  },1000)  
}


Was sind die Ergebnisse der Ausführung dieser beiden Codes?

Das Ergebnis des ersten Codes ist, dass nach 1 Sekunde 5 5er nacheinander gedruckt werden. Das Ergebnis des zweiten Codes ist, dass nach 1 Sekunde 0, 1, 2, 3, 4 nacheinander gedruckt werden.

Warum besteht dieser Unterschied?

Da die Variable i im ersten Code durch das Schlüsselwort var deklariert wird, gibt es keine kritische Totzone, d. h. die Variable i, auf die Sie in setTimeout nach 1 Sekunde zugreifen, ist das i, nachdem die for-Schleife im globalen Kontext beendet ist, sodass die gedruckten Ergebnisse alle 5 sind;

Die Variable i im zweiten Code wird durch das Schlüsselwort let deklariert, wodurch eine kritische Totzone entsteht. Die Variable i in setTimeout ist der Wert von i, als Sie sie zu diesem Zeitpunkt gespeichert haben. Das i in diesem Speicherintervall wird sich nicht ändern, da es außerhalb dieselbe Variable i gibt und ihr ein anderer Wert zugewiesen ist. Es ist immer noch der zuvor gespeicherte Wert. Dies ist die Manifestation einer temporären Totzone und auch der Grund, warum der zweite Code nach der Ausführung nacheinander 0, 1, 2, 3, 4 ausgibt.

4. Im selben Kontext kann var wiederholt deklariert werden, let jedoch nicht

lass monkey='Xun Wukong';
let monkey = '逼马吻'; //Fehler: Bezeichner 'a' wurde bereits deklariert
var pig = 'Schweinekotelett-Abdeckung';
var pig = 'pig anal fissure'; //Normaler Zugriff, der Wert der Variable pig wird ersetzt

Dies ist das Ende dieses Artikels über den Unterschied zwischen var und let in JavaScript. Weitere Informationen zu var und let in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Was sind die Unterschiede zwischen var let const in JavaScript
  • Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
  • Detaillierte Erklärung der Unterschiede und Verwendung von var in JavaScript und let und const in ES6-Spezifikationen
  • Verstehen Sie den Unterschied zwischen den Schlüsselwörtern let, var und const in JavaScript
  • Detaillierte Erklärung des Unterschieds zwischen let- und var-Deklarationsvariablen in js
  • Eine kurze Analyse der Unterschiede zwischen var, let und const in JavaScript

<<:  So finden und löschen Sie doppelte Zeilen in MySQL

>>:  Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen

Artikel empfehlen

Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript

Vorwort Die erstmals in ES6 eingeführte „Destruct...

Erläuterung der Array-Verarbeitung in React und Redux

Dieser Artikel stellt einige häufig verwendete Fu...

So verwalten Sie mehrere Projekte auf dem CentOS SVN-Server

Eine Forderung Im Allgemeinen hat ein Unternehmen...

Interpretation und Verwendung verschiedener React-State-Manager

Zunächst müssen wir wissen, was ein Zustandsmanag...

So erfassen Sie Ausnahmen in React

Inhaltsverzeichnis Vorwort Fehlergrenze Jenseits ...

Einige Einstellungen von Div bezüglich Rahmen und Transparenz

rahmen: Stil = „Rahmenstil: durchgezogen; Rahmenbr...

Vue implementiert Beispielcode zur Formulardatenvalidierung

Fügen Sie dem el-form-Formular Regeln hinzu: Defi...

DHTML-Objekte (gemeinsame Eigenschaften verschiedener HTML-Objekte)

!DOCTYPE Gibt die Document Type Definition (DTD) ...

So verwenden Sie das Datums-Plugin vue-bootstrap-datetimepicker in vue-cli 3

Nachfragehintergrund In letzter Zeit plane ich, V...

Details zur Datenanzeige der Vue3-Listenschnittstelle

Inhaltsverzeichnis 1. Beispiel für die Anzeige de...

JavaScript Factory Pattern erklärt

Inhaltsverzeichnis Einfache Fabrik Fabrikmethode ...

MySQL-Fehler 1290 (HY000) Lösung

Ich habe lange mit einem Problem gekämpft und das...

Verwendung des Node.js-HTTP-Moduls

Inhaltsverzeichnis Vorwort HTTP HTTP-Server Datei...