for循环中使用let跟var的区别

for循环中使用let跟var的区别

一般情况下var和let并没有太大区别,如果就是一个普通的循环且无太多需求的话
例如:

for(var i = 0; i < 3; i++){
    console.log(i)   // 0 1 2
}

for(let i = 0; i < 3; i++){
    console.log(i)   // 0 1 2
}

若果内部有异步执行函数的话,那么选择let就比选择var要好
例如:

 for (var i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i) // 3s 后输出 3 次 3 (不理解的把for后面的括号当做一个作用域看) 
      }, 3000)
      console.log(i) // 先输出 0 1 2
    }
    
 for (let i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)// 3s 后输出 0 1 2
      }, 3000)
      console.log(i) // 先输出 0 1 2
    }

这是因为setTimeout是异步执行,每一次for循环的时候,setTimeout都执行一次,但是里面的函数没有被执行,而是被放到了任务队列里,等待执行。只有主线上的任务执行完,才会执行任务队列里的任务。也就是说它会等到for循环全部运行完毕后,才会执行fun函数,但是当for循环结束后此时i的值已经变成了3,因此虽然定时器跑了5秒,控制台上的内容依然是3。

同时因为for循环头部的let不仅将i绑定到for循环中,事实上它将其重新绑定到循环体的每一次迭代中,确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域,通过var定义的变量是无法传入到这个函数执行域中的,通过使用let来声明块变量能作用于这个块,所以function就能使用i这个变量了;这个匿名函数的参数作用域和for参数的作用域不一样,是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性,是可以被内层方法使用的。

最后呢 使用var声明的变量会存在变量提升的问题,而使用let就不存在变量提升的问题。如果非要使用var当做循环循环头的话,出现循环后打印出的结果一模一样的问题,可以使用闭包来解决

for (var i = 0; i < 3; i++) {
        function name1() {
            var j = i  //此处声明变量用什么都行并不影响结果,推荐使用let和const
            function jj() {
                console.log(j, "var");
            }
            return jj   //必须return出去,不然此函数无法被外部调用
        }
        var func = name1()
        func()
    }
// 0 1 2 
    
// 这是立即执行函数的写法 
for (var i=1; i<3; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })(i);
}
// 0 1 2 

通过闭包,将i的变量驻留在内存中,当输出j时,引用的是外部函数的变量值i,i的值是根据循环来的,执行setTimeout时已经确定了里面的的输出了。

你可能感兴趣的:(JavaScript,js)