Es6 en action: let et const et const

Points clés de let et const dans

dans es6

let const ES6 introduit deux nouveaux mots clés

et

, qui fournissent un moyen de définir des variables et des constantes à vitesses en bloc, améliore les capacités de JavaScript et réduit les erreurs potentielles. let let

Les mots clés permettent de déclarer les variables dans une portée de bloc spécifique, qui est un changement significatif par rapport aux limites précédentes de JavaScript qui sont limitées aux fonctions et aux lunettes globales. Les variables déclarées avec

ne sont pas hissées, ce qui signifie qu'elles ne peuvent pas être référencées avant d'être déclarées dans un bloc. const const Object.freeze() Les mots clés sont utilisés pour définir des constantes qui ne peuvent pas être redéclarées. Bien que let crée une liaison immuable, elle ne rend pas la valeur elle-même immuable. Pour atteindre l'immuabilité de la valeur, const doit être utilisé.

et

sont pris en charge dans le nœud et dans tous les navigateurs modernes. let const Ce tutoriel présentera

et

, deux mots clés qui sont de nouveaux mots clés ajoutés à JavaScript dans ES6. Ils améliorent le JavaScript en fournissant un moyen de définir des variables et des constantes à socle en bloc. Map WeakMap Cet article est l'un des nombreux articles sur le nouveau JavaScript introduit dans ES6, y compris Set et WeakSet, String et Number, disponible pour Array,

et

de nouvelles méthodes et une nouvelle syntaxe qui peut être utilisée pour les fonctions. let

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

Avant ES5, JavaScript n'avait que deux portées: la portée de la fonction et la portée globale. Cela apporte beaucoup de frustration et de comportement inattendu aux développeurs d'autres langues telles que C, C ou Java. JavaScript manque de portée de bloc, ce qui signifie que les variables ne sont accessibles que dans les blocs qu'il définit. Les blocs sont tout dans une paire de bretelles bouclées. Regardons l'exemple suivant:

<code>1
2
1
2</code>

Après avoir exécuté ce code, vous verrez la sortie suivante dans la console:

if bar La plupart des développeurs des langues ci-dessus s'attendent à ce que les variables bar ne soient pas accessibles en dehors du bloc if. Par exemple, l'exécution du code équivalent en C entraîne une erreur "bar non déclaré", qui fait référence à l'utilisation

en dehors du bloc .

Cette situation change dans ES6 avec la disponibilité de la portée du bloc. Les membres de l'organisation ECMA savent qu'ils ne peuvent pas modifier le comportement du mot-clé var parce que cela rompt la compatibilité en arrière. Ils ont donc décidé d'introduire un nouveau mot-clé appelé let. Ce dernier peut être utilisé pour définir des variables, limitant leur portée aux blocs qui les déclarent. De plus, contrairement à var, les variables déclarées en utilisant let ne seront pas promues. Si vous référez une variable dans le bloc avant de rencontrer la déclaration let de la variable, elle entraînera ReferenceError. Mais qu'est-ce que cela signifie dans la pratique? Est-ce seulement bon pour les débutants? pas du tout!

Pour expliquer pourquoi vous aimez let, veuillez considérer le code suivant, extrait de mon article "5 Exercices d'interview JavaScript":

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

Ici, vous pouvez identifier un problème bien connu lié aux déclarations variables, aux lunettes et aux gestionnaires d'événements. Si vous ne savez pas de quoi je parle, consultez l'article que j'ai mentionné avant de revenir.

Grâce à ES6, nous pouvons facilement résoudre ce problème en utilisant la variable for DÉCLARIEZ LA VARIABLE DE LA LOOPE let: i

Les instructions

<code>1
2
1
2</code>

sont prises en charge dans le nœud et dans tous les navigateurs modernes. Cependant, il y a certaines choses à noter dans Internet Explorer 11 que vous pouvez lire dans le tableau de compatibilité ES6. let

Une démonstration en temps réel de la différence entre

et var est illustrée ci-dessous, qui est également située sur JSBIN. let

const

répond aux demandes communes pour que les développeurs associent un mnémonique à une valeur donnée afin que la valeur ne puisse pas être modifiée (ou, plus simplement, définir une constante). Par exemple, si vous utilisez des formules mathématiques, vous voudrez peut-être créer un objet const. Dans cet objet, vous souhaitez associer les valeurs de π et E au mnémonique. Math vous permet d'atteindre cet objectif. En utilisant, vous pouvez créer une constante qui peut être globale ou une variable locale de la fonction qui le déclare. const

Les constantes définies avec

suivent les mêmes règles de portée que les variables, mais elles ne peuvent pas être redémarrées. Les constantes partagent également une propriété avec des variables déclarées en utilisant const, c'est-à-dire qu'elles sont enclopées par un bloc plutôt que la fonction de fonction (donc elles ne sont pas promues). Si vous essayez d'accéder à la constante avant de la déclarer, vous recevrez let. Si vous essayez d'attribuer une valeur différente à une variable déclarée avec ReferenceError, vous recevrez const. TypeError

Cependant, veuillez noter que

n'a rien à voir avec l'immuabilité. Comme Mathias Bynens l'a dit dans son article de blog ES2015 const n'a rien à voir avec l'immuabilité, const crée une liaison immuable, mais cela ne signifie pas que la valeur est immuable, comme le montre le code suivant: const

