Basierend auf den neuen Funktionen von JavaScript ES: Schlüsselwörter let und const

1. let-Schlüsselwort

1.1 Grundlegende Verwendung

let ist ein neues Schlüsselwort, das in ECMAScript 2015 hinzugefügt wurde und zum Deklarieren von Variablen verwendet wird. Seine Verwendung ist ähnlich wie bei var, der Unterschied besteht jedoch darin, dass die deklarierten Variablen nur in dem Codeblock verwendet werden können, in dem sie sich befinden.

Die Syntaxstruktur ist wie folgt:

let var1 [= Wert1] [, var2 [= Wert2]] [, ..., varN [= WertN]];

Parameterbeschreibung:

var1, var2, …, varN : Variablennamen. Muss eine gültige Kennung sein.

value1, value2, …, valueN : Anfangswerte der Variablen. Kann jeder beliebige juristische Ausdruck sein.

Der Beispielcode lautet wie folgt:

Im globalen Bereich werden Variablen definiert

// globale Variablen definieren var a = 100; // das Schlüsselwort var verwenden let b = 200; // das Schlüsselwort let verwenden console.log(a); // 100
console.log(b); // 200

Wir haben festgestellt, dass das einfache Definieren einer globalen Variable keinen Unterschied macht.

Definieren von Variablen im Blockbereich

Weitere Informationen zum Blockbereich finden Sie in diesem Artikel.

// Variablen im Blockbereich definieren {
  var a = 100; // verwendet das Schlüsselwort var let b = 200; // verwendet das Schlüsselwort let }
konsole.log(a); // 100
console.log(b); // Wirft eine Ausnahme mit der Beschreibung ReferenceError: b ist nicht definiert

Wenn let in einem Codeblock verwendet wird, erhält der Codeblock einen völlig neuen Bereich und auf seine Variablen kann außerhalb des Bereichs nicht zugegriffen werden.

Das von ES6 bereitgestellte Schlüsselwort let eignet sich besonders gut für die Verwendung als Variable in for Schleifenrechner. In diesem Fall kann die Variable nur innerhalb des Schleifenkörpers verwendet werden, und außerhalb des Schleifenkörpers wird eine Ausnahme ausgelöst.

Der Beispielcode lautet wie folgt:

// Definiere einen Schleifenkörper für (let v = 0; v < 10; v++) {
  console.log("Dies ist eine For-Schleife"); // Dies ist eine For-Schleife * 10
}
console.log(v); // Löst eine Ausnahme mit der Beschreibung aus: ReferenceError: v ist nicht definiert

Es ist erwähnenswert, dass die for Schleife eine weitere Besonderheit aufweist, nämlich, dass der Teil, der die Schleifenvariable festlegt, ein übergeordneter Bereich ist und der Schleifenkörper ein separater untergeordneter Bereich ist.

Der Beispielcode lautet wie folgt:

für (sei v = 0; v < 10; v++) {
  sei v = 10
  konsole.log(v); // 100 * 10
}

Das obige Ergebnis bedeutet, dass die beiden v nicht im selben Bereich liegen.

1.2 Es gibt keine variable Förderung

Wenn Sie mit var eine Variable definieren, kommt es zu der sogenannten Variablenprovision, wie im folgenden Code gezeigt:

console.log(v); // undefiniert
var v = 100;

Wir verwenden diesen Wert vor der Variablendeklaration und er meldet keinen Fehler, aber das Ergebnis ist undefiniert. Das ist eine seltsame Logik. Nach allgemeiner Logik sollte es eine Ausnahme auslösen, wenn es auf diese Weise verwendet wird.

In ECMAScript 2015 löst das Schlüsselwort let dieses seltsame Phänomen.

Wie im folgenden Code gezeigt:

console.log(v); // Löst eine Ausnahme mit der Beschreibung ReferenceError: Vor der Initialisierung kann nicht auf „v“ zugegriffen werden
sei v = 100;

Im obigen Code wird eine Ausnahme mit der Beschreibung ausgelöst, dass eine Variable nicht verwendet werden kann, bevor sie deklariert wurde.

1.3 Temporäre tote Zone

Solange es Variablen gibt, die mit dem Schlüsselwort let im Blockebenenbereich definiert sind, sind die damit deklarierten Variablen an diesen Bereich gebunden und werden nicht mehr von der Außenwelt beeinflusst. Der Beispielcode lautet wie folgt:

sei v = 100; 
{
  console.log(v); // Löst eine Ausnahme mit der Beschreibung ReferenceError: Vor der Initialisierung kann nicht auf „v“ zugegriffen werden
  // Diese Variable ist an den Bereich auf Blockebene gebunden und dieser Bereich kann nur diese Variable verwenden. let v = 200;
}

