JS 应用篇(三)：var、let、const的区别

忘是亡心i 2022-03-15 00:10 137阅读 0赞

在JS中，定义变量的方法有var、let、const 三种方式。下面我们一一介绍他们之间的区别。

#### 一、var定义 ####

1、“var”处理所有变量声明，不管在哪里声明，最后都会在函数作用域顶端（如果在函数内部声明）或则在全局作用域顶端（在函数外部声明），即变量提升。

console.log(varDemo1); //underfined 并不会报错
    if(true){
        var varDemo1 = "this is var";
        console.log(varDemo1);//this is var
    } 
    复制代码

2、在JS函数中的var声明，其作用域是函数体的全部。

if(true){
        var varDemo1 = "this is var";
        console.log(varDemo1);//this is var
    }    
    console.log(varDemo1);//this is var
    复制代码

如上代码所示：即使已经跳出了if判断，但是在外面我们还是能够访问到变量varDemo1。（感觉这很不合理！）

3、循环内变量过度共享

for (var i = 0; i < 3; i++) {
          setTimeout(function () {
            console.log(i)
          }, 1000);
     }
    // 输出为：3 3 3
    复制代码

循环本身及三次 timeout 回调均共享唯一的变量 \*\* i 。当循环结束执行时，i 的值为3。所以当第一个 timeout 执行时，调用的 i 当让也为 3 了。

#### 二、let定义 ####

对于var定义的变量所表现出来的3个特点，感觉完全就是bug啊！幸好有let定义变量的方式，它完全解决了var定义变量的所有问题！

1、let声明的变量，不会“表现”出变量提升。(具体请了解let的暂时性死区问题)。

console.log(letDemo1); //报错:letDemo1 is not defined
    if(true){
        let letDemo1 = "this is let";
        console.log(letDemo1);//this is let
    }  
    复制代码

2、let声明的变量拥有块级作用域。

if(true){
        let letDemo1 = "this is let";
        console.log(letDemo1);//this is let
    }    
    console.log(letDemo1);//报错:letDemo1 is not defined
    复制代码

3、形如for (let x...)的循环在每次迭代时都为x创建新的绑定。

for (let i = 0; i < 3; i++) {
          setTimeout(function () {
            console.log(i)
          }, 1000);
     }
    //输出为:0 1 2
    复制代码

4、let声明的全局变量不是全局对象的属性。你不可以通过window.变量名的方式访问这些变量。它们只存在于一个不可见的块的作用域中。

var a = 123;
    console.log(window.a);//123
    
    let b = 456;
    console.log(window.b);//underfined
    复制代码

5、用let重定义变量会抛出一个语法错误

let c = "123";
    let c = "456"; 
    //报错
    复制代码

#### 三、const定义 ####

const 就是用来定义常量的。  
1、声明的时候要直接赋值，只声明不赋值报错。

const PI; //报错
    复制代码

2、重复声明变量报错。

const PI = 3.14;
    const PI = 5; //报错  
    复制代码

3、给变量重新赋值报错。