js循环打印出0~9

js循环打印出0~9，我们第一时间想到的就是for循环。

方法一：最简单的方法就是for循环直接打印：

for (var i = 0; i < 10; i++) {
  console.log(i);
}

结果：

 

 

下面早看这样一段代码：

for (var i = 0; i < 10; i++) {
      setTimeout(() => {
        console.log(i);
      }, 100 * i);
   }

大家想下，打印的结果是什么？

结果：

 为什么不是我们想象的打印10个数呢？？？

原因：我们都知道，js有两种类型的回调函数：

同步回调：立即执行，完全执行了才结束，不会放到js的回调队列里。

例子：数组遍历相关的回调函数 / promise的excutor函数

异步回调：不会立即执行，会放到回调队列中将来执行。

例子：定时器回调 / ajax回调 / promise的成功或失败的回调

上述方法，setTimeout在若干秒后执行一个函数，他是要在for循环之后的，而for循环执行后i的值为10，所以当setTimeout中的回调函数执行时，i的值为10，所以打印10次10。

方法二：那我们如何在不修改for循环的前提下，实现我们期待的结果呢？立即执行函数

for (var i = 0; i < 10; i++) {
     (function(i) {
      setTimeout(() => {
        console.log(i);
      }, 100 * i);
     })(i)
   }

结果：

 方法三：let声明：

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

结果：