for循环介绍
for循环是JS一个常用的内容,其语法为:
for(初始化语句,判断表达式,执行循环体后执行的语句){
循环体
}
它的语法很简单,一目了然,我就不做过多的介绍。
for循环初始化语句作用域
接下来我要说的是重点:
for循环的初始化语句,如果声明了变量(var不算,因为var会自动提升),那么它的作用域只在for循环中具体请看例子:
图一
再最后一行可以明显看出,i是没有被声明的,所以由此可见,i的作用域就在for循环中。
当然如果吧let改为var,那么i可以被defined的,因为var会把i自动提升为全局变量。
解释现象
因此,可以解释一个经常被误解的现象。
先看代码:
for (let i = 0; i < 6; i++) {
setTimeout(()=>{
console.log(i)
}, 0)
}
结果会打印出0,1,2,3,4,5。很多人会认为,不是setTimeout了吗,最后i不是变成6了吗,应该打出6个6才对。确实,setTimeout设定了,过会在打出i来,但是当for循环与let一起用的时候,JS会在每次循环的时候生成一个新的i,所以其实一共会有7个i,值分别为0,1,2,3,4,5,6,所以每次console.log(i)打出来的i都是不一样的。
不用let,如何在setTimeout的情况下打出0,1,2,3,4,5
其实上述现象,说到底就是作用域的问题,只要给每次的i一个不同的作用域,就可以实现了。而立即执行函数,可以解决这一点,代码:
for (var i = 0; i < 6; i++) {
!function (x) {
setTimeout(() => {
console.log(x)
})
}(i)
}
在每次循环的时候,都建立一个立即执行函数,并把i作为参数,传入新的函数中,并立即执行它。