javascript中的变量提升以及for循环中let和var的区别

矫情吗；* 2022-12-29 06:50 181阅读 0赞

#### 变量提升 ####

js中函数及变量的声明都将被提升到函数的最顶部。变量可以在使用后再声明，也可以总是先声明再使用。  
需要注意，只有声明的变量会提升，初始化的不会。

x=6;
    console.log(x);
    var x; //声明变量x
    //控制台输出6

console.log(x);
    var x = 6; //初始化x
    //控制台输出 undefined

#### for循环中let和var的区别 ####

（先看一个例子，这个问题在使用uni-app写app的时候出现的）

for (var i = 0; i <10; i++) {   
        setTimeout(function() {   // 同步注册回调函数到 异步的 宏任务队列。
             console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
          }, 0);
    }

输出结果：  
![在这里插入图片描述][20201221150753785.png]

// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
    for (let i = 0; i < 10; i++) {  
      setTimeout(function() { 
        console.log(i);    // i 是循环体内局部作用域，不受外界影响。
      }, 0);
    }

输出结果：  
![在这里插入图片描述][2020122115065997.png]  
setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。 for循环结束后，i的值为10。 所以当函数被调用的时候，它会打印出 10

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

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

#### var和let的区别 ####

1.使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象，使用var声明的变量会挂载到window上。  
2.使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升，不会挂载到window上。  
3.let不允许在相同作用域内，重复声明同一个变量。  
4.let会有暂时性死区：如果存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，那么在let声明变量前，使用tmp都会报错。

var tmp = 123;
    
    if (true) { 
       tmp = 'abc'; // ReferenceError
       let tmp;
    }

[20201221150753785.png]: /images/20221120/f5c52e3f762e4e99a0b0be2f2adc596e.png
[2020122115065997.png]: /images/20221120/b446598f278c4d99b9d6f343eff9bc34.png