Quelle est la différence entre var et let en javascript-Questions et réponses frontales-php.cn

Quelle est la différence entre var et let en javascript

青灯夜游

Libérer： 2021-10-13 17:25:24

original

29186 Les gens l'ont consulté

Différences : 1. var a une promotion de variable, mais pas let ; 2. let n'autorise pas les déclarations répétées dans la même portée, mais var le fait ; 3. let n'a pas de problèmes de zone morte temporaires ; let Il n'y a pas d'attribut correspondant défini pour window ; 5. let générera une portée au niveau du bloc, mais pas var.

Quelle est la différence entre var et let en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Si vous voulez comprendre la différence entre var (ES5) et let (ES6), vous devez d'abord comprendre la promotion variable de JS sous ES5var（ES5）和let（ES6）区别，首先就要了解ES5下JS的变量提升

一、变量提升（声）

当浏览器开辟出供代码执行的栈内存后，代码并没有自上而下立即执行，而是继续做了一些事情：把当前作用域中所有带var/function关键字的进行提前的声明和定义 => 变量提升机制

Quelle est la différence entre var et let en javascript只是提前声明（declare）var a;，如果只声明没有赋值，默认值是undefined
例如：

console.log(a);
var a = 13;

Copier après la connexion

输出：undefined
相当于：

var a;		// 只声明没有赋值，默认为undefined
console.log(a);
a = 13;

Copier après la connexion

带function的不仅声明，而且还定义了（defined），准确来说就是让变量和某个值进行关联。

二、let和var的区别

1. let和const不存在变量提升机制

创建变量的六种方式中：var/function有变量提升，而let/const/class/import都不存在这个机制

2. var允许重复声明，而let不允许重复声明

在相同的作用域（或执行上下文中）

如果使用var/function关键词声明变量并且重复声明，是不会有影响的（声明第一次之后，之后再遇到就不会再重复声明了）
但使用let/const就不行，浏览器会校验当前作用域中是否已经存在这个变量了，如果已经存在了，则再次基于let等重新声明就会报错

在浏览器开辟栈内存供代码自上而下执行之前，不仅有变量提升的操作，还有很多其他的操作 => “词法解析”或者“词法检测”：就是检测当前即将要执行的代码是否会出现“语法错误 SyntaxError”，如果出现错误，代码将不会再执行（第一行都不会执行）

console.log(1)  // => 这行代码就已经不会执行了
let a = 12
console.log(a)
let a = 13      // => 此行出错：SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)

Copier après la connexion

所谓重复就是：不管之前通过什么方法，只要当前栈内存中存在了这个变量，我们使用let/const等重复再声明这个变量就是语法错误。eg：

console.log(a)
var a = 12
let a = 13  // => SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)

Copier après la connexion

console.log(a)
let a = 13
var a = 12  // => SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)

Copier après la connexion

3. let能解决typeof检测时出现的暂时性死区问题（let比var更严谨）

console.log(a)
// => ReferenceError: a is not defined

Copier après la connexion

typeof a 未报错

console.log(typeof a)
// =>  &#39;undefined&#39; 这是浏览器的bug，本应报错，因为没有a（暂时性死区）

Copier après la connexion

使用let后：

console.log(typeof a)
// => ReferenceError: Cannot access &#39;a&#39; before initialization
let a

Copier après la connexion

返回不能在a

1. Promotion variable (Son)

Lorsque le navigateur ouvre la mémoire de la pile pour l'exécution du code, le code n'est pas exécuté immédiatement de haut en bas, mais continue de faire quelque chose : Mettez toutes les var/fonctions dans le périmètre actuel Déclaration et définition des mots-clés à l'avance => Mécanisme de promotion des variables

Avec var, on ne déclare à l'avance (declare) var a;, que s'il est seulement déclaré sans affectation, la valeur par défaut La valeur est undéfini
Par exemple :

/*
 * Quelle est la différence entre var et let en javascript的：相当于给全局对象window设置了一个属性a
 *      window.a = 13
 */
a = 13
console.log(a)  // => window.a 13
/*
 * 栈内存变量存储空间
 *            b
 * Quelle est la différence entre var et let en javascript：是在全局作用域下声明了一个变量b（全局变量），
 * 但是在全局下声明的变量也相当于给全局对象window增加了一个对应的
 * 属性b（只有全局作用域具备这个特点）
 */
