问题描述
话不多说，先看问题：（来源于牛客网）
for(let i=0;i<2;i++){
setTimeout(function(){
console.log(i)
},100);
}
for(var i=0;i<2;i++){
setTimeout(function(){
console.log(i)
},100);
}可以先思考一下······
F12看一下正确结果：0 1 2 2
然后开始纳闷，两个for循环只有let和var不同却引起结果如此不同
纳闷完开始思考为什么？
该问题涉及事件循环、变量提升、块级作用域等知识点
详解
第一个for循环
首先let声明的变量具有块级作用域，且不存在变量提升
- 由于js的事件循环 ，进入for循环，执行let i =0，在内存中开辟空间存入 i 。i <2 ,满足条件执行循环体，这里因为setTimeout函数是宏任务，故将其放如任务队列中，先不执行；
- 执行i++，因为let具有块级作用域，故创建一个新的作用域，在内存中开辟空间存入 i 为1。满足i < 2执行循环体，又遇到setTimeout，同样先不执行将其放到任务队列中；
- 再执行i++，let具有块级作用域，故创建一个新的作用域，在内存中开辟空间存入 i 为2，不满足条件退出循环，for循环退出执行栈；
- 此时查看任务队列，执行任务队列中的代码，将第一个放入的setTimeout放到执行栈中执行，执行console.log(i)，此时由于存在块级作用域，所以找到块级作用域中的局部变量 i ，此时i为0，输出0，执行完成后该setTimeout退出执行栈；
- 同第四步，将任务队列的另一个setTimeout放到执行栈中执行，找到块级作用域中的局部变量 i ，此时i为1，输出1
第二个for循环
首先var声明的变量没有块级作用域，且存在变量提升
故for循环中var声明的变量是全局变量，上述代码相当于：
var i；
for( i=0;i<2;i++){
setTimeout(function(){
console.log(i)
},100);
}- 由于js的事件循环，先执行var i，进入for循环，i =0，i <2 ,满足条件执行循环体，这里因为setTimeout函数是宏任务，故将其放如任务队列中，先不执行；
- 执行i++，内存中 i 的值变为1，满足i < 2执行循环体，又遇到setTimeout，同样先不执行将其放到任务队列中；
- 再执行i++，内存中 i 的值变为2，不满足条件退出循环，for循环退出执行栈；
- 此时查看任务队列，执行任务队列中的代码，将第一个放入的setTimeout放到执行栈中执行，执行console.log(i)，此时由于没有块级作用域，所以向上找到全局变量 i ，此时内存中i为2，输出2，执行完成后该setTimeout退出执行栈；
- 同第四步，将任务队列的另一个setTimeout放到执行栈中执行，向上找到全局变量 i ，此时内存中i为2，输出2
执行栈中的for循环中i的内存变化，这里的i为全局变量，执行for循环时i的值会被覆盖。
总结
- for循环中var声明的变量是全局变量，而let声明的变量是局部变量
- 当在 for 循环中使用 let 声明变量时，每次循环迭代都会为变量创建一个新的内存空间。这是因为 let 声明具有块级作用域，每次循环迭代都会创建一个新的作用域。变量只在当前循环迭代的块内部可见，循环结束后，作用域和变量都会被释放。而var会共享一个变量。