ES6 in Aktion: Let und const

Schlüsselpunkte von let und const in

in ES6

let const ES6 führt zwei neue Schlüsselwörter

und

ein, die eine Möglichkeit zur Definition von blockgeschützten Variablen und Konstanten bieten, die Funktionen von JavaScript verbessert und potenzielle Fehler verringert. let let

Schlüsselwörter ermöglichen es, Variablen innerhalb eines bestimmten Blockbereichs zu deklarieren, was eine signifikante Änderung gegenüber den früheren Einschränkungen von JavaScript darstellt, die auf Funktionen und globale Bereiche beschränkt sind. Variablen, die mit

deklariert sind, werden nicht gehoben, was bedeutet, dass sie nicht referenziert werden können, bevor sie innerhalb eines Blocks deklariert werden. const const Object.freeze() Schlüsselwörter werden verwendet, um Konstanten zu definieren, die nicht neu eingebracht werden können. Obwohl let eine unveränderliche Bindung erzeugt, macht es den Wert selbst nicht unveränderlich. Um die Unveränderlichkeit zu erreichen, sollte const verwendet werden.

und

werden im Knoten und in allen modernen Browsern unterstützt. let const In diesem Tutorial werden

und

zwei Schlüsselwörter vorgestellt, bei denen es sich um neue Schlüsselwörter handelt, die JavaScript in ES6 hinzugefügt wurden. Sie verbessern JavaScript, indem sie eine Möglichkeit bieten, blockgeschützte Variablen und Konstanten zu definieren. Map WeakMap Dieser Artikel ist einer von vielen Artikeln über das in ES6 eingeführte neue JavaScript, einschließlich Set und WeakSet, String und Number, die für Array,

und

neue Methoden verfügbar sind und neue Syntax, die für Funktionen verwendet werden kann. let

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();

Vor ES5 hatte JavaScript nur zwei Bereiche: Funktionsumfang und globaler Umfang. Dies bringt Entwicklern aus anderen Sprachen wie C, C oder Java viel Frustration und unerwartetes Verhalten. JavaScript hat keinen Blockbereich, was bedeutet, dass nur in den von ihm definierten Blöcken auf Variablen zugegriffen werden kann. Blöcke sind alles in einem Paar lockiger Zahnspangen. Schauen wir uns das folgende Beispiel an:

<code>1
2
1
2</code>

Nach dem Ausführen dieses Codes sehen Sie die folgende Ausgabe in der Konsole:

if bar Die meisten Entwickler aus den oben genannten Sprachen erwarten, dass die bar -Variablen außerhalb des if -Blocks nicht zugänglich sind. Das Ausführen des äquivalenten Code in C führt beispielsweise zu einem Fehler "bar nicht deklariert", der sich auf die Verwendung von

außerhalb des <🎜> -Blocks bezieht. <🎜>

Diese Situation ändert sich in ES6 mit der Verfügbarkeit des Blockbereichs. Mitglieder der ECMA -Organisation wissen, dass sie das Verhalten des Keywords var nicht ändern können, da dies die Kompatibilität nach hinten bricht. Deshalb beschlossen sie, ein neues Schlüsselwort namens let vorzustellen. Letzteres kann verwendet werden, um Variablen zu definieren, wodurch der Umfang auf Blöcke einschränkt, die sie deklarieren. Darüber hinaus werden im Gegensatz zu var Variablen, die mit let deklariert sind, nicht gefördert. Wenn Sie vor der Begegnung der let -DEklaration der Variablen eine Variable im Block verweisen, führt dies zu ReferenceError. Aber was bedeutet das in der Praxis? Ist es nur gut für Neulinge? gar nicht!

Um zu erklären, warum Ihnen let gefällt, sollten Sie den folgenden Code betrachten, der aus meinem Artikel "5 JavaScript -Interviewübungen" ausgerichtet ist:

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();

Hier können Sie ein bekanntes Problem im Zusammenhang mit variablen Deklarationen, Scopes und Event-Handlern identifizieren. Wenn Sie nicht wissen, wovon ich spreche, schauen Sie sich den Artikel an, den ich vor dem Rückkommen erwähnt habe.

