一篇文章理解for循环原理

直接使用经典的面试题来进行理解

 for (var i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log(i);
            }, 0)
        }
  答案：5 5 5 5 5 

接下来就是进行对该题进行理解：

如果在for循环之前打印 i 则返回 undefined 因为var 声明的变量在全局变量中被默认赋值为underfined

 console.log(i) //underfined
 for (var i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log(i);
            }, 0)
        }

在出程序执行中，for循环五次后 i 的 值为5，所以setTimeout异步回调打印出来的结果是全局对象中的i,此时i的值就是5，打印了5个5

如果把var 换成 let 后的结果是：0 1 2 3 4

for (let i = 0; i < 5; i++) {
            setTimeout(function bar() {
                console.log(i);
            }, 0)
        }
      答案：0 1 2 3 4

实现的原理：

先创建一个文本环境，用来初始化for循环中()中的内容，let 声明一个 i 变量并赋值（每次循环都会重新声明i变量），再去检测 i 的值是否小于 5 ，如果小于5则可以进入循环体中进行代码执行，会创建一个新的文本环境（每个新的文本环境都是独立的），查找i变量的时候会先在自己的文本环境中寻找，如果没有查询到，则会沿着作用域链向上一级文本环境进行寻找。

加深一下理解：

如果循环体中加一条代码，let i = 100

for (let i = 0; i < 5; i++) {
        let i = 100 //在该循环体中 重新声明的i 不会影响for循环中()的i值，相互独立
            setTimeout(function bar() {
                console.log(i);
            }, 0)
        }
        答案：100 100 100 100 100 

如果循环体中加一条代码，i = 100

for (let i = 0; i < 5; i++) {
         i = 100 //此处i的赋值会影响全局对象中的i值
            setTimeout(function bar() {
                console.log(i);
            }, 0)
        }
        答案：100

虽然第二次循环 i的值变为 101 但是不满足 i < 5，所以不会执行循环体中的代码，也就不会进行打印101，只会打印第一次循环的内容100