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.
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关键字的进行提前的声明和定义 => 变量提升机制
var a;，如果只声明没有赋值，默认值是undefinedconsole.log(a); var a = 13;
输出：undefined
相当于：
var a; // 只声明没有赋值，默认为undefined console.log(a); a = 13;
1. let和const不存在变量提升机制
创建变量的六种方式中：var/function有变量提升，而let/const/class/import都不存在这个机制
2. <span style="font-size: 18px;">var</span>允许重复声明，而<span style="font-size: 18px;">let</span>不允许重复声明
在相同的作用域（或执行上下文中）
var/function关键词声明变量并且重复声明，是不会有影响的（声明第一次之后，之后再遇到就不会再重复声明了）let/const就不行，浏览器会校验当前作用域中是否已经存在这个变量了，如果已经存在了，则再次基于let等重新声明就会报错在浏览器开辟栈内存供代码自上而下执行之前，不仅有变量提升的操作，还有很多其他的操作 => “词法解析”或者“词法检测”：就是检测当前即将要执行的代码是否会出现“语法错误 SyntaxError”，如果出现错误，代码将不会再执行（第一行都不会执行）
console.log(1) // => 这行代码就已经不会执行了 let a = 12 console.log(a) let a = 13 // => 此行出错：SyntaxError: Identifier 'a' has already been declared console.log(a)
所谓重复就是：不管之前通过什么方法，只要当前栈内存中存在了这个变量，我们使用let/const等重复再声明这个变量就是语法错误。eg：
console.log(a) var a = 12 let a = 13 // => SyntaxError: Identifier 'a' has already been declared console.log(a)
console.log(a) let a = 13 var a = 12 // => SyntaxError: Identifier 'a' has already been declared console.log(a)
3. let能解决typeof检测时出现的暂时性死区问题（let比var更严谨）
console.log(a) // => ReferenceError: a is not defined
typeof a 未报错
console.log(typeof a) // => 'undefined' 这是浏览器的bug，本应报错，因为没有a（暂时性死区）
使用let后：
console.log(typeof a) // => ReferenceError: Cannot access 'a' before initialization let a
返回不能在a
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
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)
Sortie : undéfini
/* * 栈内存变量存储空间 * c * 带let的：仅仅在全局作用域下声明了一个变量b（全局变量）， * 并未给全局对象window增加对应的属性c */ let c = 15 console.log(c) // => 15 console.log(window.c) // => undefined
1 let et const n'ont pas. Mécanisme de promotion de variables
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.
<p>var</p>autorise les déclarations en double, tandis que
<p>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 ) 🎜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é)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<!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('body'),
buttons = document.querySelectorAll('button'),
arr = ['red', 'green', 'blue']
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
body.style.background = arr[i]
}
}
</script>
</body>
</html>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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
