ES6-Serie zur Deklaration der Variablen let und const

Dieser Artikel informiert Sie hauptsächlich über die deklarierten Variablen let und const der ES6-Serie. Interessierte Freunde können sich auf den Inhalt dieses Artikels beziehen

Einführung

Konzept

Die erste Version von ES6 wurde im Juni 2015 veröffentlicht und ihr offizieller Name ist „ECMAScript 2015 Standard“ (kurz ES2015). ES6 ist sowohl ein historischer Begriff als auch ein allgemeiner Begriff. Er bezeichnet den JavaScript-Standard der nächsten Generation nach Version 5.1 und umfasst ES2015, ES2016, ES2017 usw., während ES2015 der offizielle Name ist und sich speziell auf die offizielle Version der veröffentlichten Sprache bezieht in diesem Jahr.
Unterstützung für ES6 durch die wichtigsten Browser: kangax

Babel

Babel ist ein weit verbreiteter ES6-Transcoder, der ES6-Code in ES5-Code umwandeln kann, um ihn im vorhandenen auszuführen Umfeld.
Babels Konfigurationsdatei ist .babelrc und wird im Stammverzeichnis des Projekts gespeichert. Der erste Schritt bei der Verwendung von Babel besteht darin, diese Datei zu konfigurieren.

Variablen deklarieren

ES5 bietet nur zwei Möglichkeiten, Variablen zu deklarieren: den Befehl var und den Befehl function. ES6 fügt die Befehle let, const, import und class hinzu. Daher verfügt ES6 über insgesamt 6 Möglichkeiten, Variablen zu deklarieren.

In ES5 entsprechen die Eigenschaften von Objekten der obersten Ebene globalen Variablen. Um dies zu ändern, legt ES6 einerseits fest, dass die vom Befehl var und dem Befehl function deklarierten globalen Variablen weiterhin Attribute des Objekts der obersten Ebene sind, andererseits legt es fest, dass globale Variablen deklariert durch die Befehle let, const und class, Eigenschaften, die nicht zum Objekt der obersten Ebene gehören. Mit anderen Worten: Ab ES6 werden globale Variablen schrittweise von den Eigenschaften des Objekts der obersten Ebene entkoppelt.

let

ES6 fügt den let-Befehl zum Deklarieren von Variablen hinzu. Seine Verwendung ähnelt der von var, die deklarierte Variable ist jedoch nur innerhalb des Codeblocks gültig, in dem sich der let-Befehl befindet.

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

Erlaubt keine wiederholten Deklarationen

let erlaubt keine wiederholten Deklarationen derselben Variablen im selben Bereich.

// 报错
function func() {
  let a = 10;
  var a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

Bereiche auf Blockebene

• ES6 ermöglicht die beliebige Verschachtelung von Bereichen auf Blockebene.

• Der innere Bereich kann gleichnamige Variablen im äußeren Bereich definieren.

• Der äußere Bereich kann die Variablen des inneren Bereichs nicht lesen.

{{{{
  {let insane = 'Hello World'
   {let insane = 'Hello World'}
  }
  console.log(insane); // 报错
}}}};

Bereichs- und Funktionsdeklaration auf Blockebene

• ES5 legt fest, dass Funktionen nur in der Bereichs- und Funktionsbereichsdeklaration der obersten Ebene enthalten sein dürfen kann nicht auf Blockebene deklariert werden.

• ES6 legt fest, dass sich Funktionsdeklarationsanweisungen im Bereich auf Blockebene wie let verhalten und nicht außerhalb des Bereichs auf Blockebene referenziert werden können.

Angesichts der Tatsache, dass das Verhalten je nach Umgebung stark variiert, sollte die Deklaration von Funktionen im Bereich auf Blockebene vermieden werden. Wenn es wirklich notwendig ist, sollte es als Funktionsausdruck und nicht als Funktionsdeklarationsanweisung geschrieben werden.

Es gibt keine Variablenheraufstufung

Die mit dem let-Befehl deklarierten Variablen müssen nach der Deklaration verwendet werden, andernfalls wird ein Fehler gemeldet.

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

Temporäre Totzone

Solange der let-Befehl im Bereich auf Blockebene vorhanden ist, sind die von ihm deklarierten Variablen an diesen Bereich „verbindlich“ und nicht mehr betroffen durch äußere Einflüsse.

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

In einem Codeblock ist die Variable erst verfügbar, wenn sie mit dem let-Befehl deklariert wird. Grammatisch wird dies als „temporäre Totzone“ (TDZ) bezeichnet.

const

const deklariert eine schreibgeschützte Konstante. Nach der Deklaration kann der Wert einer Konstante nicht mehr geändert werden.

• ist nur innerhalb des Blockebenenbereichs gültig, in dem es deklariert ist.

• Die vom Befehl const deklarierten Konstanten werden ebenfalls nicht hochgestuft. Es gibt auch eine vorübergehende Totzone und kann nur nach der deklarierten Position verwendet werden.

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

Essenz

Was const tatsächlich garantiert, ist nicht, dass der Wert der Variablen nicht geändert werden kann, sondern dass die Speicheradresse, auf die die Variable zeigt, nicht geändert werden kann geändert. Bei einfachen Datentypen (numerische Werte, Zeichenfolgen, boolesche Werte) wird der Wert an der Speicheradresse gespeichert, auf die die Variable zeigt, und entspricht daher einer Konstante. Bei zusammengesetzten Daten (hauptsächlich Objekten und Arrays) speichert die Speicheradresse, auf die die Variable zeigt, nur einen Zeiger. Const kann nur garantieren, dass dieser Zeiger fest ist Kann es nicht mehr kontrollieren. Daher müssen Sie sehr vorsichtig sein, wenn Sie ein Objekt als Konstante deklarieren.

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

Wenn Sie das Objekt wirklich einfrieren möchten, sollten Sie die Methode Object.freeze verwenden.

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

Das obige ist der detaillierte Inhalt vonES6-Serie zur Deklaration der Variablen let und const. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!