本文共 2265 字，大约阅读时间需要 7 分钟。

var、let、const 的区别与特点

在 JavaScript 中，变量声明关键字 var、let 和 const 是非常重要的概念。它们在变量的声明、重新赋值、作用域等方面存在显著差异。本文将详细分析这三种关键字的特点及其区别。

一、var 的特点

var 是 JavaScript 中最古老的变量声明关键字。与 let 和 const 不同，var 的声明具有变量提升的概念。即使变量在声明之前已经被使用，只要在当前作用域内进行声明，变量会被提升到该作用域的顶层。

代码示例：

console.log(a); // undefinedvar a = 100;

在上述代码中，a 在第一次被访问时返回 undefined，这是因为 var 的提升特性会将变量提升到当前作用域的顶层。

var 的作用域

var 关键字声明的变量具有函数级的作用域。换句话说，var 声明的变量可以在其所在的函数以及该函数的所有子函数中被访问和修改。

代码示例：

function outer() {    var a = 100;    function inner() {        a = 10;        console.log(a); // 10    }    inner();}outer();

在上述代码中，inner() 函数中可以修改 outer() 函数中的 a，这充分体现了 var 的函数级作用域特性。

二、let 的特点

let 是 ES6 引入的一个变量声明关键字。与 var 不同，let 的变量具有块级作用域。换句话说，let 声明的变量只能在其所在的代码块（例如 if 语句、for 循环、function 或 block）中被访问和修改。

代码示例：

if (1) {    let b = 10;    console.log(b); // 10}console.log(b); // TypeError: b is not defined

在上述代码中，b 只能在 if 代码块内被访问。外部访问时会抛出 TypeError。

let 的变量提升

与 var 不同，let 不具有变量提升的特性。如果变量在声明之前被访问，会抛出 ReferenceError。

代码示例：

console.log(b); // TypeError: b is not definedlet b = 10;

在上述代码中，直接访问 b 会抛出错误，因为 let 的变量提升特性仅适用于声明时。

三、const 的特点

const 是 ES6 中引入的一种变量声明方式。与 var 和 let 不同，const 声明的变量具有常量的特性。const 声明的变量在声明后不能被重新赋值，除非使用 let 或 var 进行重新声明。

代码示例：

const a = 100;console.log(a); // 100

在上述代码中，a 被声明为常量，不能被重新赋值。例如：

a = 200; // TypeError: a is read-only

const 的块级作用域

const 声明的变量与 let 类似，具有块级作用域。const 变量只能在其所在的代码块内被访问和修改。

代码示例：

if (1) {    const c = 1;}console.log(c); // TypeError: c is not defined

在上述代码中，c 只能在 if 代码块内被访问。外部访问时会抛出 TypeError。

四、var 与 let、const 的区别

1. 变量提升

• var 声明的变量具有变量提升的特性。
• let 和 const 不具有变量提升的特性。

2. 重新赋值

• var 和 let 声明的变量可以被重新赋值。
• const 声明的变量不能被重新赋值。

3. 作用域

• var 声明的变量具有函数级作用域。
• let 和 const 声明的变量具有块级作用域。

4. 暂存死区

• let 和 const 声明的变量在声明之前存在暂存死区。
• var 声明的变量在声明之前也存在暂存死区，但与 let 和 const 不同，var 的暂存死区在块级别存在。

5. 同一个作用域内的变量声明

• var 允许在同一个作用域内多次声明同一个变量。
• let 和 const 不允许在同一个作用域内多次声明同一个变量。

五、const 的特殊情况

在 const 声明中，如果变量的值是对象（引用类型），可以修改其属性。例如：

const obj = { a: 100 };obj.a = 10000;console.log(obj.a); // 10000

但是，const 声明的变量不能被重新赋值为其他对象。例如：

const obj = { a: 100 };obj = { a: 200 };// TypeError: reassigning const target

这与 let 声明的变量类似，let 声明的变量也不能被重新赋值为其他对象。

六、总结

• var：支持变量提升，具有函数级作用域，允许在同一个作用域内多次声明同一个变量。
• let：支持块级作用域，具有变量提升的替代品，不允许在同一个作用域内多次声明同一个变量。
• const：不支持变量提升，具有块级作用域，不能被重新赋值，不允许在同一个作用域内多次声明同一个变量。

理解这些概念对于编写高质量的 JavaScript 代码至关重要。

转载地址：http://ygni.baihongyu.com/