Introduction à la nouvelle méthode de déclaration de variables dans ES6 (avec code)

Cet article vous présente la nouvelle méthode de déclaration de variable dans ES6 (avec code). Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans ES5, il n'y a que trois types de déclarations de variables : var, fonction et déclaration implicite. Dans ES6, quatre types sont ajoutés : let, const, import et class.

1. let

1.1 Portée au niveau du bloc

La portée de la variable déclarée par let est la portée au niveau du bloc (cette fonctionnalité est quelque peu similaire au langage Backend), ES5 n'a pas de portée au niveau du bloc, seulement une portée de fonction et une portée globale.

{
  let a = 'ES6';
  var b = 'ES5';
}

console.log(b)  // ES5 
console.log(a)  // ReferenceError: a is not defined.

Alors, quels sont les avantages de la portée au niveau du bloc ?

let est idéal pour une portée au niveau du bloc à l'intérieur d'une boucle for. Le corps de la boucle for dans JS est spécial. Chaque exécution est une nouvelle portée de bloc indépendante une fois que les variables déclarées avec let sont passées dans la portée du corps de la boucle for, elles ne changeront pas et ne seront pas affectées par le monde extérieur. Regardez une question d'entretien courante :

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到异步的宏任务队列。
    console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   （共10个）
// 这里变量为i的for循环中，i是一个全局变量，在全局范围内都有效，所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮i的值，即i的最终结果为10，实际上都是console.log(10)。涉及的知识点：JS的事件循环机制，setTimeout的机制等

Changez var par let :

for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //当前的i仅在本轮的循环中有效，就是说每一次循环，i其实都是一个新产生的变量。                          //用 let 声明的变量 i 只作用于循环体内部，不受外界干扰。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8 9

1.2 Zone morte temporelle (Zone morte temporelle)

Dans une variable uniquement existe dans la portée au niveau du bloc Une fois qu'une variable est déclarée avec let dans la portée au niveau du bloc, la variable appartient uniquement à la portée au niveau du bloc et n'est pas affectée par les variables externes, comme indiqué ci-dessous.

var tmp = 'bread and dream';
if(true){
    tmp = 'dream or bread';   //ReferenceError
    let tmp;
}

Dans cet exemple, l'affectation de tmp = 'dream or bread' signalera une erreur car let dans le bloc if déclare la variable tmp, ce qui oblige le tmp à être lié à cette portée, et let La zone morte temporaire signifie qu'elle ne peut pas être utilisée avant la déclaration, donc attribuer une valeur à une variable avant la déclaration entraînera une erreur.

L'essence de la zone morte temporaire est que dès que vous entrez dans la portée actuelle, la variable que vous souhaitez utiliser existe déjà, mais elle n'est pas disponible. Vous ne pouvez l'obtenir et l'utiliser que jusqu'à la ligne de. le code qui déclare la variable apparaît.

L'intérêt de la zone morte temporaire est également de nous permettre de standardiser le code et de placer la déclaration de toutes les variables au début du scope.

1.3 Les déclarations répétées ne sont pas autorisées

(1) Dans la même portée, lorsque vous utilisez let pour déclarer une variable, elle ne peut être déclarée qu'une seule fois, mais var peut être déclaré plusieurs fois . Tout le monde sait que plusieurs déclarations dans ES5 entraîneront une couverture variable et qu'aucune erreur ne sera signalée, ce qui rend le débogage plus difficile, mais nous pouvons directement résoudre ce problème dans le berceau car cela signalera directement une erreur.

// 不报错
function demo() {
  var a = 'bread and dream';
  var a = 'dream or bread';
}
 
// 报错，Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  var a = 'dream or bread';
}

// 报错,Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  let a = 'dream or bread';
}

(2) Les paramètres ne peuvent pas être redéclarés à l'intérieur d'une fonction :

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

2. const

2.1 Utilisé pour déclarer des constantes

2.1. 🎜>

const Person;   // 错误，必须初始化 
const Person = 'bread and dream';// 正确

const Person2 = 'no'; 
Person2 = 'dream or bread'; //报错,不能重新赋值

Les constantes déclarées par const ne peuvent pas être modifiées et sont des attributs en lecture seule. Cela signifie que les constantes doivent se voir attribuer une valeur lorsqu'elles sont déclarées. Si elles sont déclarées sans affectation, une erreur sera généralement signalée. les constantes sont nommées avec des majuscules.

