ES6+ 面试题目录

let、const 和 var 的区别是什么？

推荐答案

在 JavaScript 中，let、const 和 var 是用于声明变量的关键字，它们的主要区别如下：

作用域：
- var 声明的变量是函数作用域（function-scoped），即在函数内部声明的变量在整个函数范围内都有效。
- let 和 const 声明的变量是块级作用域（block-scoped），即只在声明它们的块（如 {}）内有效。
变量提升：
- var 声明的变量会被提升到其作用域的顶部，这意味着变量可以在声明之前被访问，但其值为 undefined。
- let 和 const 声明的变量也会被提升，但在声明之前访问会抛出 ReferenceError，这种现象称为“暂时性死区”（Temporal Dead Zone, TDZ）。
重复声明：
- var 允许在同一作用域内重复声明变量，后面的声明会覆盖前面的声明。
- let 和 const 不允许在同一作用域内重复声明变量，否则会抛出 SyntaxError。
值的可变性：
- var 和 let 声明的变量可以重新赋值。
- const 声明的变量不能重新赋值，但如果声明的是对象或数组，其属性或元素可以被修改。

本题详细解读

1. 作用域

var：
- var 声明的变量是函数作用域的。这意味着在函数内部声明的变量在整个函数范围内都有效，甚至在声明之前也可以访问（尽管值为 undefined）。
- 例如：
```
function example() {
    console.log(x); // undefined
    var x = 10;
    console.log(x); // 10
}
```

let 和 const：

let 和 const 声明的变量是块级作用域的。这意味着它们只在声明它们的块（如 {}）内有效。

例如：

if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
}
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

2. 变量提升

var：
- var 声明的变量会被提升到其作用域的顶部，但赋值不会提升。因此，在声明之前访问变量会得到 undefined。
- 例如：
```
console.log(a); // undefined
var a = 5;
```
let 和 const：
- let 和 const 声明的变量也会被提升，但在声明之前访问会抛出 ReferenceError，这种现象称为“暂时性死区”（Temporal Dead Zone, TDZ）。
- 例如：
```
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
```

3. 重复声明

var：
- var 允许在同一作用域内重复声明变量，后面的声明会覆盖前面的声明。
- 例如：
```
var c = 1;
var c = 2;
console.log(c); // 2
```
let 和 const：
- let 和 const 不允许在同一作用域内重复声明变量，否则会抛出 SyntaxError。
- 例如：
```
let d = 3;
let d = 4; // SyntaxError: Identifier 'd' has already been declared
```

4. 值的可变性

var 和 let：

var 和 let 声明的变量可以重新赋值。

例如：

var e = 5;
e = 6;
console.log(e); // 6

let f = 7;
f = 8;
console.log(f); // 8

const：

const 声明的变量不能重新赋值，但如果声明的是对象或数组，其属性或元素可以被修改。

例如：

const g = 9;
g = 10; // TypeError: Assignment to constant variable.

const h = { name: 'Alice' };
h.name = 'Bob';
console.log(h.name); // Bob

通过以上分析，可以清晰地理解 let、const 和 var 的区别，从而在实际开发中根据需求选择合适的变量声明方式。

上一篇： let 和 const 的区别是什么？

下一篇：什么是暂时性死区 (TDZ)？

纠错
反馈