Was ist in es6 enthalten?

Let ist ein Schlüsselwort, das zum Deklarieren von Variablen verwendet wird. Dieses Schlüsselwort ist nur im deklarierten Codeblock gültig. Außerhalb des angegebenen Codeblocks wird kein Fehler gemeldet, und wiederholte Deklarationen sind nicht zulässig. Es gibt eine vorübergehende tote Zone und die Syntax lautet „let name=value;“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

Was ist let in es6?

let ist ein Befehl in es6, um eine Variable zu deklarieren. Sie ist nur in dem Codeblock gültig, in dem sie deklariert wird, wird ein Fehler gemeldet. Es eignet sich auch sehr gut für for-Schleifen. Der Wert von i in der Schleife wird nur in der Schleifenanweisung wirksam und kann nicht außerhalb abgerufen werden.

Der Befehl var deklariert eine globale Variable, i zeigt auf die globale Variable und nur der letzte Wert wird ausgegeben. Let wird nur im Schleifenanweisungsblock wirksam. Bei jeder Schleife wird ein i neu deklariert, sodass bei jeder Schleife der entsprechende Wert abgerufen werden kann.

Die Variable in der for-Schleife ist der übergeordnete Bereich und befindet sich nicht im selben Bereich wie die Variable (untergeordneter Bereich), die durch let im Schleifenkörper definiert wird.

Zum Beispiel:

//1.在自身所在代码块中有效
{
    let a = 1;
    var b = 2;
}
console.log(b); // 2
console.log(a); // a is not defined
//2.在for循环语句块中有效
for(var i=0;i<10;i++) {
    //...
}
console.log(i); // 10
for(let j=0;j<10;j++) {
    //...
}
console.log(j); // j is not defined
var arr = [];
for(var a=0;a<10;a++) {
    arr[a] = function () {
        console.log(a);
    }
}
console.log(a[4]); // 10
for(let b=0;b<10;b++) {
    arr[b] = function () {
        console.log(b);
    }
}
console.log(b[4]); // 4
// 3.for循环的变量和循环体内的变量
for(var i=0;i<10;i++) {
    let i = &#39;fed&#39;;
    console.log(i);
}
/*
* 结果是
*   fed
*   fed
*   fed
*/

Der Befehl let hat keine Bereichserweiterung.

Der Befehl var verfügt über eine Bereichserweiterung. Wenn er nicht deklariert ist, hat er einen Standardwert. Durch let definierte Variablen müssen nach der Deklaration verwendet werden.

console.log(fa); // undefined
var fa = 1;
console.log(fb); // fb is not defined
let fb = 2;

let hat eine temporäre Totzone

„Temporäre Totzone“ (TDZ) bezieht sich auf die Bestimmungen von ES6. Wenn der Block let- und const-Befehle enthält, deklarieren diese beiden Befehle Die Variable hat einen geschlossenen Bereich gebildet. Zuvor deklarierte Variablen melden einen Fehler.

Zum Beispiel: Unten wird eine globale Variable deklariert, aber let deklariert eine andere Variable im Bereich auf Blockebene.

var food = 'apple';
if(typeof 'str' == 'string') {
    food = 'banana'; // Uncaught ReferenceError: food is not defined
    let food;
    console.log(food); // undefined
    food = 'orange';
    console.log(food); // orange
}

Hinweis: Es wird einige schlechte Dinge über den temporären Bereich vier geben.

Der Erkennungstyp ist unsicher

typeof x; // Uncaught ReferenceError: x is not defined
let x;

Doppelte Deklarationen sind nicht zulässig

Kurz gesagt, es ist nicht zulässig, zwei identische Variablen im selben Bereich zu deklarieren.

Zum Beispiel:

{
    let a = 1;
    var a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared
}
// 或者
{
    let b = 1;
    let b = 2; // Uncaught SyntaxError: Identifier 'b' has already been declared
}

Hinweis: Parameter können innerhalb von Funktionsparametern nicht wiederholt deklariert werden, da sonst ein Fehler gemeldet wird.

function wait(x,y) {
    let x = 1; // Uncaught SyntaxError: Identifier 'x' has already been declared
    let y = 2; // Uncaught SyntaxError: Identifier 'y' has already been declared
}
wait(3,5);

Objekte der obersten Ebene

Vor ES6 stimmten die Eigenschaften von Objekten der obersten Ebene mit globalen Variablen überein, was zu vielen Problemen führte.

Fehler können nur durch Ausführen abgefangen werden, und Fehler können nicht von Anfang an erkannt werden.

Objekte der obersten Ebene können jederzeit und überall gelesen und geschrieben werden, sodass dies einer modularen Programmierung nicht förderlich ist.

window bezieht sich tatsächlich auf das Browserfenster, und das Objekt der obersten Ebene hat eine Entitätsbedeutung.

Es6 hat also eine Sache verbessert: Mit let und const deklarierte globale Variablen gehören nicht zu den Eigenschaften des Objekts der obersten Ebene.

Zum Beispiel:

var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined

Verwenden Sie den let-Befehl nach dem Lernen

Es gibt ein altes Sprichwort: Wenn du lernst, kannst du es überall verwenden, wenn du nicht lernst, bedeutet es nichts. Also habe ich ein kleines Beispiel über let geschrieben.

Dies ist ein Fall von Tabs. Früher mussten wir btns[i].index = i definieren, aber jetzt ist es viel bequemer, den let-Befehl zu verwenden.

.tab {
    width: 300px;
    height: 30px;
    border: 1px solid #fff;
}
.tab > span {
    float: left;
    display: block;
    width: 98px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #aaa;
    cursor: pointer;
}
span.active {
    color: #fff;
    background-color: #f00;
    border: 1px solid #f00;
}
.content, .content > p {
    width: 300px;
    height: 300px;
}
.content > p {
    display: none;
    border: 1px solid #aaa;
}
p.active {
    display: block;
}
<div class="tab">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="content">
    <p class="active">1的内容</p>
    <p>2的内容</p>
    <p>3的内容</p>
</div>
let btns = document.querySelectorAll(&#39;.tab span&#39;);
let contents = document.querySelectorAll(&#39;.content p&#39;);
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        for (let j = 0; j < btns.length; j++) {
            btns[j].className = &#39;&#39;;
            contents[j].className = &#39;&#39;;
        }
        this.className = &#39;active&#39;;
        contents[i].className = &#39;active&#39;;
    }
}

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas ist in es6 enthalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!