es6 中 for 循环内 var 与 let 声明变量 区别 一见明了

var 声明的变量 在for 中循环

——现象：var 声明的变量 在for 中循环

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log("打印结果"+i);
  };
}
a[9](); // 打印结果： 10

——原因：变量i是var 声明的，为全局变量作用域为整个for循环，每一次循环中当i发生改变时， a中每个i 值也是同步改变的！

当i=0时 a: [ a[0] ]  =>> a=[0]
当i=1时 a: [ a[1],a[1]]  =>> a=[1,1]
当i=2时 a: [ a[2],a[2],a[2] ]  =>> a=[2,2,2]
当i=3时 a: [ a[3], a[3],a[3],a[3]]  =>> a=[3,3,3,3]
当i=4时 a: [ a[4],a[4],a[4],a[4],a[4] ]  =>> a=[4,4,4,4,4]
当i=5时 a: [ a[5],a[5],a[5],a[5],a[5],a[5] ]  =>> a=[5,5,5,5,5,5]
.....

let 声明的变量 在for 中循环

——现象：

var a = [];
for(let i = 0; i < 10;i++){
     a[i] = function(){
          console.log("打印结果："+i);
      };
 }
 a[5]() //打印结果:5

 

——原因：let声明的变量，只在本次循环有效，所以每一次循环的i其实都是一个新的变量

当i=0时 a: [ a[0] ]  =>> a=[0]
当i=1时 a: [ a[0],a[1]]  =>> a=[0,1]
当i=2时 a: [ a[0],a[1],a[2] ]  =>> a=[0,1,2]
当i=3时 a: [ a[0],a[1],a[2],a[3]]  =>> a=[0,1,3,3]
当i=4时 a: [ a[0],a[1],a[2],a[3],a[4] ]  =>> a=[0,1,2,3,4]
当i=5时 a: [ a[0],a[1],a[2],a[3],a[4],a[5] ]  =>> a=[0,1,2,3,4,5]
.....

补充：

var 特点： 预读（初始化）， 全局变量

{
     console.log(b); // undefined 
     var b = 3
 }    
//undefined 已初始化 未赋值


{
     console.log(a); // can't access lexical declaration `a' before initialization
     let a = 3  
 } 
//a 未初始化 在初始化之前不能访问词汇声明“a”

{
     var c = 0; //全局有效
     let d = 3; //只能在{} 中使用 ，有效
 }    
 console.log("c:"+c); //c:0
 console.log("d:"+d); //'d' is undefined

 

总结：

   在小的循环中，或者小的方法内使用的 变量，一般用let 声明，合理使用var。