JavaScript let et const

ECMAScript 2015(ECMAScript 6)

ES2015 (ES6) a introduit deux nouveaux mots-clés JavaScript importants :letetconst。

Les variables déclarées avec let ne sont valides que dans le bloc de code où se trouve l'instruction let.

const déclare une constante en lecture seule. Une fois déclarée, la valeur de la constante ne peut pas être modifiée.

Avant ES6, JavaScript n'avait que deux types de portée :Variables globalesetVariables locales à l'intérieur des fonctions。

Variables globales

Les variables déclarées en dehors d'une fonction ont une portée globale :

Exemple

var carName = "Volvo"; //Ici, la variable carName peut être utilisée function myFunction() { //La variable carName peut également être utilisée ici }

Essayez-le vous-même »

Les variables globales sont accessibles depuis n'importe où dans un programme JavaScript.

Variables locales

Les variables déclarées à l'intérieur d'une fonction ont une portée locale (au sein de la fonction) :

Exemple

//Ici, la variable carName ne peut pas être utilisée function myFunction() { var carName = "Volvo"; //Ici, la variable carName peut être utilisée } //Ici, la variable carName ne peut pas être utilisée

Essayez-le vous-même »

Les variables déclarées avec var à l'intérieur d'une fonction ne sont accessibles qu'au sein de la fonction ; si var n'est pas utilisé, ce sont des variables globales.

Portée de bloc JavaScript

Les variables déclarées avec le mot-clé var n'ont pas de portée de bloc ; elles peuvent toujours être accessibles en dehors de {}.

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

Avant ES6, il n'y avait pas de concept de portée de bloc.

ES6 peut utiliser le mot-clé let pour obtenir une portée de bloc.

Les variables déclarées avec let ne sont valides qu'à l'intérieur du bloc de code où se trouve la commande let{}et sont valides à l'intérieur ; à l'extérieur{}elles ne sont pas accessibles.

{ 
    let x = 2;
}
// 这里不能使用 x 变量

Redéclaration de variables

Redéclarer des variables avec le mot-clé var peut causer des problèmes.

Redéclarer une variable à l'intérieur d'un bloc redéclare aussi la variable en dehors du bloc :

Exemple

var x = 10; //Ici, x affiche 10. { var x = 2; //Ici, x renvoie 2. } //Ici, x renvoie 2.

Essayez-le vous-même »

Le mot-clé let peut résoudre ce problème, car il n'est valide qu'à l'intérieur du bloc de code où se trouve la commande let{}et est valide à l'intérieur.

Exemple

var x = 10; //Ici, x affiche 10. { let x = 2; //Ici, x renvoie 2. } //Ici, x renvoie 10.

Essayez-le vous-même »

Prise en charge des navigateurs

Internet Explorer 11 et les navigateurs antérieurs ne prennent pas en charge le mot-clé let.

Le tableau ci-dessous liste les versions minimales des navigateurs qui prennent en charge le mot-clé let.

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
mars 2016 juil. 2015 janv. 2015 sept. 2017 mars 2016

Portée de boucle

Utilisation du mot-clé var :

Exemple

