Einführung in die neue Variablendeklarationsmethode in ES6 (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die neue Variablendeklarationsmethode in ES6 (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

In ES5 gibt es nur drei Arten von Variablendeklarationen: var, Funktion und implizite Deklaration. In ES6 werden vier Typen hinzugefügt: let, const, import und class.

1. let

1.1 Bereich auf Blockebene

Der Bereich der von let deklarierten Variablen ist der Bereich auf Blockebene (diese Funktion ist etwas Ähnlich wie die Backend-Sprache verfügt ES5 nicht über einen Bereich auf Blockebene, sondern nur über einen Funktionsbereich und einen globalen Bereich.

{
  let a = 'ES6';
  var b = 'ES5';
}

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

Was sind also die Vorteile des Let’s-Block-Level-Bereichs?

let ist ideal für den Bereich auf Blockebene innerhalb einer for-Schleife. Der for-Schleifenkörper in JS ist etwas Besonderes. Jede Ausführung ist ein neuer unabhängiger Blockbereich. Nachdem die mit let deklarierten Variablen in den Bereich des for-Schleifenkörpers übergeben wurden, werden sie nicht von der Außenwelt beeinflusst. Schauen Sie sich eine häufige Interviewfrage an:

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到异步的宏任务队列。
    console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   （共10个）
// 这里变量为i的for循环中，i是一个全局变量，在全局范围内都有效，所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮i的值，即i的最终结果为10，实际上都是console.log(10)。涉及的知识点：JS的事件循环机制，setTimeout的机制等

Var in let-Anweisung ändern:

for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //当前的i仅在本轮的循环中有效，就是说每一次循环，i其实都是一个新产生的变量。                          //用 let 声明的变量 i 只作用于循环体内部，不受外界干扰。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8 9

1.2 Temporal Dead Zone (Temporal Dead Zone)

In einem Bereich auf Blockebene Variablen Sobald eine Variable mit let in einem Bereich auf Blockebene deklariert wird, gehört die Variable eindeutig zu diesem Bereich auf Blockebene und wird nicht von externen Variablen beeinflusst, wie unten gezeigt.

var tmp = 'bread and dream';
if(true){
    tmp = 'dream or bread';   //ReferenceError
    let tmp;
}

In diesem Beispiel meldet die Zuweisung von tmp = 'dream or bread' einen Fehler, da let im if-Block die tmp-Variable deklariert, was dazu führt, dass tmp an diesen Bereich gebunden wird und vorübergehend stirbt Daher kann es nicht vor der Deklaration verwendet werden. Daher führt die Zuweisung eines Werts zu einer Variablen vor der Deklaration zu einem Fehler.

Das Wesentliche an der temporären Totzone ist, dass die Variable, die Sie verwenden möchten, bereits vorhanden ist, sobald Sie den aktuellen Bereich betreten, aber erst in der Zeile verfügbar ist Code, der die Variable deklariert, wird angezeigt.

Die Bedeutung der temporären Totzone besteht auch darin, dass sie uns ermöglicht, den Code zu standardisieren und die Deklaration aller Variablen am Anfang des Bereichs zu platzieren.

1.3 Doppelte Deklarationen sind nicht zulässig

(1) Wenn im gleichen Bereich let zum Deklarieren einer Variablen verwendet wird, darf diese nur einmal deklariert werden, var kann jedoch mehrmals deklariert werden . Jeder weiß, dass mehrere Deklarationen in ES5 zu einer Variablenabdeckung führen und kein Fehler gemeldet wird, was das Debuggen erschwert, aber wir können dieses Problem direkt in der Wiege beheben, da ein Fehler direkt gemeldet wird.

// 不报错
function demo() {
  var a = 'bread and dream';
  var a = 'dream or bread';
}
 
// 报错，Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  var a = 'dream or bread';
}

// 报错,Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  let a = 'dream or bread';
}

(2) Parameter können nicht innerhalb einer Funktion erneut deklariert werden:

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

2. const

2.1 wird zum Deklarieren von Konstanten

Mit const deklarierte Konstanten dürfen nicht geändert werden und sind schreibgeschützte Attribute. Das bedeutet, dass Konstanten bei der Deklaration nur ein Wert zugewiesen werden muss Großbuchstaben.

const Person;   // 错误，必须初始化 
const Person = 'bread and dream';// 正确

const Person2 = 'no'; 
Person2 = 'dream or bread'; //报错,不能重新赋值

Das hat zwei Vorteile: Erstens wird den Lesern des Codes sofort klar, dass dieser Wert nicht geändert werden sollte, und zweitens werden Fehler verhindert, die durch versehentliches Ändern des Variablenwerts verursacht werden. Wenn wir beispielsweise einige Module von nodejs verwenden, verwenden wir nur die entsprechenden Module (z. B. das http-Modul), müssen das nodejs-Modul jedoch nicht ändern. Zu diesem Zeitpunkt können wir es als const deklarieren, was die Lesbarkeit erhöht den Code und vermeidet Fehler.

2.2 Unterstützt den Bereich auf Blockebene

const ähnelt let und unterstützt auch den Bereich auf Blockebene.

if (true) {
  const MIN = 5;
}

MIN // Uncaught ReferenceError: MIN is not defined

2.3 Unterstützt keine Variablenheraufstufung und hat eine vorübergehende Totzone

Durch const deklarierte Konstanten werden nicht hochgestuft. Sie haben auch eine vorübergehende Totzone und können nur nach der deklarierten Position verwendet werden.

if (true) {
  console.log(MIN); // ReferenceError
  const MIN = 5;
}

2.4 Sonderfälle

Wenn die deklarierte Konstante ein Objekt ist, ist eine Neuzuweisung für das Objekt selbst nicht zulässig, die Eigenschaften des Objekts können jedoch zugewiesen werden.

const obj = {};
obj.a = 'xiao hua';
console.log(obj.a);    //'xiao hua'

Tatsächlich kann const nicht garantieren, dass der Wert der Variablen nicht geändert werden kann, sondern dass die Daten, die in der Speicheradresse gespeichert sind, auf die die Variable zeigt, nicht geändert werden können.

Bei einfachen Datentypen (numerische Werte, Zeichenfolgen, boolesche Werte) wird der Wert an der Speicheradresse gespeichert, auf die die Variable zeigt, sodass er einer Konstante entspricht.

Aber für zusammengesetzte Datentypen (hauptsächlich Objekte und Arrays) speichert die Speicheradresse, auf die die Variable zeigt, nur einen Zeiger auf die tatsächlichen Daten.

Die Frage, ob die Datenstruktur, auf die es verweist, variabel ist, liegt völlig außer Kontrolle. Daher müssen Sie sehr vorsichtig sein, wenn Sie ein Objekt als Konstante deklarieren.

Wenn Sie das Objekt vollständig einfrieren möchten (seine Eigenschaften können nicht geändert werden), sollten Sie die Methode Object.freeze(obj) verwenden. Das Gleiche gilt für Arrays.

3. Import

ES6 verwendet Import anstelle von Knoten und anderen erforderlichen Modulen. Das

import {$} from './jquery.js'

$-Objekt ist das Objekt, das durch den Export in jquery verfügbar gemacht wird.

Wenn Sie die Eingabevariable umbenennen möchten, verwenden Sie das Schlüsselwort as im Importbefehl, um die Eingabevariable umzubenennen.

import { JQ as $ } from './jquery.js';

Beachten Sie, dass der Importbefehl einen Lifting-Effekt hat und an die Spitze des gesamten Moduls befördert und zuerst ausgeführt wird.

4. Klasse

ES6 führte das Konzept der Klasse und das Schlüsselwort Klasse ein. Das Wesentliche einer Klasse ist immer noch ein Funktionsobjekt.

Definieren Sie zunächst eine Klasse:

//定义类
class Animal {
  constructor(name, age) {
        this.name = name;
        this.age = age;
  }    
  setSex(_sex) {
        this.sex=_sex;
  }
}

Die Konstruktormethode ist die Konstruktormethode, die in der ES5-Ära den Hauptteil des Funktionsobjekts darstellt, und das Schlüsselwort this repräsentiert das Instanzobjekt.

Die obige Klasse kann auch in ES5-Schrift geändert werden:

function Animal(name, age){
        this.name = name;
        this.age = age;
}

Animal.prototype.setSex = function (_sex) {
        this.sex=_sex;
}

Tatsächlich können die Eigenschaften der meisten Klassen aus den vorherigen Funktionsobjekten und Prototypen abgeleitet werden.

生成类的实例对象的写法，与ES5通过构造函数生成对象完全一样，也是使用new命令。

class Animal {}
let dog = new Animal();

在类的实例上面调用方法，其实就是调用原型上的方法，因为类上的方法其实都是添加在原型上。

Class其实就是一个function，但是有一点不同，Class不存在变量提升，也就是说Class声明定义必须在使用之前。

5.总结

在ES6之前，JavaScript是没有块级作用域的，如果在块内使用var声明一个变量，它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域，let和const都添加了块级作用域，使得JS更严谨和规范。

let 与 const 相同点：

块级作用域
有暂时性死区
约束了变量提升
禁止重复声明变量

let 与 const不同点：

const声明的变量不能重新赋值，也是由于这个规则，const变量声明时必须初始化，不能留到以后赋值。

合理的使用ES6新的声明方式，不管是面试还是工作中都有实际的应用，尤其是工作中，大家一定要尽量的多使用新的声明方式，不但可以让代码更规范，更可以避免不必要的bug，浪费调试时间，进而提高工作效率。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

Das obige ist der detaillierte Inhalt vonEinführung in die neue Variablendeklarationsmethode in ES6 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!