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

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

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

if (true) {
  const MIN = 5;
}

MIN // Uncaught ReferenceError: MIN is not defined

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

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

3. Import

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

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

4. Klasse

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

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

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

生成类的实例对象的写法，与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!