使用for循环计算循环条件语句中.使用let 和 for 语句块的问题

	今天看文档碰到一个比较奇怪的问题;在for语句中的 计算循环条件语句中;使用let定义的i变量;和使用var定义的变量;
有一个比较疑惑的现象;上代码

使用var定义的i变量:

for (var i = 0; i < 6; i++) {
     setTimeout(function () {
         console.log(i);
     }, 1000);
 }

这是比较常见的js面试题;控制台输出6个6;

当我们使用let定义i变量的时候:

for (let i = 0; i < 6; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

当我们使用let定义i变量的时候控制台输出0 1 2 3 4 5 ;
为什么会这样呢?
我们都知道 let和var定义变量的区别:
: 1.let 不存在变量提升.var 存在;
: 2.let 存在暂时性死区的现象,var不存在;
: 3.let定义的变量不允许重复声明,而var允许或者说不报错;

let和var的区别好像并不能解释上面的这种情况? 那原因到底是什么呢?

我们都知道,ES6 新增了块级作用域; 会不会是因为在 执行定时器代码中,i取值的问题呢;

for (var i = 0; i < 6; i++) {
    var i_varParams = '张三';
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

在上面代码中我们在循环体中定义了一个变量 i_varParams ;

我们都知道上面代码在执行定时器的时候 for 循环已经执行完了;最终i = 6; 所以才会输出6个6;当我们打印变量i_varParams 和 i 的时候能够打印出变量的值,也就是说,在for循环体内并没有产生ES6里面讲解的块级作用域,在for循环体内定义的变量,依旧属于全局变量;属于window的属性;

for (let i = 0; i < 6; i++) {
    let i_letParams = '李四';
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

当我们使用let定义 并且在循环体内定义变量 i_letParams

我们可以看到当我们再次打印 i 和 i_letParams变量的时候; 提示未定义;我们知道是因为在循环体内产生了块级作用域;循环体内的变量;循环体外访问不到;

重点是 定时器为什么准确的输出当时的i变量的值呢?

引入块级作用域的说法,也许就能解释的通了;

因为在每次执行for循环的时候;都会产生一个块级作用域;也就是相当于是这样的:

//for循环中 声明语句是父域  循环体 是子域
{
	 let i = 0;
	 if ( i >= 6 ); break;
	{
		//第一次循环
		{   //定时器也是一个块级作用域 并且代码在1s后执行
			console.log(i);
		}
	}
	{
		//第二次循环
		i++;
	    if(i >= 6) break;
		{   //定时器也是一个块级作用域 并且代码在1s后执行
			console.log(i);
		}
	}
	{
		//第三次循环 
		i++;
	    if(i >= 6) break;
		{   //定时器也是一个块级作用域 并且代码在1s后执行
			console.log(i);
		}
	}
	......
}

而使用var声明的变量;没有产生块级作用域;所以大概是这样的:

var i = 0;
if ( i >= 6 ); break;
//1s之后执行
console.log(i);
//第二次循环
i++;
if(i >= 6) break;
//1s之后执行 (循环时间忽略不计......)
console.log(i);
//第三次循环
i++;
if(i >= 6) break;
//1s之后执行 (循环时间忽略不计......)
console.log(i);
..... 
//也就相当于这样的
var i = 0;
if ( i >= 6 ); break;
i++;
if(i >= 6) break;
i++;
if(i >= 6) break;
.....
//最后i = 5;
//1s之后执行
console.log(i);
console.log(i);
console.log(i);
......

所以使用var 声明的变量 i 最终的值 i = 6;