Série ES6 déclarant les variables let et const

Cet article partage principalement avec vous les variables déclarées let et const de la série ES6. Les amis intéressés peuvent se référer au contenu de cet article

Introduction

Concept

La première version d'ES6 est sortie en juin 2015 et son nom officiel est « ECMAScript 2015 Standard » (ES2015 en abrégé). ES6 est à la fois un terme historique et un terme général. Il désigne le standard de nouvelle génération de JavaScript après la version 5.1, couvrant ES2015, ES2016, ES2017, etc., tandis que ES2015 est le nom officiel, faisant spécifiquement référence à la version officielle du langage publiée. cette année-là.

Prise en charge d'ES6 par les principaux navigateurs : kangax

Babel

Babel est un transcodeur ES6 largement utilisé qui peut convertir le code ES6 en code ES5 pour l'exécuter dans l'existant environnement.

Le fichier de configuration de Babel est .babelrc, qui est stocké dans le répertoire racine du projet. La première étape de l'utilisation de Babel consiste à configurer ce fichier.

Déclarer des variables

ES5 n'a que deux façons de déclarer des variables : la commande var et la commande de fonction ES6 ajoute les commandes let, const, import et class. Par conséquent, ES6 dispose d’un total de 6 façons de déclarer des variables.

Dans ES5, les propriétés des objets de niveau supérieur sont équivalentes aux variables globales. Pour changer cela, ES6 stipule d'une part que pour maintenir la compatibilité, les variables globales déclarées par la commande var et la commande function sont toujours des attributs de l'objet de niveau supérieur, d'autre part, il stipule que les variables globales ; déclarées par la commande let, la commande const et la commande class, propriétés qui n'appartiennent pas à l'objet de niveau supérieur. En d’autres termes, à partir d’ES6, les variables globales seront progressivement découplées des propriétés de l’objet de niveau supérieur.

let

ES6 ajoute la commande let pour déclarer les variables. Son utilisation est similaire à var, mais la variable déclarée n'est valide que dans le bloc de code où se trouve la commande let.

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

N'autorise pas les déclarations répétées

let n'autorise pas les déclarations répétées de la même variable dans la même portée.

// 报错
function func() {
  let a = 10;
  var a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

Étendues au niveau du bloc

• ES6 permet l'imbrication arbitraire des étendues au niveau du bloc.

• La portée interne peut définir des variables du même nom dans la portée externe.

• La portée externe ne peut pas lire les variables de la portée interne.

{{{{
  {let insane = 'Hello World'
   {let insane = 'Hello World'}
  }
  console.log(insane); // 报错
}}}};

Portée au niveau du bloc et déclaration de fonction

• ES5 stipule que les fonctions ne peuvent être que dans la portée de niveau supérieur et la déclaration de portée de fonction ne peut pas être déclaré au niveau de la portée du bloc.

• ES6 stipule que dans la portée au niveau du bloc, les instructions de déclaration de fonction se comportent comme let et ne peuvent pas être référencées en dehors de la portée au niveau du bloc.

Considérant que le comportement provoqué par l'environnement est trop différent, il convient d'éviter de déclarer des fonctions dans une portée au niveau du bloc. Si cela est vraiment nécessaire, il doit être écrit sous forme d'expression de fonction au lieu d'une instruction de déclaration de fonction.

Il n'y a pas de promotion de variable

Les variables déclarées par la commande let doivent être utilisées après déclaration, sinon une erreur sera signalée.

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

Zone morte temporaire

Tant que la commande let existe dans la portée au niveau du bloc, les variables qu'elle déclare seront "liées" à cette zone et ne seront plus affectées par des influences extérieures.

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

Dans un bloc de code, la variable n'est disponible que lorsqu'elle est déclarée à l'aide de la commande let. Syntaxiquement, cela s'appelle la « zone morte temporaire » (TDZ).

const

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

• n'est valide que dans la portée au niveau du bloc où il est déclaré.

• Les constantes déclarées par la commande const ne sont pas non plus promues. Il existe également une zone morte temporaire et ne peuvent être utilisées qu'après la position déclarée.

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

Essence

Ce que const garantit réellement, ce n'est pas que la valeur de la variable ne peut pas être modifiée, mais que l'adresse mémoire pointée par la variable ne peut pas être modifié. Pour les types de données simples (valeurs numériques, chaînes, valeurs booléennes), la valeur est stockée à l'adresse mémoire pointée par la variable, et équivaut donc à une constante. Mais pour les données de type composite (principalement des objets et des tableaux), l'adresse mémoire pointée par la variable n'enregistre qu'un pointeur. Const ne peut que garantir que ce pointeur est fixe. Quant à savoir si la structure de données vers laquelle il pointe est variable, elle l'est complètement. Je ne peux plus le contrôler. Par conséquent, vous devez être très prudent lorsque vous déclarez un objet comme constante.

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

Si vous souhaitez vraiment geler l'objet, vous devez utiliser la méthode Object.freeze.

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

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!