0Pricing
Frontend Academy · 课时

变量：let、const、var 与作用域

使用 let、const 和 var 声明变量。了解块级作用域和函数作用域，以及为什么大多数值更适合使用 const。

变量：let、const、var 与作用域 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么需要变量

变量用于存储值，以便您重复使用和更新这些值，并为它们赋予有意义的名称。JavaScript 有三种声明变量的方式：var（旧式）、let（现代、可重新赋值）和 const（现代、绑定不可重新赋值）。

const——默认选择

如果不会重新给变量赋值，请使用 const 声明。这样可以表达您的意图，并防止意外重新赋值。请注意：const 会阻止重新绑定，但不会使对象或数组变得不可变。

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let——需要重新赋值时使用

如果值会发生变化，请使用 let，例如循环计数器、累加和以及状态变量。let 具有块级作用域，只存在于最近的外层 { } 内。

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var——旧式声明

var 具有函数作用域（而不是块级作用域），并会被提升到所属函数的顶部。这可能导致难以察觉的错误。在现代 JavaScript 中请避免使用 var，优先选择 const 和 let。

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

作用域：变量存在的地方

全局作用域：在任何函数或代码块外声明，可以在任何地方访问。函数作用域：在函数内声明，只能在该函数内访问。块级作用域：在 { } 内使用 let/const 声明，只能在该代码块内访问。

提升

提升会在编译时将声明移到其作用域的顶部。var 声明会被提升，并初始化为 undefined。let 和 const 也会被提升，但不会初始化；在声明之前访问它们会导致暂时性死区错误。

变量命名

请使用描述性名称。变量和函数使用 camelCase（例如 userName），常量使用 UPPER_SNAKE_CASE（例如 MAX_RETRIES），类使用 PascalCase（例如 UserProfile）。除循环中的 i、j 等情况外，请避免使用单个字母。

声明多个变量

您可以在一条语句中声明多个变量，但通常每个变量使用一条声明会更清晰。请避免使用逗号形式，因为它可能掩盖作用域和类型。

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

暂时性死区（TDZ）

如果在代码中声明 let 或 const 变量之前访问它，就会抛出 ReferenceError。从代码块开始到声明之间的这段区域称为 TDZ。

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;

const 与数组和对象

const 会阻止重新给变量赋值，但被引用的值仍然可以被修改。对于浅层不可变对象，请使用 Object.freeze()；对于深层不可变性，请使用不可变模式。

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

为什么优先使用 const 而不是 let

默认使用 const 可以让代码更容易理解：您知道变量不会在其他地方被重新赋值。只有在确实需要重新赋值时，才改用 let。这种习惯可以减少错误并提高可读性。

快速检查

let 和 var 的关键区别是什么？

回顾：变量和作用域

对于不会重新赋值的值，优先使用 const。对于可变的值，使用 let。避免使用 var。块级作用域（let/const）可以将变量限制在代码块内。关于提升：var 会初始化为 undefined，而 let/const 如果过早访问，就会抛出 TDZ 错误。

常见问题解答

「变量：let、const、var 与作用域」课时是免费的吗？

是的 — 「变量：let、const、var 与作用域」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「变量：let、const、var 与作用域」这节课中我会学到什么？

使用 let、const 和 var 声明变量。了解块级作用域和函数作用域，以及为什么大多数值更适合使用 const。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「变量：let、const、var 与作用域」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 变量：let、const、var 与作用域
  2. 数据类型：string、number、boolean、null、undefined
  3. 函数：声明、表达式与箭头函数
  4. 控制流：if、else、switch、for、while
← 返回 Frontend Academy