JavaScript --- 在for循环中使用var和let声明变量的区别

1. for() 循环中的 var

我们先创建一个数组，用 for() 循环为数组的每一项赋值，for 循环的条件表达式使用 var 声明：

let arr = [];

for (var i = 0; i < 5; i++) {
	arr[i] = function() {
		console.log(i);
	}
	
	arr[i](); // 每一次循环都立即调用
}

得到下面的结果

在此基础上，我们改为在每次循环后，都调用数组的第一项：

let arr = [];

for (var i = 0; i < 5; i++) {
	arr[i] = function() {
		console.log(i);
	}
	arr[0]();
}

结果如下

随着 for() 循环的进行，变量 i 在不断自增，数组每一项打印语句中的 i 也随之改变。
循环结束之后，我们分别调用这个数组中的每一项

let arr = [];

for (var i = 0; i < 5; i++) {
	arr[i] = function () {
		console.log(i);
	};
}

arr.forEach((total) => {
	total();
});

结果如下

循环结束后，变量 i 的值为 5，arr 每项打印语句中的 i 都为 5

这是因为
用 var 声明时，变量 i 是唯一的，每一次 i 的改变都改变了自身的栈地址。
所以循环结束后访问 i 时，都通过 i 最后一次存放的栈地址，获取到其指向的基本量。
我们在循环结束后，在外部依然可以访问变量 i ：

let arr = [];

for (var i = 0; i < 5; i++) {
	arr[i] = function () {
		console.log(i);
	};
}
            
console.log(i); // 5

这是因为
循环结束之后，var 声明的 变量 i 没有被销毁，我们依然可以通过访问 i 得到对应的值
为了验证我们在外部访问到的 i 就是 for() 循环中的 i ，我们在外部改变 i 的值，然后通过数组访问它：

let arr = [];

for (var i = 0; i < 5; i++) {
	arr[i] = function () {
		console.log(i);
	}
}

i = 8;

arr.forEach((total) => {
	total(); // 8 8 8 8 8 
});

console.log(i); // 8

2. for() 循环中的 let

让我们用相同的方法看看 let 声明的 i 有什么不同
我们依旧让每次循环都固定打印第一项的值

let arr = [];

for (let i = 0; i < 5; i++) {
	arr[i] = function() {
		console.log(i);
	}
	arr[0](); // 0 0 0 0 0
}

随着变量 i 自增，数组第一项打印语句中的 i 却始终为 0。是因为第一项的 i 存放的栈地址不再改变，固定指向常量 0。
数组其他项中 i 也各不相同，但一个变量不可能同时存放多个地址。
这就说明，数组每一项中 i 都是不同的，它们存放着不同的栈地址。每一次循环，都会有一个新的 i 来存放新的地址，每一个新的变量 i 都是基于上一个变量 i 。
我们在循环结束后调用数组的每一项，并在外部访问变量 i

let arr = [];

for (let i = 0; i < 5; i++) {
	arr[i] = function() {
		console.log(i);
	}
}

arr.forEach((total) => {
	total(); // 0 1 2 3 4 
});

console.log(i); // error: i is not defined

for() 循环结束后，数组每一项依然能够打印出不同的值，并且不能在外部访问变量 i 的值。
或者说，不能访问到对用户而言的 i，用户能使用的 i 变量已经被销毁了。
数组每一项的调用却都依然可以正常打印。数组中这些不同的 i 应该被浏览器用特殊的方法保存起来了，并且拒绝我们直接访问。

for循环中的let 和 var

for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log(i);
        },0)
    }
// 结果 5 5 5 5 5
1
2
3
4
5
6
for(let i=0;i<5;i++){
        setTimeout(function(){
            console.log(i);
        },0)
    }
// 结果 0 1 2 3 4

网上搜到的解释：
在 for 三个语句中，第一个语句:i=0,在循环代码块开始前执行，每次循环都会执行。
由于 var 命令的变量提升机制，var 命令实际只会执行一次。
而 let 命令不存在变量提升，所以每次循环都会执行一次，声明一个新变量（但初始化的值不一样）。
for 的每次循环都是不同的块级作用域，let 声明的变量是块级作用域的，所以也不存在重复声明的问题。
let生命变量的for循环里，每个匿名函数实际上引用的都是一个新的变量