聊一聊 ES6 中的 let 和 const 的区别

在 ES6 中，let 和 const 是两个新的声明变量的关键字，用来代替旧有的 var。它们的出现，让变量声明和作用域规则更加明确且易于理解。本文将详细讨论 let 和 const 的区别，以帮助前端开发者更好地理解与应用它们。

let 和 const 的概述

在 ES6 之前，JavaScript 只有一个关键字 var 来声明变量，而 var 有以下几个问题：

1. 变量的作用域不够清晰，有时容易造成变量提升的问题。
2. 变量可以被重复声明，这会导致变量的值被覆盖。
3. var 不支持块级作用域，导致局部变量会变成全局变量。

为了解决这些问题，ES6 引入了 let 和 const。它们都支持块级作用域和不允许重复声明。但是，它们之间还有很大的区别。

• let 声明的变量可以被重新赋值，也可以不赋值（此时变量为 undefined）
• const 声明的变量必须被赋一个初始值，且不可被重新赋值。

下面我们将详细讨论 let 和 const 的特性和应用场景。

let 声明变量的特性

1. 声明的变量有块级作用域

使用 let 声明的变量只在块级作用域内有效，块级作用域指的是花括号 {} 包含的代码块。例如：

if(true){
    let x = 10;
}
console.log(x);   // 报错: x is not defined

这里，在 if 语句块里声明的变量 x，在外部是不存在的。因此，在调用 console.log(x) 时，会出错。

2. 变量不可重复声明

let 声明的变量只能在同一作用域内声明一次。例如：

let x = 1;
let x = 2;   // 报错: Identifier 'x' has already been declared

这里，第二个 let 声明时，会报错，因为 x 变量已经被声明过了。

3. 变量可以不赋值

使用 let 声明的变量可以不赋值，此时变量值为 undefined。例如：

let x;
console.log(x);  // 输出 undefined

由于 let 具有不变性，因此我们可以利用它来创建一个只读变量。

let pi = 3.1415;
pi = 3;   // 报错 Assignment to constant variable.

这里，我们使用 const 声明了一个常量 pi，之后在试图将其重新赋值时，会报错。这样就避免了变量值被无意间修改的可能性。

const 声明变量的特性

1. 必须初始化值

const 声明的变量必须在声明时进行初始化，一旦初始化了，就不能再改变。例如：

const PI = 3.1415;
PI = 3;   // 报错 Assignment to constant variable.

这里，我们试图将常量 PI 重新赋值时，会报错。因为声明时已经取了一个初始值，之后就不能再更改了。

2. 有块级作用域

使用 const 声明的变量同样只在块级作用域内有效。例如：

if(true){
    const PI = 3.1415;
}
console.log(PI);   // 报错: PI is not defined

这里，在 if 语句块中声明的常量 PI，同样会在外部出现未定义的错误。

3. 变量不可重新赋值

和 let 不同的是，const 声明的变量不可被重新赋值。例如：

const PI = 3.1415;
PI = 3;   // 报错 Assignment to constant variable.

这里，我们试图将常量 PI 进行重新赋值时，同样会出现赋值不可行的错误。

let 和 const 应用场景

经过上面的介绍，我们对 let 和 const 的特性应该有了一定了解。接下来，我们讨论一下在实际开发中 let 和 const 的应用场景。

• 当变量需要被重新赋值时，使用 let
• 当变量不需要被重新赋值时（例如常量），使用 const
• 如果不确定是否需要重新赋值，优先使用 let
• 在 for 循环中，使用 let 声明迭代变量 i，避免变量污染（如果使用 var，会污染到全局作用域）

// for 循环中避免使用 var
for (let i = 0; i < 5; i++) {
    setTimeout(() => {
         console.log(i); // 0,1,2,3,4
    }, 1000);
}

// const 用于声明常量
const PI = 3.14159;

结论

作为 ES6 中的两个新关键字，我们可以看到，let 和 const 具有其各自的应用场景。在实际开发中，我们需要根据需求灵活使用，并注意变量作用域和变量污染等问题，提高代码的质量和可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672186c02e7021665e07d338