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循环里,每个匿名函数实际上引用的都是一个新的变量