巧用JS变量声明：var、let、const的三味真火

2023-09-22 13:12:00

JavaScript中的变量声明：var、let和const的全面比较

在浩瀚的JavaScript宇宙中，变量声明扮演着至关重要的角色。它就好比一块魔法画布，程序员可以在上面描绘出变量，为代码赋予灵魂。然而，当我们面对var、let和const这三种变量声明方式时，难免会陷入迷惘。究竟哪种方式适用于不同的场景？它们之间又有什么微妙的差别？

本文将拨开重重迷雾，带你深入探究var、let和const的异同，助你成为一名JavaScript变量声明大师。

var：古老的先驱

作为JavaScript诞生之初就存在的古老先驱，var声明的变量具有全局作用域或函数作用域。这意味着，在不加任何限制的情况下，var声明的变量可以在整个程序或当前函数中访问。

var globalVar = "全局变量";

function myFunction() {
  var functionVar = "函数变量";
  console.log(globalVar); // 输出："全局变量"
  console.log(functionVar); // 输出："函数变量"
}

然而，var声明还存在一些潜在的陷阱。它会进行变量提升，即在代码执行之前将var声明的变量提升到作用域的顶部。这可能会导致一些意外行为，尤其是当多个变量具有相同名称时。

console.log(myVar); // 输出：undefined

var myVar = "我的变量";

let：局部宠儿

let是ES6引入的变量声明方式，它具有块级作用域。这意味着，let声明的变量仅在声明所在的代码块内有效。这使得let非常适合创建局部变量，避免污染全局作用域。

let blockVar = "块变量";

{
  let innerBlockVar = "内部块变量";
  console.log(blockVar); // 输出："块变量"
  console.log(innerBlockVar); // 输出："内部块变量"
}

console.log(blockVar); // 输出："块变量"
console.log(innerBlockVar); // 报错：innerBlockVar未定义

const：不可变的磐石

const是ES6引入的另一个变量声明方式，它表示常量。常量在声明后不可重新赋值，这有助于防止意外修改重要数据。

const PI = 3.14159;

// 以下代码会报错：
PI = 3.14;

与let类似，const也具有块级作用域。然而，const声明的变量在声明时必须初始化，即必须为其赋值。

比较总结

特征	var	let	const
作用域	全局/函数	块级	块级
提升	是	否	否
重新赋值	可重新赋值	不可重新赋值	不可重新赋值
初始化	可在声明后初始化	必须在声明时初始化	必须在声明时初始化