为什么for循环中用var和let的结果会不一样?

1,122 阅读1分钟

一.首先,先看两个例子,例子如下:

例子一:

例子一代码

for(var i=0;i<10;i++){
    setTimeout(()=>{
        console.log(i + "随机数" + Math.random())
    },0)
}

例子一结果如下:

注意结果是10个10!!! 而不是10个9!!!

image.png

例子二:

例子二代码

for(let i=0;i<10;i++){
    setTimeout(()=>{
        console.log(i + "随机数" + Math.random())
    },0)
}

例子二结果如下所示:

image.png

结论:

嗯?为什么结果不一样???发生了什么? 最开始学js的时候我也不明白,后面终于搞清楚了

首先,var和let的区别,这是众所周知的,var可以变量提升,而let不可以,其次setTimeout是个定时器,会在若干时刻后面,执行一个操作。基于以上的知识就好解释了。

其次,再看一下下面的代码:

image.png

image.png

image.png

说明var 可以改变一个已经赋值的变量,而let的话,只能声明一次

var具有变量提升的作用,并且作用于全局,i=0那个时刻的i到i=9的时刻的时候,i是被改变的,会把那个等于0的i变成等于9的,因为setTimeout是异步的,要过一会才能执行完

而let不能变量提升,即使setTimeout过一会执行结果,i=0那个时刻的i还是0,不会变成9,因为let不能改变另一个时刻的i的值!!!

二. 怎么让for循环顺序打出:0,1,2,3,4,5,6,7,8,9呢???

思路:找个变量把i存起来

let i;
for(i=0;i<10;i++){
    let j = i
    setTimeout(()=>{
        console.log(j)
    },1000)
}

image.png

上面这种方式等效于

for(let i=0;i<10;i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}