for循环中的var和let的区别

 for (var i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i) // 3s 后输出 3次3
      }, 30 * 100)
      console.log(i) // 先输出 0 1 2
    }

1、这道题涉及到了异步、作用域、闭包：

settimeout是异步执行，10ms后往任务队列里面添加一个任务，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完成后，i是3，所以此时再去执行任务队列里的任务时，i全部是3了。对于打印3次是：

 每一次for循环的时候，settimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里面，等待执行，for循环了3次，就放了3次，当主线程执行完成后，才进入任务队列里面执行。

（注意：for循环从开始到结束的过程，需要维持几微秒或几毫秒。)

2、当解决变量作用域：

for (let i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)// 3s 后输出 0 1 2
      }, 3000)
      console.log(i) // 先输出 0 1 2
    }

 

因为for循环头部的let不仅将i绑定到for循环块中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过 var 定义的变量是无法传入到这个函数执行域中的，通过使用 let 来声明块变量，这时候变量就能作用于这个块，所以 function就能使用 i 这个变量了。

附：由于 var 命令的变量提升机制，var 命令实际只会执行一次。而 let 命令不存在变量提升，所以每次循环都会执行一次，声明一个新变量（但初始化的值不一样）。for 的每次循环都是不同的块级作用域，let 声明的变量是块级作用域的，所以也不存在重复声明的问题。let声明变量的for循环里，每个匿名函数实际上引用的都是一个新的变量。

再熟悉一遍：

  for (var i = 3; i > 0; i--) {
      setTimeout(function () {
        console.log(i) // 3s 后输出 3次0
      }, 30 * 100)
      console.log(i) // 先输出   3 2 1
    }

 for (let i = 3; i > 0; i--) {
      setTimeout(function () {
        console.log(i) // 3s 后输出 3 2 1
      }, 30 * 100)
      console.log(i) // 先输出  3 2 1
    }