ECMAScript 2015 legt eindeutig fest, dass, wenn ein Block ein Schlüsselwort let enthält, der Block von Anfang an einen umschließenden Bereich für die von diesen Befehlen deklarierten Variablen bildet. Wenn Sie diese Variablen verwenden, bevor Sie sie deklarieren, wird eine Fehlermeldung angezeigt.

Im Allgemeinen ist eine Variable im Blockbereich erst verfügbar, wenn sie mit dem Schlüsselwort let deklariert wurde. Dies wird grammatikalisch als temporäre dead zone oder kurz TDZ bezeichnet.

1.4 Doppelte Erklärungen sind nicht zulässig

Das von ECMAScript 2015 bereitgestellte Schlüsselwort let erlaubt keine wiederholten Deklarationen, was sich von var unterscheidet. Der Beispielcode lautet wie folgt:

// Verwenden Sie var, um Variablen zu deklarieren var a = 100;
konsole.log(a); // 100
var a = 1000; // wiederholte Deklaration console.log(a); // 1000

// Verwenden Sie let, um Variablen zu deklarieren let b = 100;
console.log(b); // 100
let b = 1000; // Wiederholte Deklaration console.log(b); // Wirft eine Exception mit der folgenden Beschreibung: SyntaxError: Identifier 'b' has already been declared

Wenn Sie es wiederholt deklarieren, wird SyntaxError -Ausnahme ausgelöst.

1.5 Beziehung zu Funktionen

Die von uns verwendeten Funktionsparameter entsprechen Variablen, die mit dem Schlüsselwort let definiert wurden. Wenn Sie das Schlüsselwort let im Funktionskörper erneut verwenden, um eine Variable mit demselben Namen wie der Parameter erneut zu deklarieren, wird SyntaxError -Ausnahme ausgelöst. Natürlich erlaubt die Verwendung let im Funktionskörper keine Variablenpromotion.

// Verwenden Sie let, um Variablen zu deklarieren let a = 100;
// definiere eine Funktion function fun(b) {
  // let b = 10; // wirft eine Ausnahme mit der Beschreibung: SyntaxError: Der Bezeichner „b“ wurde bereits deklariert
  console.log(a); // Löst eine Ausnahme mit der Beschreibung aus: ReferenceError: Vor der Initialisierung kann nicht auf „a“ zugegriffen werden
  sei a = 200;
}
Spaß(20)

2. const-Schlüsselwort

2.1 Grundlegende Verwendung

Das Schlüsselwort const wird verwendet, um eine Konstante zu deklarieren. Wir können die durch const generierte Konstante als unveränderliche let-Variable verstehen. Da das Schlüsselwort const alle Eigenschaften des Schlüsselworts let hat, wird hier die unveränderliche Eigenschaft auf der ursprünglichen Basis hinzugefügt.

Die sogenannte Konstante ist nach der Initialisierung unveränderlich und muss bei der Deklaration initialisiert werden. Der Beispielcode lautet wie folgt:

Konstante a = 2
a = 3 // wirft eine Ausnahme const b // nicht initialisiert wirft eine Ausnahme

Wenn wir jedoch const verwenden, um ein Objekt oder Array zu initialisieren, können wir den darin enthaltenen Wert ändern, ohne dass ein Fehler gemeldet wird. Der Beispielcode lautet wie folgt:

const arr = []
arr[0] = 100 
console.log(arr) // [100]
const obj = {}
obj.name = "Eine Schüssel Zhou"
console.log(obj) // {name: "Yiwan Zhou"}

Der Grund für dieses Problem ist, dass das Schlüsselwort const tatsächlich nicht garantiert, dass der Wert der Variablen nicht geändert werden kann, sondern dass die Speicheradresse, auf die die Variable zeigt, nicht geändert werden kann. Bei einfachen Datentypen wie String , Number und Boolean werden diese Werte in der Speicheradresse gespeichert, auf die die Variable zeigt, sodass sie nicht ein zweites Mal geändert werden können.

Bei zusammengesetzten Datentypen, hauptsächlich Array und Object , speichert die Speicheradresse, auf die die Variable zeigt, jedoch nur einen Zeiger. Const kann nur sicherstellen, dass die Speicheradresse, auf die dieser Zeiger zeigt, fest ist. Ob die in der Speicheradresse, auf die er zeigt, gespeicherte Datenstruktur variabel ist, kann überhaupt nicht gesteuert werden.

Bei der tatsächlichen Entwicklung vermeiden wir die Verwendung des Schlüsselworts var und verwenden stattdessen das Schlüsselwort const . Wenn wir Variablen verwenden müssen, verwenden wir das Schlüsselwort let.

Dies ist das Ende dieses Artikels über die neuen Funktionen von JavaScript ES, die Schlüsselwörter let und const. Weitere Informationen zu den neuen Funktionen von ES finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!