<code class="language-javascript">var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('您点击了元素 #' + i);
  });
}</code>

Si vous voulez rendre la valeur de l'objet vraiment immuable, utilisez

. Object.freeze()La prise en charge du navigateur

const est aussi bonne que let. Les instructions const sont prises en charge dans le nœud et dans tous les navigateurs modernes. Cependant, ici, Internet Explorer 11 a également certaines choses à noter, et vous pouvez lire les informations pertinentes dans le tableau de compatibilité ES6.

Une utilisation de l'échantillon de const est illustrée ci-dessous:

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

Ce qui suit montre une démonstration en direct du code précédent, qui est également situé sur JSBIN.

Conclusion

Dans ce tutoriel, je vous ai présenté let et const, deux nouvelles façons de déclarer les variables introduites dans ES6. Bien que var ne disparaîtra pas de sitôt, je vous encourage à utiliser const et let dans la mesure du possible pour réduire la possibilité d'erreurs de code. À titre de lecture supplémentaire, vous pourriez également aimer notre astuce rapide comment déclarer des variables en JavaScript, qui explore les mécanismes de déclarations variables plus en profondeur.

FAQ (FAQ) À propos d'Es6 let const Quelle est la différence entre

,

et var dans JavaScript es6? let const dans JavaScript es6,

,

, et var sont utilisés pour déclarer des variables. La principale différence entre eux est leur portée et leur réaffectation. let est encope, ce qui signifie qu'il n'est disponible que dans les fonctions qu'il déclare. D'un autre côté, const et var sont enclopés en blocs, ce qui signifie qu'ils ne sont disponibles que dans les blocs qu'ils déclarent. Quant à la réaffectation, les variables déclarées avec let et const peuvent être réaffectées, tandis que les variables déclarées avec var ne peuvent pas. Cela rend let très adapté aux valeurs qui doivent être maintenues inchangées tout au long du programme. const const Quand dois-je utiliser

et

dans mon code? let const Lorsque vous devez déclarer une variable qui change dans le temps, comme un compteur dans une boucle ou un échange de valeur dans un algorithme, vous devez utiliser

. Lorsque vous avez une valeur connue pour ne pas changer, telles que les paramètres de configuration ou les références aux éléments DOM, vous devez utiliser

. L'utilisation de let peut rendre votre code plus facile à lire et à comprendre car il montre aux autres développeurs que la valeur ne doit pas être modifiée. const const Puis-je réaffecter la variable

dans JavaScript es6?

const Non, vous ne pouvez pas réaffecter des variables

dans JavaScript es6. Une fois la variable

attribuée, tenter de réaffecter entraînera const. Cependant, si la variable const est un objet, vous pouvez modifier les propriétés de l'objet, mais pas l'objet lui-même. TypeError const Quelle est la portée de la variable

dans JavaScript ES6?

let Dans JavaScript ES6, la variable

a une portée de bloc. Cela signifie qu'il ne peut être accessible que dans le bloc de code qu'il définit. Si vous essayez d'y accéder en dehors de son bloc, vous recevrez

. let

Que se passe-t-il si je déclare une variable utilisant let ou const sans initialisation?

Si vous déclarez une variable utilisant let ou const sans initialisation, ce sera undefined. Cependant, contrairement à var, vous ne pouvez pas utiliser les variables let ou const avant de les déclarer. Cela entraînera ReferenceError.

Puis-je déclarer des variables avec le même nom en utilisant let ou const dans la même portée?

Non, vous ne pouvez pas déclarer des variables avec le même nom en utilisant let ou const dans la même portée. Cela entraînera SyntaxError. C'est ce qu'on appelle la règle de la "zone morte temporelle".

Dans le contexte de let et const, quelle est la promotion?

L'élévation est un mécanisme en JavaScript où les variables et les déclarations de fonction sont déplacées en haut de leur portée incluse pendant la phase de compilation. Cependant, contrairement à var, les déclarations let et const ne sont pas initialisées. Ils sont promus, mais vous ne pouvez pas y accéder avant la déclaration, car ils sont dans une "zone morte temporaire" à partir du début du bloc jusqu'à ce que la déclaration soit traitée.

Puis-je utiliser let et const dans tous les navigateurs?

let et const font partie de la spécification ES6 (ES2015) et sont pris en charge dans tous les navigateurs modernes. Cependant, pour les navigateurs plus anciens qui ne prennent pas en charge ES6, vous devez convertir le code ES6 en code ES5 à l'aide d'un traducteur tel que Babel.

Quel est l'impact des performances de l'utilisation let et const?

L'impact des performances de l'utilisation let et const est négligeable. Le moteur JavaScript optimise pour ces mots clés, il n'y a donc pas de différence de performance significative entre eux et var. Le choix entre let, const et var doit être basé sur leurs règles de portée et leurs comportements de réaffectation, pas les performances.

Quelles sont les meilleures pratiques pour utiliser let et const dans JavaScript es6?

Certaines meilleures pratiques d'utilisation let et const dans JavaScript es6 incluent l'utilisation de const par défaut, et seulement si vous savez que vous devez modifier le montant. Cela peut rendre votre code plus prévisible et plus facile à comprendre. De plus, déclarez toujours les variables en haut de leur portée pour clarifier où elles sont disponibles. let

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!