Dank ES6 können wir dieses Problem leicht lösen, indem wir die for die let -Variable in der i -Sload verwenden:

<code>1
2
1
2</code>

let Anweisungen werden im Knoten und in allen modernen Browsern unterstützt. In Internet Explorer 11 sind jedoch einige Dinge zu beachten, über die Sie in der ES6 -Kompatibilitätstabelle lesen können.

Eine Echtzeitdemonstration des Unterschieds zwischen var und let ist unten gezeigt, die sich auch auf JSBin befindet.

const

const befasst sich mit häufigen Anforderungen für Entwickler, eine Mnemonik mit einem bestimmten Wert zu verbinden, damit der Wert nicht geändert werden kann (oder einfacher eine Konstante definieren kann). Wenn Sie beispielsweise mathematische Formeln verwenden, möchten Sie möglicherweise ein Math -Objekt erstellen. In diesem Objekt möchten Sie die Werte von π und e mit dem Mnemonik assoziieren. const ermöglicht es Ihnen, dieses Ziel zu erreichen. Mit der Verwendung können Sie eine Konstante erstellen, die global oder eine lokale Variable der Funktion sein kann, die sie deklariert.

Konstanten, die mit const definiert sind, befolgen Sie die gleichen Umfangsregeln wie Variablen, können jedoch nicht neu eingebracht werden. Konstanten teilen sich auch eine Eigenschaft mit Variablen, die unter Verwendung von let deklariert sind, dh sie sind eher blockisch als funktionsübergreifend (so dass sie nicht gefördert werden). Wenn Sie versuchen, auf die Konstante zuzugreifen, bevor Sie sie deklarieren, erhalten Sie ReferenceError. Wenn Sie versuchen, einer mit const deklarierten Variablen einen anderen Wert zuzuweisen, erhalten Sie TypeError.

Beachten Sie jedoch, dass const nichts mit Unveränderlichkeit zu tun hat. Wie Mathias Bynens in seinem Blog -Beitrag sagte, hat ES2015 const nichts mit Unveränderlichkeit zu tun, const schafft eine unveränderliche Bindung, aber dies bedeutet nicht, dass der Wert unveränderlich ist, wie im folgenden Code gezeigt:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('您点击了元素 #' + i);
  });
}

Wenn Sie den Wert des Objekts wirklich unveränderlich machen möchten, verwenden Sie Object.freeze().

Die Browserunterstützung von

const ist so gut wie let. const Aussagen werden im Knoten und in allen modernen Browsern unterstützt. Hier hat Internet Explorer 11 jedoch auch einige Dinge zu beachten, und Sie können die relevanten Informationen in der ES6 -Kompatibilitätstabelle lesen.

Eine Stichprobenverbrauch von const ist unten dargestellt:

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();

Folgende zeigt eine Live -Demonstration des vorherigen Code, der sich auch auf JSBIN befindet.

Schlussfolgerung

In diesem Tutorial habe ich Sie mit let und const zwei neue Möglichkeiten vorgestellt, Variablen zu deklarieren, die in ES6 eingeführt wurden. Während var nicht so bald verschwindet, ermutige ich Sie, const und let zu verwenden, wo immer dies möglich ist, um die Möglichkeit von Codefehlern zu verringern. Als weiterer Lesung mögen Ihnen auch unseren schnellen Tipp, wie Sie Variablen in JavaScript deklarieren können, die die Mechanismen variabler Deklarationen ausführlicher untersuchen.

FAQs (FAQs) über Es6 let const Was ist der Unterschied zwischen

,

und var in JavaScript ES6? let const In JavaScript ES6 werden

,

und var verwendet, um Variablen zu deklarieren. Der Hauptunterschied zwischen ihnen ist ihr Umfang und ihre Neuzuweisung. let ist funktionsübergreifend, was bedeutet, dass es nur innerhalb der von ihm erklärten Funktionen verfügbar ist. Andererseits sind const und var blockiert, was bedeutet, dass sie nur innerhalb der Blöcke verfügbar sind, die sie deklarieren. Bei der Neuzuweisung können Variablen, die mit let und const deklariert sind, neu zugewiesen werden, während Variablen, die mit var deklariert sind, nicht können. Dies macht let für Werte sehr geeignet, die im gesamten Programm unverändert bleiben sollten. const const Wann sollte ich in meinem Code

