let在for循环中的灵活使用

我们都知道es6语法新增了两个关键字,let声明变量.const声明常量. 我们会发现,当我们利用for循环给一个元素集合添加事件时,事件驱动的函数里面是不能对应访问每个循环值的,只能访问最后一个,而当我们将for循环里面条件中声明变量的关键字该为let时,情况就发生了变化. 我们函数里面是能访问每次循环对应的值,这是为什么勒.此时我们就需要深究for循环的原理了. 经过我的多方查阅.最终我认为for循环,是一系列从上到下的块级区域组成的代码最终的简化实现.
如for(var i=0;i<4;i++){btn[i].οnclick=function(){alert(i)}} 其实是由以下代码组成;

{var i = 0;
btn[0].onclick=function(){
alert(0) //此处的0背后其实是i,即alert(i)
}
}
{var i = 1;
btn[1].onclick=function(){
alert(1) //此处的1背后其实是i,即alert(i)
}
}
{var i = 2;
btn[2].onclick=function(){
alert(2) //此处的0背后其实是i,即alert(i)
}
}
{var i = 3;
btn[3].onclick=function(){
alert(3) //此处的0背后其实是i,即alert(i)
}
}

由于时间肯定是在页面渲染完成后才发生,而当发生事件时,每个按钮对应弹出的i已经不是写代码时的i对应的值了,而是变为4了,所以最后获取的i值为4,故所有的按钮弹出的值都是4

而当我们把var换成let就不一样了,因为let声明的是局部变量,只在当前作用域内有效,es6新增的块级区域即是由{}可以区分开,而var不区分块级区域的,所以后面var的i可以改变前面的i,而let声明的i只作用于当前区域,所以并不影响之前的i,即每个块级区域都相当于一个独立的变量,所以最后每个按钮弹出的值都是对应的值.