for循环

其实在前文我们有对for循环介绍过,在此将前文的内容拷贝到该篇文章中供读者方便阅读 语法:for(语句1;表达式2;语句3){循环体}
代码如下:

for(var i =0;i<5;i++){ 
  console.log('i小于5啊')
}

以上代码会打印出5句i小于5啊,因为当初次进入判断的时候i为0,所以会进入循环,但是当i为4时是最后一次进入判断时已经循环了4次,将做最后一次循环后,i将为5,不满足判断条件,则退出了循环
for的执行步骤:

1. 先执行语句1
2. 然后判断表达式2
3. 如果为真,执行循环体,然后执行语句3
4. 如果为假,直接退出,执行后面的语句

for循环+定时器有奇效

当循环和定时器合在一起的时候,最后的输出会变成什么呢,请看下面代码.

for(var i =0;i<5;i++){ 
  console.log('i小于5啊')
  setTimeout(() => {
    console.log(i)
  })
}

根据第一小节讲到的for循环原理,大家很容易知道,'i小于5啊'该语句会打印出5次,同样i的值也会打印5次,但是大家认为i的值为多少呢?由于当定时器执行的时候for循环的语句已经执行完毕了,所以最后i的值将为5.所以最后必然会打印出5个5,因为在var中并没有块级作用域的概念,所以每个循环的阶段的值并不会保存,最后存下来的值为最后一次i++后的值为5.那么如何解决这个问题呢,请看下一节

改正var的缺陷方法

可以使用let方法,let为es6的新语法,有自己的块级作用域概念,代码如下.

for(let i =0;i<5;i++){ 
  console.log('i小于5啊')
  setTimeout(() => {
    console.log(i)
  })
}

该代码最后输出i的值将为0,1,2,3,4
该方法完美的解决的var定义i后全部输出值为5的方案
还可以使用以下的代码,将每一次循环后的值保存到一个新的变量当中,然后在定时器中输出这个新定义的变量.

for(let i =0;i<5;i++){ 
  console.log('i小于5啊');
  let j = i;
  setTimeout(() => {
    console.log(i)
  })
}

总结

该篇文章为大家介绍了for循环和定时器共同使用时需要注意到的问题,同时为大家给出了解决的方案供大家参考,可能还会有其他的方式,等待大家去发掘.
记得持续学习,不断跟进!加油!