Maison > interface Web > Questions et réponses frontales > Qu'est-ce qui est laissé dans es6

Qu'est-ce qui est laissé dans es6

WBOY
Libérer: 2022-05-06 15:39:52
original
2134 Les gens l'ont consulté

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

Qu'est-ce qui est laissé dans es6

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
*/
Copier après la connexion

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;
Copier après la connexion

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 = &#39;apple&#39;;
if(typeof &#39;str&#39; == &#39;string&#39;) {
    food = &#39;banana&#39;; // Uncaught ReferenceError: food is not defined
    let food;
    console.log(food); // undefined
    food = &#39;orange&#39;;
    console.log(food); // orange
}
Copier après la connexion

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;
Copier après la connexion

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 &#39;a&#39; has already been declared
}
// 或者
{
    let b = 1;
    let b = 2; // Uncaught SyntaxError: Identifier &#39;b&#39; has already been declared
}
Copier après la connexion

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 &#39;x&#39; has already been declared
    let y = 2; // Uncaught SyntaxError: Identifier &#39;y&#39; has already been declared
}
wait(3,5);
Copier après la connexion

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
Copier après la connexion

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;;
    }
}
Copier après la connexion

【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!

Étiquettes associées:
es6
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal