js const（建议收藏）

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

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

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在 JavaScript 开发中，变量声明是构建程序逻辑的基础操作。随着 ES6 的普及，const 已成为现代代码中高频出现的关键词之一。对于编程初学者而言，理解 const 的特性与使用场景，不仅能提升代码的可维护性，还能避免因变量意外修改引发的逻辑错误。本文将从基础概念出发，结合实际案例与对比分析，深入解析 js const 的核心知识点，帮助开发者逐步掌握这一工具的正确使用方法。

什么是 const？

const 是 JavaScript 中用于声明常量的关键字，其英文含义为“constant”，即“不变的”。通过 const 声明的变量，在初始化后无法被重新赋值，这类似于给变量加上了一层“不可变性”的保护。

基础语法与特性

// 声明一个常量
const PI = 3.1415926;
// 尝试重新赋值会抛出错误
PI = 3.14; // 报错：Assignment to constant variable.

关键特性总结：

形象比喻：const 是“不可变的保险箱”

可以将 const 视为一个“保险箱”：一旦放入值后，这个箱子的锁就无法打开，但箱内的物品（如对象或数组）可能仍可被修改。例如：

const config = { theme: 'dark' };
// 修改对象属性（允许）
config.theme = 'light';
// 重新赋值整个对象（禁止）
config = { theme: 'auto' }; // 报错

const 与 var/let 的对比

在 ES6 之前，JavaScript 主要使用 var 声明变量，而 let 和 const 的引入，弥补了 var 的作用域缺陷。以下是三者的对比：

核心差异表格

（表格前空一行）
| 关键字 | 作用域 | 是否可重新赋值 | 是否必须初始化 | 变量提升行为 |
|--------|-------------|---------------|---------------|-------------------|
| var | 函数作用域 | 允许 | 不需要 | 存在（变量声明提升，值初始化为 undefined） |
| let | 块级作用域 | 允许 | 必须 | 存在（声明提升，但值不可用） |
| const| 块级作用域 | 禁止 | 必须 | 存在（同 let） |

实战案例：变量提升与作用域

// 案例 1：var 的变量提升
console.log(x); // 输出：undefined
var x = 10;
  
// 案例 2：let 和 const 的暂时性死区
console.log(y); // 报错：ReferenceError
let y = 20;

console.log(z); // 报错：ReferenceError
const z = 30;

对比总结

• 作用域：const 和 let 均为块级作用域，避免了 var 的函数作用域导致的意外覆盖。
• 可变性：const 强制不可变性，适合声明无需修改的值（如配置、数学常量）。
• 初始化：const 和 let 必须立即初始化，而 var 允许延迟赋值。

const 的典型应用场景

案例 1：声明不可变的常量

// 数学常量
const EULER_NUMBER = 2.71828;
// 配置对象
const API_ENDPOINT = 'https://api.example.com/v1/';

案例 2：避免意外覆盖全局变量

// 使用 const 避免意外覆盖全局变量
const DEFAULT_COLOR = '#000000';
function setColor(userColor) {
  const color = userColor || DEFAULT_COLOR;
  // ...后续逻辑
}

案例 3：与对象/数组的配合使用

// 宣告对象的不可变性，但属性仍可修改
const user = { name: 'Alice' };
user.name = 'Bob'; // 允许
user = { name: 'Charlie' }; // 报错

// 数组元素的修改示例
const numbers = [1, 2, 3];
numbers.push(4); // 允许
numbers = [5, 6]; // 报错

注意：对象/数组的“部分可变性”

虽然 const 禁止重新赋值变量本身，但若变量指向的是对象或数组，其内部属性或元素仍可修改。这需要开发者通过其他方式（如 Object.freeze()）确保深层不可变性。

常见误区与解决方案

误区 1：将 const 视为“完全不可变”

const fruits = ['apple', 'banana'];
fruits[0] = 'orange'; // 允许，数组元素可修改
// 但 fruits = ['mango'] 将报错

解决方案：若需完全冻结对象或数组，可使用 Object.freeze()：

const fruits = Object.freeze(['apple', 'banana']);
fruits.push('orange'); // 报错：Cannot add property 2, object is not extensible

误区 2：在循环中误用 const

for (const i = 0; i < 5; i++) { // 报错：Assignment to constant variable.
  // ...
}

正确写法：使用 let 声明循环变量：

for (let i = 0; i < 5; i++) {
  // ...
}

误区 3：忽略块级作用域的影响

if (true) {
  const message = 'Hello!';
  console.log(message); // 输出：Hello!
}
console.log(message); // 报错：message is not defined

关键点：const 声明的变量仅在块级作用域内有效，外部无法访问。

进阶技巧与最佳实践

技巧 1：命名规范

常量名通常使用全大写，单词间用下划线分隔：

const MAX_ATTEMPTS = 3;
const USER_AGENT = navigator.userAgent;

技巧 2：与模块导出结合

在模块中声明常量，确保全局唯一性：

// config.js
export const THEME = 'dark';
export const TIMEOUT = 5000;

// main.js
import { THEME, TIMEOUT } from './config.js';

技巧 3：避免空声明

const 必须初始化，否则会报错：

const EMPTY; // 报错：Missing initializer in const declaration

解决方案：初始化为默认值：

const EMPTY = null;

性能与代码质量优化

场景 1：减少意外覆盖风险

使用 const 可避免因变量被意外修改导致的逻辑漏洞，尤其在团队协作开发中，这一特性能显著降低调试成本。

场景 2：提升代码可读性

通过 const 声明的变量，向其他开发者明确传递“此值不可变”的信号，例如：

// 明确表示 URL 不会改变
const BASE_URL = 'https://api.example.com/';

场景 3：与严格模式结合

在严格模式下（'use strict';），JavaScript 会更严格地检查变量使用，与 const 联合使用可进一步保障代码健壮性。

结论

js const 是现代 JavaScript 开发中不可或缺的工具，它通过强制不可变性和块级作用域，帮助开发者编写更安全、可维护的代码。无论是声明数学常量、配置对象，还是避免变量污染，const 都展现了其独特价值。

然而，理解其“部分不可变性”和作用域规则同样关键。通过结合 Object.freeze()、命名规范和模块化设计，开发者能最大化 const 的优势，同时规避常见陷阱。随着实践的深入，const 将成为构建健壮 JavaScript 应用的基础之一。

拓展思考：ES6 引入的 let 和 const 重构了 JavaScript 的变量管理逻辑，后续可进一步探索 let 的动态特性，以及 var 在历史遗留代码中的兼容处理策略。