var、let、const的区别【JavaScript基础面试题】

我不是女神ヾ 2024-03-22 14:20 14阅读 0赞

在 ES6 中，var、let、const 都可用于变量声明，它们之间有什么区别？在本博客中，详细讲解了 var、let 和 const 的范围、使用和提升。

## Var ##

在 ES6 之前，我们 一般使用 var 声明遍历。但是，使用 var 声明的变量存在一些问题，所以才导致了 let、const 的出现。

### var 的作用域 ###

`作用域`表示着这些变量可以在**哪里使用**。`var` 声明的作用域是全局的、或者是函数内部的。

*  如果我们在函数外部声明 `var` 变量，那么它的作用域是**全局的**。
 *  如果在函数中声明 `var` ，那么它的作用域是在**函数内部**。换句话说，只能在函数内使用该变量，当函数执行完毕，该变量将会被回收。

可以通过以下例子体会一下

var a = "codereasy";
      
        function newFunction() {
        
            var b = "hi";
        }

在上面的例子中，`a` 是全局作用域 ；而 `b` 是**函数作用域**，所以我们只能在**函数内部**访问变量 `b`。如果我们强行在函数外部访问`b`，会发生什么？

var a = "codereasy";
      
        function newFunction() {
        
            var b = "hi";
        }
        console.log(b)// error: b is not defined

会报错，提示 b 没有被定义。因此，不能在函数外部访问`b`。

### var 可以重复声明 ###

var x = 1;
    var x = 2; // 重新声明变量 x，覆盖之前的值
    console.log(x); // 输出 2

### var 变量提升 ###

`var` 声明的变量存在**变量提升**，即变量可以在**声明前**使用。但其值为 `undefined`。在全局作用域，或者在函数中，变量可以在声明前使用，而不会抛出 `ReferenceError` 异常。例如下面的代码：

function example() {
        
      console.log(foo); // undefined
      var foo = "Hello, world!";
    }

### var 存在的问题 ###

var a = "codereasy";
        var times = 4;
    
        if (times > 3) {
        
            var a = "haha"; 
        }
        
        console.log(a) // "haha"

由于 `times > 3` 返回 true，`a` 被重新定义为 `"haha"`。如果，你**忘记**其他同事曾经定义过一个变量 `a` ，现在**无意间**修改了 `a` 的值，那么在今后使用 `a` 的值时，已经是修改后的值了。

## Let ##

`let` 现在已经基本代替了 `var`，它对 `var` 进行了改进。

### let块级作用域 ###

首先理解什么是块级作用域？块是由`{ }`包裹起来的代码。换句话说，被一对花括号包起来的代码，都属于一个块。

所以，用 `let` 声明的变量只能在**它所在的块**中使用，比如以下例子：

let times = 4;
    
       if (times > 3) {
        
            let a = "codereasy";
            console.log(a);// "codereasy"
        }
       console.log(a) // a is not defined

通过以上例子我们发现，在它的块（花括号）之外使用 `a` 会返回一个错误。这是因为 `let` 变量是块作用域。

### let不能被重新声明 ###

首先，使用 `let` 声明的变量可以在其作用域内更新。但是与 `var` 不同的是，`let` 变量不能在其作用域内**重新声明**。比如下面的例子：

let a = "codereasy";
        a = "hahahaa"; //这没问题，因为let可以被更新

如果重新声明，就会报错：

let a = "codereasy";
        let a = "hahahaa";  error: Identifier 'a' has already been declared

不过，如果在**不同的作用域**，重复声明 `let` 不会报错。

let a = "codereasy";
        if (true) {
        
            let a = "say Hello instead";
            console.log(a); // "say Hello instead"
        }
        console.log(a); // "codereasy"

为什么现在没有报错？这是因为两个 `a` 本质上是**不同的变量**，因为它们在**不同的作用域**。`codereasy` 在全局作用域，而 `say Hello instead` 在花括号内部的作用域。

所以，就不出现之前 `var` 导致的错误了。使用 `let` 时，如果你以前使用过该变量名，只要它们不在同一个作用域，就**互不影响**。另外，你不用担心不小心修改了别人定义的变量，因为**重复声明会报错**。

### let变量提升 ###

`let` 声明会被提升到本作用域的顶部。但和 `var` 不同，let 关键字**未初始化**。所以，如果在声明之前使用 `let` 变量，会报错 `Reference Error`。

## Const ##

`const` 的声明类似于 `let` 的声明。

### const声明是块级作用域 ###

`const` 声明的变量只能在它所在的**块内**访问。

### const不能被更新也不能重新声明 ###

如果更新，会报错：

const a = "codereasy";
        a = "codereasy";// error: Assignment to constant variable.

如果重新赋值，也会报错：

const a = "codereasy";
        const a = "codereasy";// error: Identifier 'a' has already been declared

虽然不能更新、重新声明 `const` 变量，但是我们可以修改 `const` 对象的属性：

const student = {
        
            name: "codereasy",
            age: 18
        }
        
        student = {
        
            words: "Hello",
            number: "five"
        } // error:  Assignment to constant variable.

上面代码会报错，因为我们**直接修改**了 `const` 变量。但是下面代码不会报错：

student.age = 99;

我们并没有直接修改 `const` 变量，只是修改了这个对象的属性，因此没有报错。

### const变量提升 ###

和 `let` 一样，`const` 声明被提升到顶部，但没有被初始化。因此，在声明之前使用 `const` 变量，会报错`Reference Error`

## 总结 ##

`var` 声明的变量，其作用域是**全局作用域**或**函数作用域**，而 `let` 和 `const` 是**块作用域**。  
`var` 可以在被更新和重新声明；`let` 变量可以更新但**不能重新声明**；`const` 变量既不能更新也不能重新声明。  
在变量提升方面，它们都被提升到了作用域的顶部。但是，var 变量会被初始化为 `undefined` ， `let` 和 `const` 不会被初始化。  
`var` 和 `let` 在声明的时候，不一定需要初始化（换而言之，你可以不赋值仅声明 `let a`），而 `const` 必须在声明时初始化。