Portée au niveau du bloc ECMAScript6 et nouvelles compétences en matière de déclaration de variable (let)_javascript

De nombreux langages ont une portée au niveau du bloc, mais pas JS. Il utilise var pour déclarer des variables et une fonction pour diviser la portée. Les accolades "{}" ne peuvent pas limiter la portée de var. Les variables déclarées avec var ont pour effet un levage de variable (levage de déclaration).

Un let a été ajouté dans ES6, qui peut être déclaré dans {}, if ou for. L'utilisation est la même que var, mais la portée est limitée au niveau du bloc et il n'y a pas de promotion de variable pour les variables déclarées par let.

Exemple 1 : Portée au niveau du bloc si

function getVal(boo) {
  if (boo) {
    var val = 'red'
    // ...
    return val
  } else {
    // 这里可以访问 val
    return null
  }
  // 这里也可以访问 val
}

La variable val est déclarée dans le bloc if, mais val est accessible en dehors du bloc else et if.

Remplacez var par let et ça devient comme ça

function getVal(boo) {
  if (boo) {
    let val = 'red'
    // ...
    return val
  } else {
    // 这里访问不到 val
    return null
  }
  // 这里也访问不到 val
}　

Exemple 2 : portée au niveau du bloc pour

function func(arr) {
  for (var i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里也可以访问到i
}

La variable i est déclarée dans le bloc for, mais elle est également accessible en dehors du bloc for.

Remplacez var par let, et je ne suis pas accessible à l'extérieur pendant

function func(arr) {
  for (let i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里访问不到i
}

Exemple 3 : Promotion variable (utiliser d'abord, déclarer plus tard)

function func() {
  // val先使用后声明，不报错
  alert(val) // undefined
  var val;
}

La variable val est utilisée en premier puis déclarée. Elle génère un résultat indéfini et ne signale pas d'erreur.

Remplacez var par let et une erreur sera signalée

function func() {
  // val先使用后声明，报语法错
  alert(val)
  let val;
}　

Exemple 4 : Promotion variable (juger d'abord puis déclarer)

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  var val = ''
}

Lorsque vous utilisez le type de jugement, vous pouvez également le placer devant l'instruction var

Mais remplacez var par let, et une erreur de syntaxe est signalée à if

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  let val = '';
}

ES6 stipule que si let existe dans un bloc de code, ce bloc forme dès le début une portée fermée. Si utilisé avant la déclaration, une erreur sera signalée. Autrement dit, dans un bloc de code, les variables utilisées avant la déclaration let ne sont pas disponibles. Il existe un terme en grammaire appelé « zone morte temporelle », ou TDZ en abrégé. Bien entendu, TDZ n’apparaît pas dans la spécification ES, il n’est utilisé qu’à des fins de description visuelle.

Notes sur la location

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

// var和let重复声明
var name = 'Jack';
let name = 'John';
 
// 两个let重复声明
let age = 24;
let age = 30;

Erreur de syntaxe lors de l'exécution

2. Avec let, l'auto-exécution de fonctions anonymes peut être éliminée

// 匿名函数写法
(function () {
 var jQuery = function() {};
 // ...
 window.$ = jQuery
})();
 
// 块级作用域写法
{
 let jQuery = function() {};
 // ...
 window.$ = jQuery;
}

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.