Skip to content

JavaScript 变量

如何用 let、const 和 var 声明变量,以及它们背后的规则。

你将学到

  • var、let 和 const 的区别
  • 变量命名规则与约定
  • 块级作用域与函数作用域
  • 变量提升与暂时性死区
  • 何时重新赋值、何时保持常量

概念讲解

三种声明变量的方式

现代 JavaScript 提供了三个声明变量的关键字:

  • let——可以被重新赋值的变量。作用域限定在声明它的 { ... } 块内。
  • const——不能被重新赋值的变量。同样是块级作用域。默认使用它。
  • var——旧方式(ES6 之前)。函数作用域,会被提升,容易产生微妙 bug。现代代码中应避免使用。
let score = 10;
score = 20; // OK——let 允许重新赋值

const PI = 3.14159;
// PI = 3; // TypeError——const 不能重新赋值

var legacy = "avoid me";

命名规则

变量名(标识符)必须:

  • 以字母、$ 或 _ 开头(不能以数字开头)
  • 只包含字母、数字、$ 和 _
  • 不能是保留字(class、return、if 等)
  • 区分大小写(age 和 Age 是不同的变量)

约定:变量用 camelCase,真正的常量用 UPPER_SNAKE_CASE(如 MAX_RETRY_COUNT)。

作用域

let 和 const 是块级作用域——只在声明它们的 { } 块内存在。var 是函数作用域,会泄漏到块外:

if (true) {
  let blockScoped = "only here";
  var functionScoped = "leaks out";
}
console.log(functionScoped); // "leaks out"
// console.log(blockScoped); // ReferenceError

提升与暂时性死区

var 声明会被提升到作用域顶部并初始化为 undefined。let 和 const 也会被提升,但在到达声明语句之前处于暂时性死区——提前访问会抛出 ReferenceError。这是一个特性:它防止你在变量定义之前使用它。

默认使用 const

经验法则:默认用 const,需要重新赋值时才改用 let。 这样可以清楚表达意图,并防止意外修改。新代码中永远不要用 var。

示例代码

              // 好习惯:默认用 const
const playerName = "Ada";
const maxHealth = 100;

// 需要重新赋值时用 let
let currentHealth = 100;
currentHealth = currentHealth - 25; // 受到伤害
console.log(`${playerName} has ${currentHealth}/${maxHealth} HP`);

// const 对象的属性仍然可以被修改
const player = { name: "Ada", level: 1 };
player.level = 2; // OK——我们修改的是属性,不是重新赋值
console.log(player);

// 块级作用域示例
let message = "outside";
if (true) {
  let message = "inside";
  console.log(message); // "inside"
}
console.log(message); // "outside"

const 只是阻止重新赋值绑定本身,但对象和数组的内容仍然可以修改。块级作用域意味着 if 块内的 let 与外层同名变量是不同的变量。

动手试一试

  • Case Converter

    变量命名约定(camelCase、snake_case)——在线转换文本。

  • Slugify

    把变量风格的字符串转成 URL 安全的 slug。

常见错误

错误写法

使用 var 而非 let 或 const

正确做法

var 是函数作用域且会被提升,容易产生隐蔽 bug。默认用 const,需要重新赋值时用 let。现代代码中不要用 var。

错误写法

以为 const 能让对象不可变

正确做法

const 只是阻止重新赋值变量本身。你仍然可以修改对象属性和数组元素。需要真正不可变时使用 Object.freeze()。

相关资源

相关速查表

练习 JavaScript 变量

3 个练习

练习 JavaScript 变量

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误