前端 JavaScript 中的 var、let 和 const

在前端 JavaScript 开发中，掌握变量声明的三种——var、let 和 const 至关重要。这些关键字决定了变量的作用域、生命周期和不可变性。本文将深入探究这三种关键字的用法和区别，为开发者提供一个清晰的指南。

var 关键字

var 关键字是 JavaScript 中最基本的变量声明方式，它具有以下特性：

• 功能性范围： 变量声明在整个函数范围内有效，即使它在代码块内声明。
• 变量提升： 变量声明会被提升到函数或全局作用域的顶部。
• 重复声明： 允许在同一作用域内重复声明同一变量，但会覆盖之前的值。

示例：

function test() {
  var a = 10;
  if (true) {
    var a = 20;
    console.log(a); // 输出：20
  }
  console.log(a); // 输出：20
}

test();

let 关键字

let 关键字是 ES6 中引入的变量声明方式，它比 var 具有更严格的作用域和生命周期控制：

• 块级范围： 变量声明只在声明所在的代码块内有效，包括函数、循环和条件块。
• 变量提升： 不会发生变量提升，变量只能在声明之后使用。
• 不允许多次声明： 不允许在同一块级作用域内重复声明同一变量。

示例：

function test() {
  let a = 10;
  if (true) {
    let a = 20;
    console.log(a); // 输出：20
  }
  console.log(a); // 输出：10
}

test();

const 关键字

const 关键字也是 ES6 中引入的，用于声明不可变的常量变量。它具有以下特性：

• 不可变性： 一旦声明，变量的值就不能被改变。
• 块级范围： 和 let 相同，变量声明只在声明所在的代码块内有效。
• 变量提升： 不会发生变量提升，变量只能在声明之后使用。

示例：

const PI = 3.14;
PI = 3.15; // 会报错：TypeError: Assignment to constant variable.

总结

以下表格总结了 var、let 和 const 关键字之间的区别：

特性	var	let	const
范围	函数或全局	块级	块级
生命周期	从声明到函数或全局结束	从声明到代码块结束	从声明到代码块结束
变量提升	是	否	否
重复声明	允许	不允许	不允许
不可变性	否	否	是

在现代 JavaScript 开发中，建议优先使用 let 和 const 关键字，因为它们提供了更清晰的作用域控制和不可变性保障。var 关键字仍然可以用于向后兼容老代码，但不推荐在新的代码中使用。