Cela présente deux avantages : premièrement, les personnes lisant le code se rendront immédiatement compte que cette valeur ne doit pas être modifiée, et deuxièmement, cela évite les erreurs causées par une modification par inadvertance de la valeur de la variable. Par exemple, lorsque nous utilisons certains modules de nodejs, nous n'utilisons que les modules correspondants (tels que le module http), mais nous n'avons pas besoin de modifier le module nodejs. À ce stade, nous pouvons le déclarer comme const, ce qui augmente la lisibilité de. le code et évite les erreurs.

2.2 Prend en charge la portée au niveau du bloc

if (true) {
  const MIN = 5;
}

MIN // Uncaught ReferenceError: MIN is not defined

const est similaire à let et prend également en charge la portée au niveau du bloc.

2.3 Ne prend pas en charge la promotion des variables et a un zone morte temporaire

if (true) {
  console.log(MIN); // ReferenceError
  const MIN = 5;
}

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

2.4 Cas particuliers

const obj = {};
obj.a = 'xiao hua';
console.log(obj.a);    //'xiao hua'

Si la constante déclarée est un objet, la réaffectation n'est pas autorisée pour l'objet lui-même, mais les propriétés de l'objet peuvent être attribuées.

En fait, ce que const peut garantir, ce n'est pas que la valeur de la variable ne peut pas être modifiée, mais que les données stockées dans l'adresse mémoire pointée par la variable ne peuvent pas être modifiées.

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, elle é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 ne stocke qu'un pointeur vers les données réelles.

Quant à savoir si la structure de données vers laquelle elle pointe est variable, elle est complètement hors de contrôle. Par conséquent, vous devez être très prudent lorsque vous déclarez un objet comme constante.

Si vous souhaitez figer complètement l'objet (ses propriétés ne peuvent pas être modifiées), vous devez utiliser la méthode Object.freeze(obj). Il en va de même pour les tableaux.

3. import

import {$} from './jquery.js'

ES6 utilise l'importation au lieu du nœud et d'autres modules requis pour importer. L'objet

$ est l'objet exposé par l'exportation dans jquery.

import { JQ as $ } from './jquery.js';

Si vous souhaitez renommer la variable d'entrée, utilisez le mot-clé as dans la commande d'importation pour renommer la variable d'entrée.

Notez que la commande d'importation a un effet liftant et sera promue en tête de l'ensemble du module et exécutée en premier.

4. classe

ES6 a introduit le concept de classe et le mot-clé classe. L’essence d’une classe reste un objet fonction.

//定义类
class Animal {
  constructor(name, age) {
        this.name = name;
        this.age = age;
  }    
  setSex(_sex) {
        this.sex=_sex;
  }
}

Définissez d'abord une classe :

La méthode constructeur est la méthode constructeur, qui est le corps principal de l'objet fonction à l'ère ES5, et le mot-clé this représente l'objet instance .

function Animal(name, age){
        this.name = name;
        this.age = age;
}

Animal.prototype.setSex = function (_sex) {
        this.sex=_sex;
}

La classe ci-dessus peut également être modifiée en écriture ES5 :

En fait, les caractéristiques de la plupart des classes peuvent être déduites des objets de fonction et des prototypes précédents.

生成类的实例对象的写法，与ES5通过构造函数生成对象完全一样，也是使用new命令。

class Animal {}
let dog = new Animal();

在类的实例上面调用方法，其实就是调用原型上的方法，因为类上的方法其实都是添加在原型上。

Class其实就是一个function，但是有一点不同，Class不存在变量提升，也就是说Class声明定义必须在使用之前。

5.总结

在ES6之前，JavaScript是没有块级作用域的，如果在块内使用var声明一个变量，它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域，let和const都添加了块级作用域，使得JS更严谨和规范。

let 与 const 相同点：

块级作用域
有暂时性死区
约束了变量提升
禁止重复声明变量

let 与 const不同点：

const声明的变量不能重新赋值，也是由于这个规则，const变量声明时必须初始化，不能留到以后赋值。

合理的使用ES6新的声明方式，不管是面试还是工作中都有实际的应用，尤其是工作中，大家一定要尽量的多使用新的声明方式，不但可以让代码更规范，更可以避免不必要的bug，浪费调试时间，进而提高工作效率。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

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!