Ich habe gehört, dass es als beschrieben wird local
variabel, aber ich bin mir immer noch nicht ganz sicher, wie es sich anders verhält als die var
Stichwort.
Was sind die Unterschiede? Wann sollte let
statt verwendet werden var
?
let
kann auch verwendet werden, um Probleme mit Verschlüssen zu vermeiden. Es bindet neue Werte, anstatt eine alte Referenz beizubehalten, wie in den Beispielen unten gezeigt.
for(var i=1; i<6; i++) {
$("#div" + i).click(function () { console.log(i); });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Clicking on each number will log to console:</p>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
Der obige Code zeigt ein klassisches JavaScript-Closure-Problem. Verweis auf die i
Die Variable wird in der Click-Handler-Closure gespeichert und nicht der tatsächliche Wert von i
.
Jeder einzelne Klick-Handler verweist auf dasselbe Objekt, da es nur ein Zählerobjekt gibt, das 6 enthält, sodass Sie bei jedem Klick sechs erhalten.
Eine allgemeine Problemumgehung besteht darin, dies in eine anonyme Funktion einzuschließen und zu übergeben i
als Argument. Solche Probleme können jetzt auch vermieden werden, indem verwendet wird let
stattdessen var
wie im folgenden Code gezeigt.
(Getestet in Chrome und Firefox 50)
for(let i=1; i<6; i++) {
$("#div" + i).click(function () { console.log(i); });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Clicking on each number will log to console:</p>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
Hier ist ein Erklärung der let
Stichwort mit einigen Beispielen.
let
funktioniert sehr ähnlich var
. Der Hauptunterschied besteht darin, dass der Geltungsbereich von a var
Variable ist die gesamte einschließende Funktion
Dieser Tisch auf Wikipedia zeigt, welche Browser Javascript 1.7 unterstützen.
Beachten Sie, dass dies nur von Mozilla- und Chrome-Browsern unterstützt wird. IE, Safari und möglicherweise andere nicht.
Der akzeptierten Antwort fehlt ein Punkt:
{
let a = 123;
};
console.log(a); // ReferenceError: a is not defined
let
Bereich blockieren
Variablen, die mit dem deklariert wurden let
Schlüsselwörter sind blockbezogen, was bedeutet, dass sie nur in verfügbar sind Block in denen sie deklariert wurden.
Auf oberster Ebene (außerhalb einer Funktion)
Auf der obersten Ebene werden Variablen mit deklariert let
Erstellen Sie keine Eigenschaften für das globale Objekt.
var globalVariable = 42;
let blockScopedVariable = 43;
console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43
console.log(this.globalVariable); // 42
console.log(this.blockScopedVariable); // undefined
Innerhalb einer Funktion
Innerhalb einer Funktion (aber außerhalb eines Blocks), let
hat den gleichen Umfang wie var
.
(() => {
var functionScopedVariable = 42;
let blockScopedVariable = 43;
console.log(functionScopedVariable); // 42
console.log(blockScopedVariable); // 43
})();
console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined
Innerhalb eines Blocks
Variablen deklariert mit let
Innerhalb eines Blocks kann außerhalb dieses Blocks nicht zugegriffen werden.
{
var globalVariable = 42;
let blockScopedVariable = 43;
console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43
}
console.log(globalVariable); // 42
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined
Innerhalb einer Schleife
Mit deklarierte Variablen let
in Schleifen kann nur innerhalb dieser Schleife referenziert werden.
for (var i = 0; i < 3; i++) {
var j = i * 2;
}
console.log(i); // 3
console.log(j); // 4
for (let k = 0; k < 3; k++) {
let l = k * 2;
}
console.log(typeof k); // undefined
console.log(typeof l); // undefined
// Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.
Schlaufen mit Verschlüssen
Wenn du benutzt let
anstatt var
in einer Schleife, mit jeder Iteration erhalten Sie eine neue Variable. Das bedeutet, dass Sie einen Verschluss sicher in einer Schlaufe verwenden können.
// Logs 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// Logs 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log(j), 0);
}
Zeitliche Totzone
Aufgrund der zeitlichen Totzone werden Variablen, die mit deklariert werden let
kann nicht zugegriffen werden, bevor sie deklariert sind. Der Versuch, dies zu tun, löst einen Fehler aus.
console.log(noTDZ); // undefined
var noTDZ = 43;
console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
let hasTDZ = 42;
Keine Neuanmeldung
Sie können dieselbe Variable nicht mehrmals mit deklarieren let
. Sie können eine Variable auch nicht mit deklarieren let
mit demselben Bezeichner wie eine andere Variable, die mit deklariert wurde var
.
var a;
var a; // Works fine.
let b;
let b; // SyntaxError: Identifier 'b' has already been declared
var c;
let c; // SyntaxError: Identifier 'c' has already been declared
const
const
ist ziemlich ähnlich let
– es ist blockbezogen und hat TDZ. Es gibt jedoch zwei Dinge, die anders sind.
Keine Neuzuordnung
Variable deklariert mit const
kann nicht neu zugeordnet werden.
const a = 42;
a = 43; // TypeError: Assignment to constant variable.
Beachten Sie, dass dies nicht bedeutet, dass der Wert unveränderlich ist. Seine Eigenschaften können noch geändert werden.
const obj = {};
obj.a = 42;
console.log(obj.a); // 42
Wenn Sie ein unveränderliches Objekt haben möchten, sollten Sie verwenden Object.freeze()
.
Initialisierer ist erforderlich
Sie müssen immer einen Wert angeben, wenn Sie eine Variable mit deklarieren const
.
const a; // SyntaxError: Missing initializer in const declaration
ECMAScript ist der Standard und
let
ist enthalten in der Entwurf der 6. Auflage und wird höchstwahrscheinlich in der endgültigen Spezifikation enthalten sein.– Richard Ayotte
31. März 2012 um 15:08 Uhr
Sehen kangax.github.io/es5-compat-table/es6 für eine aktuelle Support-Matrix der ES6-Funktionen (einschließlich Let). Zum Zeitpunkt des Schreibens unterstützen Firefox, Chrome und IE11 alle (obwohl ich glaube, dass die Implementierung von FF nicht ganz dem Standard entspricht).
– Nico Burns
17. Januar 2014 um 12:37 Uhr
Die längste Zeit wusste ich nicht, dass Variablen in einer for-Schleife auf die Funktion beschränkt waren, in die sie gewickelt war. Ich erinnere mich, dass ich das zum ersten Mal herausgefunden habe und fand es sehr dumm. Ich sehe jedoch eine gewisse Macht, wenn ich jetzt weiß, wie die beiden aus unterschiedlichen Gründen verwendet werden könnten und wie Sie in einigen Fällen möglicherweise eine Variable in einer for-Schleife verwenden und nicht auf den Block beschränken möchten.
– Eric Bishard
7. Mai 2015 um 13:54 Uhr
Da sich die ES6-Funktionsunterstützung verbessert, verschiebt sich die Frage nach der Einführung von ES6 von der Funktionsunterstützung hin zu Leistungsunterschieden. So wie, Hier ist eine Seite, die ich gefunden habe, um Leistungsunterschiede zwischen ES6 und ES5 zu vergleichen. Beachten Sie, dass sich dies wahrscheinlich im Laufe der Zeit ändern wird, wenn die Engines für ES6-Code optimiert werden.
– Timolawl
4. Mai 2016 um 1:02 Uhr