Was ist der Unterschied zwischen der Verwendung von “let” und “var”?

Lesezeit: 11 Minuten

Was ist der Unterschied zwischen der Verwendung von let und
TM.

ECMAScript 6 eingeführt der let Aussage.

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?

  • 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


Was ist der Unterschied zwischen der Verwendung von let und
Gurpreet Singh

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>

  • Das ist eigentlich cool. Ich würde erwarten, dass “i” außerhalb des Schleifenkörpers definiert wird, der in Klammern enthalten ist, und KEINE “Schließung” um “i” bildet. Natürlich beweist Ihr Beispiel das Gegenteil. Ich denke, es ist aus Sicht der Syntax etwas verwirrend, aber dieses Szenario ist so verbreitet, dass es sinnvoll ist, es auf diese Weise zu unterstützen. Vielen Dank, dass Sie dies angesprochen haben.

    – Karol Kolenda

    27. Juli 2015 um 12:49 Uhr

  • IE 11 unterstützt let, aber es warnt “6” für alle Tasten. Haben Sie eine Quelle, die sagt, wie let soll sich benehmen?

    – Jim Hunziker

    22. Oktober 2015 um 13:29 Uhr

  • Sieht so aus, als ob Ihre Antwort das richtige Verhalten ist: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Jim Hunziker

    22. Oktober 2015 um 13:32 Uhr

  • In der Tat ist dies eine häufige Falle in Javascript und jetzt kann ich sehen, warum let wäre wirklich nützlich. Das Festlegen von Ereignis-Listenern in einer Schleife erfordert keinen sofort aufgerufenen Funktionsausdruck mehr für das lokale Scoping i bei jeder Iteration.

    – Adrian Moisa

    21. Februar 2016 um 8:12 Uhr

  • Die Verwendung von “let” verschiebt dieses Problem nur. Jede Iteration erstellt also einen privaten unabhängigen Blockbereich, aber die Variable “i” kann immer noch durch nachfolgende Änderungen innerhalb des Blocks beschädigt werden (vorausgesetzt, die Iteratorvariable ist dies nicht meistens innerhalb des Blocks geändert werden, aber andere deklarierte let-Variablen innerhalb des Blocks können durchaus sein) und jede innerhalb des Blocks deklarierte Funktion kann, wenn sie aufgerufen wird, den Wert von “i” für andere innerhalb des Blocks deklarierte Funktionen beschädigen, weil sie tun denselben privaten Blockbereich teilen, daher denselben Verweis auf “i”.

    – Gary

    7. September 2016 um 23:10 Uhr

  • zu Antwort v4: i IST überall im Funktionsblock bekannt! Es beginnt als undefined (wegen Heben) bis Sie einen Wert zuweisen! ps: let wird ebenfalls hochgezogen (an die Spitze des enthaltenden Blocks), gibt aber a ReferenceError wenn im Block vor der ersten Zuweisung referenziert wird. (ps2: Ich bin ein Pro-Semikolon-Typ, aber Sie brauchen wirklich kein Semikolon nach einem Block). Trotzdem danke, dass du den Realitätscheck bezüglich des Supports hinzugefügt hast!

    – GitaarLAB

    21. Mai 2016 um 4:41 Uhr

  • @GitaarLAB: Laut dem Mozilla-Entwicklernetzwerk : „In ECMAScript 2015 unterliegen let-Bindungen nicht dem Variablen-Hoisting, was bedeutet, dass let-Deklarationen nicht an den Anfang des aktuellen Ausführungskontexts verschoben werden.“ – Wie auch immer, ich habe einige Verbesserungen an meiner Antwort vorgenommen, die den Unterschied im Hebeverhalten zwischen verdeutlichen sollten let und var!

    – John Slegers

    26. Februar 2018 um 23:37 Uhr

  • Ihre Antwort hat sich stark verbessert (ich habe es gründlich überprüft). Beachten Sie, dass derselbe Link, auf den Sie in Ihrem Kommentar verwiesen haben, auch besagt: „Die (let) Variable befindet sich in einer „zeitlichen Totzone“ von der Beginn des Blocks bis die Initialisierung verarbeitet ist.” Das bedeutet, dass der ‘Bezeichner’ (die Textzeichenfolge ‘reserviert’, um auf ‘etwas’ zu zeigen) ist schon im relevanten Bereich reserviert, sonst würde es Teil des Root/Host/Window-Bereichs werden. „Heben“ bedeutet für mich persönlich nichts anderes als das Reservieren/Verknüpfen deklarierter „Identifikatoren“ mit ihrem jeweiligen Geltungsbereich; ausgenommen deren Initialisierung/Zuweisung/Änderbarkeit!

    – GitaarLAB

    1. März 2018 um 18:16 Uhr

  • Und..+1. Der Artikel von Kyle Simpson, den Sie verlinkt haben, ist ein Ausgezeichnet lesen, danke dafür! Klar ist auch die „zeitliche Totzone“ alias „TDZ“. Eine interessante Sache, die ich hinzufügen möchte: Ich habe das auf MDN gelesen let und const wurden Es wird empfohlen, sie nur zu verwenden, wenn Sie ihre zusätzlichen Funktionen tatsächlich benötigenda das Erzwingen/Überprüfen dieser zusätzlichen Funktionen (wie z .

    – GitaarLAB

    1. März 2018 um 18:17 Uhr

  • Beachten Sie, dass MDN sagt, dass IE let richtig interpretiert. Welches ist es? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Katinka Hesselink

    6. Februar 2019 um 12:42 Uhr

1646880913 319 Was ist der Unterschied zwischen der Verwendung von let und
Ben S

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 Schlüsseltext aus dem verlinkten Dokument scheint zu sein: “let funktioniert sehr ähnlich wie var. Der Hauptunterschied besteht darin, dass der Gültigkeitsbereich einer var-Variablen die gesamte einschließende Funktion ist”.

    – Michael Burr

    17. April 2009 um 20:25 Uhr

  • @olliej, eigentlich ist Mozilla dem Spiel nur knapp voraus. Siehe Seite 19 von ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

    – Tyler Crompton

    18. Juni 2012 um 20:16 Uhr

  • @TylerCrompton, das sind nur die Wörter, die seit Jahren reserviert sind. Als Mozilla hinzugefügt wurde, war let eine reine Mozilla-Erweiterung ohne zugehörige Spezifikation. ES6 sollte das Verhalten für let-Anweisungen definieren, aber das kam, nachdem Mozilla die Syntax eingeführt hatte. Denken Sie daran, dass Moz auch E4X hat, das völlig tot ist und nur Moz.

    – Oliej

    11. Juli 2012 um 18:49 Uhr

  • IE11 hat Unterstützung für hinzugefügt let msdn.microsoft.com/en-us/library/ie/dn342892%28v=vs.85%29.aspx

    – eloyesp

    24. Dezember 2013 um 12:59 Uhr

  • Jetzt let unterstützt heute alle aktuellen Browser mit Ausnahme von Opera, Blackberry und QQ Browsern.

    – Shapon Kumpel

    8. Januar 2019 um 5:11 Uhr


1646880913 682 Was ist der Unterschied zwischen der Verwendung von let und
Wilhelm

Der akzeptierten Antwort fehlt ein Punkt:

{
  let a = 123;
};

console.log(a); // ReferenceError: a is not defined

  • Der Schlüsseltext aus dem verlinkten Dokument scheint zu sein: “let funktioniert sehr ähnlich wie var. Der Hauptunterschied besteht darin, dass der Gültigkeitsbereich einer var-Variablen die gesamte einschließende Funktion ist”.

    – Michael Burr

    17. April 2009 um 20:25 Uhr

  • @olliej, eigentlich ist Mozilla dem Spiel nur knapp voraus. Siehe Seite 19 von ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

    – Tyler Crompton

    18. Juni 2012 um 20:16 Uhr

  • @TylerCrompton, das sind nur die Wörter, die seit Jahren reserviert sind. Als Mozilla hinzugefügt wurde, war let eine reine Mozilla-Erweiterung ohne zugehörige Spezifikation. ES6 sollte das Verhalten für let-Anweisungen definieren, aber das kam, nachdem Mozilla die Syntax eingeführt hatte. Denken Sie daran, dass Moz auch E4X hat, das völlig tot ist und nur Moz.

    – Oliej

    11. Juli 2012 um 18:49 Uhr

  • IE11 hat Unterstützung für hinzugefügt let msdn.microsoft.com/en-us/library/ie/dn342892%28v=vs.85%29.aspx

    – eloyesp

    24. Dezember 2013 um 12:59 Uhr

  • Jetzt let unterstützt heute alle aktuellen Browser mit Ausnahme von Opera, Blackberry und QQ Browsern.

    – Shapon Kumpel

    8. Januar 2019 um 5:11 Uhr


1646880913 876 Was ist der Unterschied zwischen der Verwendung von let und
ketchupisrot

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

  • Dies ist eine sehr klare Erklärung zur Deklaration in JS … Und plötzlich wurde mir klar, wo mein Problem in einem der liegt for Schleifen 😐

    – 1000 Gbit/s

    7. April 2021 um 3:04 Uhr

985790cookie-checkWas ist der Unterschied zwischen der Verwendung von “let” und “var”?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy