关于javascript:从3个for循环代码来理解javascript变量声明

前情提要
在逛技术社区的过程中遇到这么一个问题：第一个 for 循环为什么只输入一次呢？看了题主贴的代码后，感觉比较简单所以就答复了一下。答复完之后就萌发了水一篇文章的想法。
注：内容比较简单，如果喜爱点个赞，不喜勿喷。欢送在评论区内交换。如果自己观点有谬误的中央，恳请大佬多多指导，感激🙏。

3 个考验 js 基本功的 for 循环

先来看第一个 for 循环：

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

思考一下，这段代码中，会打印几次？打印的内容别离是多少？

答案是只打印一次，打印的内容是 3。那么为什么会这样呢？其实是 js 的变量晋升机制导致的。至于代码的具体执行步骤，后续给出。这里先不急，再来看第二个 for 循环。

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

思考一下，这段代码中，会打印几次？打印的内容别离是多少？答案是打印 3 次，打印内容都是 3。那么，这又是为什么呢？只是换了一个关键字来申明变量。竟有如此之区别？其实const 申明的变量在代码块中有作用域，并且不存在变量晋升机制。如果在 const 申明之前去应用该变量会导致 js 报错 (阮一峰es6 中讲的暂时性死区)。

来看失常的 for 循环代码

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

这段代码能打印几次？打印的内容别离是？我置信在座的各位大佬应该都能给出。大佬 666 呀，在此膜拜。

简略讲讲 js 中 var、let、const 三个关键字的区别

先谈谈在 es6 中新增的 let 和const这两个关键字。var算是 js 历史遗留的产品。都 2202 年了，不会还有人在用 var 吧？不会吧？不会吧？

let 关键字的个性

let的应用和 var 是差不多，和 var 的区别是。

• let只会在它所申明的块中失效。请看代码：

  {
    let a = 10;
    var b = 1;
  }
  a // 代码块外拜访 a 会报错 ReferenceError: a is not defined.
  b // 代码块外拜访 b，能够拿到数据 1

• let不存在变量晋升。请看代码：

  // var 的状况
  console.log(foo); // 输入 undefined
  var foo = 2;
  
  // let 的状况
  console.log(bar); // 报错 ReferenceError
  let bar = 2;

• 在雷同作用域内不容许反复申明同一变量。请看代码

  // 报错
  {
      var a = 10;
      let a = 10;
  }
  // 报错
  {
      let a = 1;
      let a = 2;
  }

• 不能在 let 变量声前应用(TDZ 暂时性死区)。请看代码:

    {
      // TDZ 开始
      tmp = 'abc'; // 报错: ReferenceError
      console.log(tmp); // 报错：ReferenceError
  
      let tmp; // TDZ 完结
      console.log(tmp); // undefined
  
      tmp = 123;
      console.log(tmp); // 123
    }

• let申明的变量会绑定以后作用，不受内部变量影响

  var tmp = 123;
  if (true) {console.log(tmp) // 报错(触发暂时性死区)：ReferenceError
    let tmp = 'abc';
    console.log(tmp) // abc
  }

const 关键字的个性

const蕴含 let 的所有个性，但 const 申明的变量是常量，不能反复赋值。let申明的是变量，是能够给变量反复赋值的。

const aa = 111;
console.log(aa) // 111
aa = 222; // 报错 TypeError: Assignment to constant variable.
console.log(aa) // 111

var 关键字的个性

var算是历史问题，目前的开发中都根本不会应用该关键字来申明变量。所以就不贴代码了，只给总结。

• var 存在变量晋升
• 对于 var 来讲，在 function 中才有作用域。如果不在 function 中那么就是全局作用域
• var 能够反复申明同一变量
• var 能够给变量反复赋值
• var 能够在变量未声明之前去应用变量(变量晋升导致的)

来看看这三个 for 循环在 js 执行过程中别离都做了哪些操作

存在变量晋升的 for 循环

代码如下：

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

为什么存在变量晋升的 for 循环只循环了一次？并且输入的内容是3？

那么就来看看，在 JS 中，变量晋升是怎么一回事

• 因为变量 i 是通过 var 申明的。所以 i 会存在变量晋升，i将会晋升到全局作用域中。
• 在循环体内从新申明了 var i = 3。那么 var 申明的变量作用域只有 function 和全局。所以这一步操作会将全局变量 i 从新赋值为3。
• 进入第二次循环时，判断条件 i < 3 吗？不小于。所以循环完结了。

文字描述可能不太容易了解，这里给各位大佬上个动图：

虽存在变量晋升，但也蕴含了变量作用域的 for 循环

代码如下：

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

这段代码中，var申明的变量会存在变量晋升操作。const申明的常量则是在 for 循环体内存在作用域，所以并不会影响到内部 var 申明的变量。

那么这段 for 循环执行了 3 次，并别离打印了 3 次3。这是为什么？

该 for 循环的执行步骤详解

• 因为变量 var i = 0 是通过 var 申明的。所以 i 会存在变量晋升，i将会晋升到全局作用域中。
• 在循环体内申明了 const i = 3。对于{} 内的代码，const、let申明的变量时存在作用域的，所以并不会晋升到全局作用域中。
• 在循环体内执行 console.log(i)。因为是const 在循环体内申明过 i 了，所以 i 会绑定到以后作用域中，那么应用的时候，只会从以后作用中找i。

文字描述可能不太容易了解，这里给各位大佬上个动图：

结尾及勘误和阐明

以上就是这篇文章的全副了，至于第三个 for 循环就不必开展说了，切实是日常开发中的基操。如果文章的内容有帮忙到你，欢送点赞、评论。如果有大佬发现文章内的一些谬误，恳请大佬多多指导。在此多谢大佬🙇‍♀️。

• 在社区内发现的这个问答在这里：飞机票✈️(opens new window)
• 文章首发于集体博客：飞机票✈️(opens new window)
• 文章的视频解说：飞机票✈️ (opens new window)，求一键三连