var i = 5; for (var i = 0; i < 10; i++) { //Du code... } //Ici, i affiche 10.

Essayez-le vous-même »

Utilisation du mot-clé let :

Exemple

var i = 5; for (let i = 0; i < 10; i++) { //Du code... } //Ici, i affiche 5.

Essayez-le vous-même »

Dans le premier exemple, le varvarmot-clé est utilisé. La variable qu'il déclare est globale, à la fois à l'intérieur et à l'extérieur de la boucle.

Dans le deuxième exemple, le letletmot-clé est utilisé. La variable qu'il déclare a une portée uniquement à l'intérieur de la boucle ; les variables à l'extérieur de la boucle ne sont pas affectées.

Variables locales

Lorsqu'il est utilisé dans le corps d'une fonction, levaretletmot-clé déclare des variables d'une manière assez similaire.

Leur portée estlocale.:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

Variables globales

Lorsqu'il est utilisé en dehors du corps d'une fonction ou en dehors d'un bloc de code, levaretletmot-clé déclare des variables qui sont également assez similaires.

Leur portée estglobale.:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

Variables globales en HTML

En JavaScript, la portée globale s'applique à l'environnement JavaScript.

En HTML, la portée globale s'applique à l'objet window.

Les variables globales déclarées avec levarmot-clé var appartiennent à l'objet window :

Exemple

var carName = "Volvo"; //La variable est accessible avec window.carName

Essayez-le vous-même »

Les variables globales déclarées avec leletmot-clé let n'appartiennent pas à l'objet window :

Exemple

let carName = "Volvo"; //La variable n'est pas accessible avec window.carName

Essayez-le vous-même »

Réinitialisation des variables

Les variables déclarées avec levarmot-clé var peuvent être modifiées n'importe où :

Exemple

var x = 2; //x vaut 2 var x = 3; //Maintenant x vaut 3

Essayez-le vous-même »

Dans la même portée ou portée de bloc, vous ne pouvez pas utiliserletlet pour réinitialiser les variables déclarées avecvarvar :

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

Dans la même portée ou portée de bloc, vous ne pouvez pas utiliserletlet pour réinitialiser les variables déclarées avecletvar :

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

Dans la même portée ou portée de bloc, vous ne pouvez pas utiliservarlet pour réinitialiser les variables déclarées avecletvar :

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

letLe mot-clé let peut être utilisé pour redéclarer et réaffecter des variables dans différentes portées ou différentes portées de bloc :

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

Remontée des variables

En JavaScript, les variables définies avec le mot-clé var peuvent être déclarées après leur utilisation ; c'est-à-dire que les variables peuvent être utilisées avant d'être déclarées (remontée des variables JavaScript）。

Exemple

//Ici, la variable carName peut être utilisée var carName;

Essayez-le vous-même »

Les variables définies avec le mot-clé let ne peuvent pas être déclarées après utilisation ; c'est-à-dire que les variables doivent être déclarées avant utilisation.

// 在这里不可以使用 carName 变量

let carName;

Le mot-clé const

const est utilisé pour déclarer une ou plusieurs constantes. Elles doivent être initialisées lors de la déclaration, et leurs valeurs ne peuvent pas être modifiées après l'initialisation :

Exemple

const PI = 3.141592653589793; PI = 3.14; //Lève une erreur PI = PI + 10; //Lève une erreur

Essayez-le vous-même »

constLa définition de constantes est similaire à l'utilisation duletmot-clé let pour définir des variables :

  • Les deux ont une portée de bloc
  • Aucune des deux ne peut avoir le même nom qu'une autre variable ou fonction dans la même portée.

Les deux ont aussi les deux différences suivantes :

  • constLes constantes déclarées avec const doivent être initialisées, tandis queletles variables déclarées avec let n'ont pas besoin de l'être.
  • La valeur d'une constante définie avec const ne peut pas être modifiée par réaffectation, ni être redéclarée. Cependant, les variables définies avec let peuvent avoir leur valeur modifiée.
var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

Les constantes déclarées avec const doivent être initialisées :

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

Pas vraiment constant

L'essence de const : les variables définies avec const ne sont pas de vraies constantes ; elles ne sont pas immuables. Il définit une référence constante vers une valeur. Les objets ou tableaux définis avec const sont en fait mutables. Le code suivant ne lèvera pas d'erreur :

Exemple

//Créer un objet constant const car = {type:"Fiat", model:"500", color:"white"}; //Modifier la propriété : car.color = "red"; //Ajouter une propriété car.owner = "Johnson";

Essayez-le vous-même »

Mais nous ne pouvons pas réaffecter un objet constant :

Exemple

const car = {type:"Fiat", model:"500", color:"white"}; car = {type:"Volvo", model:"EX60", color:"red"}; //Erreur

Essayez-le vous-même »

L'exemple suivant modifie un tableau constant :

Exemple

//Créer un tableau constant const cars = ["Saab", "Volvo", "BMW"]; //Modifier les éléments cars[0] = "Toyota"; //Ajouter des éléments cars.push("Audi");

Essayez-le vous-même »

Mais on ne peut pas réaffecter un tableau constant :

Exemple

const cars = ["Saab", "Volvo", "BMW"]; cars = ["Toyota", "Volvo", "Audi"]; //Erreur

Essayez-le vous-même »

Prise en charge des navigateurs

Internet Explorer 10 et les navigateurs plus anciens ne prennent pas en charge le mot-clé const.

Le tableau suivant répertorie les premières versions de navigateur qui prennent en charge le mot-clé const.

Chrome 49 IE / Edge 11 Firefox 36 Safari 10 Opera 36
mars 2016 oct. 2013 Févr., 2015 Sept., 2016 mars 2016

Réinitialisation des variables

Utilisation devarLes variables déclarées avec le mot-clé peuvent être modifiées n'importe où :

Exemple

var x = 2; //Valide var x = 3; //Valide x = 4; //Valide

Dans la même portée ou portée de bloc, vous ne pouvez pas utiliserconstle mot-clé pour redéclarervaretletvariables déclarées avec le mot-clé :

var x = 2;         // 合法
const x = 2;       // 不合法
{
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

Dans la même portée ou portée de bloc, vous ne pouvez pas utiliserconstle mot-clé pour redéclarerconstles variables déclarées avec le mot-clé :

const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法

{
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

constLe mot-clé peut être redéclaré et affecté dans différentes portées ou différentes portées de bloc :

const x = 2;       // 合法

{
    const x = 3;   // 合法
}

{
    const x = 4;   // 合法
}

Remontée des variables

Les variables définies avec le mot-clé var de JavaScript peuvent être déclarées après leur utilisation, c'est-à-dire que les variables peuvent être utilisées avant leur déclaration (hissage des variables JavaScript）。

Exemple

carName = "Volvo"; //La variable carName peut être utilisée ici var carName;

Essayez-le vous-même »

Les variables définies avec le mot-clé const ne peuvent pas être déclarées après leur utilisation ; c'est-à-dire que les variables doivent être déclarées avant d'être utilisées.

carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";
Autres extensions