JS函数的执行时机

91 阅读1分钟

JS函数根据调用时机不同,最后得到的值是不一样的,有些时候,由于它的特性,可能会使结果与我们想象的不同。

下面是一个经典的for循环案例。

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
} //打印出6,6,6,6,6,6

我们希望通过这个循环能够打印出0,1,2,3,4,5,结果却打印出了6个6,这显然与我们的预期大相径庭。

这是因为在i=6的时候,不满足循环条件会退出这个循环,然后才会执行setTimeout(),但此时所有的变量i都只是同一个6。

可是let 声明有新的特性,使用它声明迭代变量,JS会在每个循环中声明一个新的迭代变量,这样每个setTimeout()都会引用新的变量。

for(let i = 0;i<6;i++){
	setTimeout(()=>{
        console.log(i)
    },0)
} //打印出 0,1,2,3,4,5

想要打印出0-5的数字不止可以用for和let的配合实现,也可以用while循环来实现。

let i = 0
while (i<6){
    console.log(i)
    i++
} //打印出0,1,2,3,4,5