var b = 14
console.log(b)
console.log(window.b)

Copier après la connexion

Sortie : undéfini

Équivalent à :

/*
 * 栈内存变量存储空间
 *   c
 * 带let的：仅仅在全局作用域下声明了一个变量b（全局变量），
 * 并未给全局对象window增加对应的属性c
 */
let c = 15
console.log(c)                          // => 15
console.log(window.c)                   // => undefined

Copier après la connexion

< li>Non seulement les déclarations avec les fonctions , mais il définit également (défini), pour être précis, il associe une variable à une certaine valeur.

2. La différence entre let et var

Quelle est la différence entre var et let en javascript

let et const n'ont pas. Mécanisme de promotion de variables

Quelle est la différence entre var et let en javascript

Parmi les six façons de créer des variables : var/function a une promotion de variable, mais let/const/class/import n'a pas ce mécanisme 2.

var

autorise les déclarations en double, tandis que

let<a href="https://www.php.cn/course/list/2.html" target="_blank"> n'autorise pas les déclarations en double

🎜🎜🎜 dans la même portée (ou exécution). context ) 🎜

Si vous utilisez le mot clé var/function pour déclarer une variable et la déclarez à plusieurs reprises, il n'y aura aucun impact (après la première déclaration, elle ne sera plus répétée si vous le rencontrez plus tard) Déclaré)
Mais utiliser let/const ne fonctionnera pas. Le navigateur vérifiera si cette variable existe déjà dans la portée actuelle. Si elle existe déjà, il sera basé sur < Code>let et d'autres redéclarations signaleront une erreur

🎜🎜Avant que le navigateur n'ouvre la mémoire de la pile pour l'exécution descendante du code, il n'y a pas que des variables des opérations de promotion, mais aussi bien d'autres opérations. Opération => "Analyse lexicale" ou "détection lexicale" : Il s'agit de détecter si le code qui est sur le point d'être exécuté aura une "SyntaxError". ne sera pas exécuté à nouveau (la première ligne ne sera pas exécutée) 🎜🎜

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    button {
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
<!---->
<button value="red">红</button>
<button value="green">绿</button>
<button value="blue">蓝</button>

<script>
  var body = document.querySelector(&#39;body&#39;),
    buttons = document.querySelectorAll(&#39;button&#39;),
    arr = [&#39;red&#39;, &#39;green&#39;, &#39;blue&#39;]
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      body.style.background = arr[i]
    }
  }
</script>
</body>

</html>

Copier après la connexion

🎜La soi-disant duplication est la suivante : quelle que soit la méthode utilisée auparavant, tant que cette variable existe dans la mémoire de la pile actuelle, c'est une erreur de syntaxe si nous utilisons let/const pour déclarer cette variable à plusieurs reprises. par exemple : 🎜rrreeerrreee🎜🎜🎜3. let peut résoudre le problème de zone morte temporaire qui se produit lors du type de détection (let est plus rigoureux que var)🎜🎜🎜rrreee🎜typeof a Aucune erreur n'est signalée🎜rrreee 🎜Utilisezlet : 🎜rrreee🎜Return ne peut pas l'utiliser avant que a ne soit défini pour résoudre le problème de zone morte temporaire. 🎜🎜🎜🎜4. La variable globale créée par let ne définit pas l'attribut correspondant pour la fenêtre🎜🎜🎜🎜Tout d'abord, regardez la différence entre créer une variable globale avec var et sans var🎜rrreee🎜🎜🎜🎜🎜 Une fois créée with let:🎜rrreee 🎜🎜🎜🎜🎜🎜5. let générera une portée au niveau du bloc🎜🎜🎜🎜Le code suivant peut-il changer la couleur d'arrière-plan du corps en la couleur correspondant au bouton lorsqu'un bouton est cliqué ? , comment l'améliorer (Tencent)🎜rrreee 🎜La réponse est bien sûr non, car la variable définie via var, i dans la boucle for est globale Une fois la variable promue et la boucle passée trois fois, i=3, car cliquer sur chacun équivaut à cliquer sur le dernier. 🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé 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!