异常教程

javascript const（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，变量管理是代码健壮性的关键。随着 ES6 的普及，const 关键字逐渐成为声明常量的首选方式。对于编程初学者和中级开发者而言，理解 const 的行为及其与 var、let 的差异，不仅能提升代码质量，还能避免因变量作用域或可变性引发的逻辑错误。本文将从基础概念、核心特性到实际应用，逐步解析 const 的使用场景与注意事项，帮助开发者建立清晰的变量管理思维。

const 的基础用法与核心特性

声明常量的“不可变性”

const 的核心特性是声明常量，即一旦赋值后，不能重新赋值。例如：

const PI = 3.1415926;
// PI = 3.14; // 抛出错误：Assignment to constant variable.

这里可以将 const 比喻为“冰块”——一旦凝固，形状就无法改变。但需注意：

  • 引用类型（如对象、数组）的属性或元素可以修改： 
    const config = { theme: "light" };
config.theme = "dark"; // 允许修改对象属性
// config = { theme: "auto" }; // 抛出错误：Assignment to constant variable.
  • 数组元素的可变性： 
    const colors = ["red", "green"];
colors.push("blue"); // 允许修改数组内容
colors = ["yellow"]; // 抛出错误：Assignment to constant variable.

这一特性要求开发者明确区分“变量引用”与“引用对象的内部状态”。

const 与 var、let 的对比

特性constletvar
重新赋值禁止允许允许
作用域块级作用域块级作用域函数作用域或全局作用域
变量提升未初始化时访问抛出错误未初始化时访问抛出错误提升但初始化为 undefined

对比示例：

if (true) {
  const a = 10;
  let b = 20;
  var c = 30;
}
console.log(a); // 报错：a is not defined
console.log(b); // 报错：b is not defined
console.log(c); // 输出 30（var 作用域提升至全局）

比喻解释：

  • const 和 let 好比“围栏内的区域”，变量仅在声明的代码块内可见；
  • var 则像“公共广场”，即使在代码块内声明，也可能“溢出”到外部可见。

const 的作用域与声明规则

块级作用域的严格限制

const 必须在声明时赋值，且作用域仅限于其所在的代码块（如 {} 内）。例如：

function init() {
  if (true) {
    const message = "Hello World!";
    console.log(message); // 正常输出
  }
  // console.log(message); // 报错：message is not defined
}

这一规则避免了因变量污染全局作用域导致的意外行为。

变量提升的“未初始化陷阱”

与 var 不同，const 声明的变量在声明前访问会抛出错误（即“暂时性死区”）：

console.log(constVar); // 报错：constVar is not defined
const constVar = 100;

对比 var 的行为：

console.log(varVar); // 输出 undefined（变量提升）
var varVar = 200;

开发者需谨慎声明顺序，避免因“变量提升”引发的逻辑漏洞。

const 的不可变性与对象/数组的“陷阱”

引用类型的“表面不可变”

虽然 const 禁止重新赋值变量引用，但对象或数组的内部属性仍可修改。这一特性常被误解为“冻结对象”，但实际并非如此。例如：

const user = { name: "Alice" };
user.name = "Bob"; // 允许修改属性
user = { name: "Eve" }; // 抛出错误：Assignment to constant variable.

解决方案：
若需完全冻结对象，可结合 Object.freeze()：

const frozenUser = Object.freeze({ name: "Alice" });
frozenUser.name = "Bob"; // 属性修改无效（静默失败）

数组的可变性与替代方案

类似对象，数组的元素或长度可动态修改：

const fruits = ["apple", "banana"];
fruits.pop(); // 修改数组内容
fruits.push("orange"); // 允许添加元素

若需创建不可变数组，可通过 Object.freeze() 或使用 Immutable.js 等库实现。

const 在闭包与异步代码中的注意事项

闭包中的变量捕获

在闭包场景中，const 变量的不可变性可能引发意外行为。例如：

function createFunctions() {
  const handlers = [];
  for (const i of [0, 1, 2]) {
    handlers.push(() => console.log(`Value: ${i}`));
  }
  return handlers;
}
const [f1, f2, f3] = createFunctions();
f1(); // 输出 Value: 0  
f2(); // 输出 Value: 1  
f3(); // 输出 Value: 2

此例中，const i 确保每次循环的 i 是独立的临时变量，避免了闭包变量“悬空”的问题（与 var 不同）。

对比 var 的行为：

function createFunctions() {
  const handlers = [];
  for (var i = 0; i < 3; i++) {
    handlers.push(() => console.log(`Value: ${i}`));
  }
  return handlers;
}
const [f1, f2, f3] = createFunctions();
f1(); // 输出 Value: 3  
// 所有函数输出同一值，因 var i 是循环外的共享变量

const 的常见误区与解决方案

误区 1：误用 const 导致代码僵化

过度使用 const 可能限制代码灵活性。例如：

const config = { 
  theme: "light",
  fontSize: 14,
};
// 后期需要动态修改配置时，必须通过对象属性修改：
config.theme = "dark"; // 允许

建议：仅对“逻辑上不可变”的值使用 const，如 API 端点、基础常量等。

误区 2：忽略变量提升的“死区”

function example() {
  console.log(x); // 正常输出 undefined（var 的特性）
  var x = 10;
  
  console.log(y); // 报错：y is not defined（const 的暂时性死区）
  const y = 20;
}

开发者需确保变量声明在首次使用之前。

const 的最佳实践与性能优化

命名规范与可读性

  • 对于常量，采用全大写加下划线分隔（如 MAX_ATTEMPTS）；
  • 对于普通变量，遵循驼峰命名法（如 userProfile）；
  • 避免单字母命名（如 const a = ...），除非在非常小的作用域内。

性能与内存管理

  • 避免频繁创建新对象： 
    const largeData = generateLargeObject(); // 一次性声明，避免重复计算
  • 利用 const 提升代码可维护性：
    通过不可变变量减少意外副作用，降低调试成本。

结论

const 是 JavaScript 中声明常量的核心工具，其不可变性和块级作用域特性为代码提供了更高的安全性与可预测性。通过理解 const 与 var、let 的差异，开发者能有效避免变量污染和逻辑错误。在实际开发中，需结合对象冻结、命名规范等策略，最大化其优势。随着项目复杂度提升，合理使用 const 将成为构建健壮、可维护代码的重要基石。

延伸思考：

  • 在 TypeScript 中，如何结合 const 和类型系统进一步约束变量？
  • 如何在函数式编程中利用不可变性提升代码效率？

通过持续实践与探索，开发者将逐步掌握 javascript const 的深层价值，为构建高质量的 JavaScript 应用奠定坚实基础。

最新发布

查看更多文章