und

verwenden? let const Wenn Sie eine Variable deklarieren müssen, die sich im Laufe der Zeit ändert, z. B. einen Zähler in einer Schleife oder einen Wert -Swap in einem Algorithmus, sollten Sie

verwenden. Wenn Sie einen Wert haben, von dem bekannt ist, dass es sich nicht ändert, z. B. Konfigurationseinstellungen oder Verweise auf DOM -Elemente, sollten Sie

verwenden. Durch die Verwendung von let kann Ihr Code leichter zu lesen und zu verstehen, da er anderen Entwicklern zeigt, dass der Wert nicht geändert werden sollte. const const Kann ich die Variable

in JavaScript ES6 neu zuweisen?

const Nein, Sie können

Variablen in JavaScript ES6 nicht neu zuweisen. Sobald die Variable

zugewiesen ist, führt der Versuch, erneut zuzuweisen, zu const. Wenn die const Variable jedoch ein Objekt ist, können Sie die Eigenschaften des Objekts, jedoch nicht das Objekt selbst ändern. TypeError const Wie hoch ist der Umfang der

-Rearablen in JavaScript ES6?

let In JavaScript ES6 hat die

-Variable einen Blockbereich. Dies bedeutet, dass es nur innerhalb des Codeblocks zugegriffen werden kann, den es definiert. Wenn Sie versuchen, außerhalb des Blocks darauf zuzugreifen, erhalten Sie

. let

Was passiert, wenn ich eine Variable mit let oder const ohne Initialisierung deklare?

Wenn Sie eine Variable mit let oder const ohne Initialisierung deklarieren, ist dies undefined. Im Gegensatz zu var können Sie jedoch nicht let oder const Variablen verwenden, bevor Sie sie deklarieren. Dies führt zu ReferenceError.

Kann ich Variablen mit demselben Namen mit let oder const im selben Bereich deklarieren?

Nein, Sie können Variablen nicht mit demselben Namen mit let oder const im selben Bereich deklarieren. Dies führt zu SyntaxError. Dies wird als "Temporal Dead Zone" -Regel bezeichnet.

Was ist im Kontext von let und const die Werbung?

Erhöhung ist ein Mechanismus in JavaScript, bei dem Variablen und Funktionserklärungen während der Zusammenstellungsphase auf die Spitze des eingeschlossenen Umfangs verschoben werden. Im Gegensatz zu var werden die Erklärungen let und const nicht initialisiert. Sie werden befördert, aber Sie können nicht vor der Erklärung auf sie zugreifen, da sie von Anfang an in einer "vorübergehenden toten Zone" von Anfang des Blocks bis zur Verarbeitung der Erklärung befinden.

Kann ich in allen Browsern let und const verwenden?

let und const sind Teil der ES6 (ES2015) -Pezifikation und werden in allen modernen Browsern unterstützt. Für ältere Browser, die ES6 nicht unterstützen, müssen Sie den ES6 -Code mit einem Übersetzer wie Babel in ES5 -Code konvertieren.

Wie wirkt sich die Leistungseinflüsse bei der Verwendung von let und const aus?

Die Leistungsauswirkungen der Verwendung von let und const ist vernachlässigbar. Die JavaScript -Engine optimiert für diese Keywords, so dass es keinen signifikanten Leistungsunterschied zwischen ihnen und var gibt. Die Wahl zwischen let, const und var sollte auf ihren Umfangsregeln und Verhaltensweisen, nicht auf der Leistung basieren.

Was sind einige Best Practices für die Verwendung let und const in JavaScript ES6?

Einige Best Practices für die Verwendung von let und const in JavaScript ES6 enthalten standardmäßig const und nur, wenn Sie wissen, dass Sie den Betrag ändern müssen. Dies kann Ihren Code vorhersehbarer und einfacher zu verstehen. Deklarieren Sie auch immer Variablen oben in ihrem Bereich, um zu klären, wo sie verfügbar sind. let

Das obige ist der detaillierte Inhalt vonES6 in Aktion: Let und const. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!