Qu'est-ce qui est laissé dans es6

Dans es6, let est un mot-clé utilisé pour déclarer des variables ; ce mot-clé n'est valable que dans le bloc de code déclaré. Une erreur sera signalée en dehors du bloc de code spécifié, et il n'y a pas de promotion de portée et les déclarations répétées ne sont pas autorisées. Il existe une zone morte temporaire et la syntaxe est "let name=value;".

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

Qu'est-ce que let dans es6 ?

let est une commande dans es6 pour déclarer une variable. Elle n'est valable que dans le bloc de code dans lequel elle est déclarée. Si ce bloc de code est laissé, une erreur sera signalée. Il convient également très bien aux boucles for. La valeur de i dans la boucle ne prend effet que dans l'instruction de boucle et ne peut pas être obtenue à l'extérieur.

La commande var déclare une variable globale, je pointe vers la variable globale et seule la dernière valeur sera affichée. Let ne prend effet que dans le bloc d'instructions de boucle. Chaque boucle re-déclarera un i, afin que la valeur correspondante puisse être obtenue à chaque boucle.

La variable dans la boucle for est la portée parent et n'est pas dans la même portée que la variable (portée enfant) définie par let dans le corps de la boucle.

Par exemple :

//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
*/

La commande let n'a pas de promotion de portée.

La commande var aura une promotion de portée avant d'être déclarée, si elle n'est pas déclarée, elle aura une valeur par défaut. Les variables définies par let doivent être utilisées après déclaration.

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

let a une zone morte temporaire

"Zone morte temporaire" (TDZ) fait référence aux dispositions de ES6, s'il y a des commandes let et const dans le bloc, ces deux commandes déclarent La variable a formé une portée fermée. Les variables déclarées avant cela signaleront une erreur.

Par exemple : une variable globale est déclarée ci-dessous, mais let déclare une autre variable dans la portée au niveau du bloc.

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
}

Remarque : Il y aura de mauvaises choses à propos de la zone temporaire quatre.

Le type de détection n'est pas sûr

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

Les déclarations en double ne sont pas autorisées

En bref, il n'est pas permis de déclarer deux variables identiques dans la même portée.

Par exemple :

{
    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
}

Remarque : les paramètres ne peuvent pas être déclarés à plusieurs reprises dans les paramètres de la fonction, sinon une erreur sera signalée.

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);

Objets de niveau supérieur

Avant ES6, les propriétés des objets de niveau supérieur étaient cohérentes avec les variables globales, ce qui entraînait de nombreux problèmes.

Les erreurs ne peuvent être détectées qu'en l'exécutant, et les erreurs ne peuvent pas être détectées depuis le début.

Les objets de niveau supérieur peuvent être lus et écrits à tout moment et n'importe où, ils ne sont donc pas propices à la programmation modulaire.

window fait en fait référence à la fenêtre du navigateur et l'objet de niveau supérieur a une signification d'entité.

Donc es6 a amélioré une chose, c'est-à-dire que les variables globales déclarées par let et const n'appartiennent pas aux propriétés de l'objet de niveau supérieur.

Par exemple :

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

Utilisez la commande let après avoir appris

Il y a un vieux dicton : si vous l'apprenez, vous pouvez l'utiliser partout, si vous ne l'apprenez pas, cela ne veut rien dire. J'ai donc écrit un petit exemple sur let.

Il s'agit d'un cas de tabulations. Avant, nous devions définir btns[i].index = i, mais maintenant il est beaucoup plus pratique d'utiliser la commande let.

.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;;
    }
}

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!