跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.js大前端

JavaScript 中 var、let、const 的核心区别与实战应用

深入解析 JavaScript 中 var、let、const 三大变量声明方式的核心区别，从作用域、变量提升、重复声明及可修改性四个维度进行对比。通过代码示例展示各自特性，并针对常量、对象引用、循环变量等实际开发场景提供最佳实践建议，帮助开发者避免常见陷阱，编写更规范的代码。

不知所云发布于 2026/4/6更新于 2026/7/745 浏览
JavaScript 中 var、let、const 的核心区别与实战应用

JavaScript 中 var、let、const 的核心区别与实战应用

要理解 const、var、let 的区别，我们可以从 作用域、变量提升、可重复声明、可修改性 这几个核心维度展开。

一、核心概念铺垫

首先明确两个基础概念：

  • 函数作用域：变量只在声明它的函数内部可访问（var 是函数作用域）。
  • 块级作用域：变量只在声明它的 {} 内部可访问（let/const 是块级作用域，{} 包括 if/for/while/ 普通代码块）。
  • 变量提升：JS 引擎在执行代码前，会把变量声明 '提升' 到当前作用域顶部（但赋值不会提升）。

二、逐个拆解与对比

1. var（ES5 语法）

var 是 ES5 中声明变量的方式，特性如下：

  • 作用域：函数作用域（无块级作用域）。
  • 变量提升：声明会被提升，且提升后默认值为 undefined。
  • 可重复声明：同一作用域内可重复声明同一个变量，后声明的会覆盖前一个。
  • 可修改：声明后可随意修改值。

示例代码：

// 1. 函数作用域（无块级作用域）
if (true) {
    var a = 10;
}
console.log(a); // 输出 10（a 跳出了 if 的 {}，因为 var 无块级作用域）

// 2. 变量提升
console.log(b); // 输出 undefined（声明提升了，赋值没提升）
var b = 20;

// 3. 可重复声明
var c = 30;
var c = 40;
console.log(c); // 输出 40（后声明的覆盖前一个）

// 4. 可修改
var d = 50;
d = 60;
console.log(d); // 输出 60

2. let（ES6 语法）

let 是 ES6 为解决 var 的缺陷新增的声明方式，特性如下：

  • 作用域：块级作用域（被 {} 限制）。
  • 变量提升：存在 '暂时性死区（TDZ）'—— 声明也会提升，但提升后不会赋值 undefined，在声明前访问会报错。
  • 不可重复声明：同一作用域内不能重复声明同一个变量（包括不能和 var/const 重复）。
  • 可修改：声明后可修改值。

示例代码：

// 1. 块级作用域
if (true) {
    let a = 10;
}
console.log(a); // 报错：a is not defined（a 被 if 的 {} 限制，外部访问不到）

// 2. 暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
let b = 20;

// 3. 不可重复声明
let c = 30;
// let c = 40; // 报错：Identifier 'c' has already been declared
// var c = 40; // 同样报错

// 4. 可修改
let d = 50;
d = 60;
console.log(d); // 输出 60

3. const（ES6 语法）

const 用于声明常量，特性和 let 基本一致，核心区别是不可修改：

  • 作用域：块级作用域（和 let 完全一样）。
  • 变量提升：同样有暂时性死区（和 let 完全一样）。
  • 不可重复声明：和 let 完全一样。
  • 不可修改：声明时必须赋值，且赋值后不能修改引用（注意：如果是对象 / 数组，内部属性 / 元素可修改）。

示例代码：

// 1. 块级作用域
if (true) {
    const a = 10;
}
console.log(a); // 报错：a is not defined

// 2. 暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
const b = 20;

// 3. 不可重复声明
const c = 30;
// const c = 40; // 报错

// 4. 声明时必须赋值
// const d; // 报错：Missing initializer in const declaration

// 5. 不可修改引用（重点）
const e = 50;
// e = 60; // 报错：Assignment to constant variable.

// 注意：对象/数组的内部可修改（只是引用不能变）
const obj = { name: "用户" };
obj.name = "李四"; // 正常执行，输出 { name: '李四' }
console.log(obj);

const arr = [1, 2];
arr.push(3); // 正常执行，输出 [1,2,3]
console.log(arr);

三、核心区别对比表

特性varletconst
作用域函数作用域块级作用域块级作用域
变量提升有（提升为 undefined）有（暂时性死区）有（暂时性死区）
重复声明允许不允许不允许
声明后赋值允许（默认 undefined）允许（默认未初始化）不允许（必须立即赋值）
修改值允许允许引用不可改（对象 / 数组内部可改）

四、实际开发中的使用场景与建议

1. const 的使用场景（优先选择）

const 声明的是引用不可变的变量（声明时必须赋值，且不能重新赋值），适合以下所有 '不需要修改值 / 引用' 的场景：

1.1 声明常量

比如数学常量、配置项、固定字符串等，用 const 能明确表示 '这个值不会变'，减少代码意外修改的风险。

// 数学常量
const PI = 3.1415926;
const RADIUS = 5;
const AREA = PI * RADIUS * RADIUS;

// 配置项（固定的接口地址、密钥等）
const BASE_URL = 'https://api.example.com';
const TOKEN = 'abc123456';

// 固定字符串
const TITLE = '个人信息';
1.2 声明不需要重新赋值的对象 / 数组

注意：const 只是限制 '引用不可变'，对象 / 数组的内部属性 / 元素可以修改，这种场景非常适合用 const。

// 个人信息对象（只会改内部属性，不会重新赋值）
const userInfo = { name: '用户', class: '软件工程', hobby: ['唱歌', '跳舞'] };
userInfo.name = '小雨';
userInfo.hobby.push('爬山');

// 列表数据（只会增删元素，不会重新赋值数组）
const list = ['苹果', '香蕉'];
list.push('橙子');
1.3 声明 DOM 元素

创建后只会修改它的文本 / 样式，不会重新赋值成另一个元素，所以用 const 最合适。

// 创建 h2 元素（不会重新赋值，用 const）
const h2 = document.createElement('h2');
h2.textContent = '个人信息';
document.body.appendChild(h2);

// 创建按钮元素（同理）
const btn = document.createElement('button');
btn.textContent = '点击';
document.body.appendChild(btn);

2. let 的使用场景（仅当需要修改时）

let 声明的是可重新赋值的变量，只有当你需要 '修改变量的值 / 引用' 时，才用 let，常见场景如下：

2.1 循环变量

for/while 循环中的计数器（比如 i），每次循环都会修改值，必须用 let。

// for 循环计数器（i 会从 0 变到 4，需要修改）
const info = ['班级', '学号', '姓名', '性别', '爱好'];
for (let i = 0; i < info.length; i++) {
    const p = document.createElement('p');
    p.textContent = info[i];
    document.body.appendChild(p);
}

// while 循环变量
let count = 0;
while (count < 3) {
    console.log('计数：', count);
    count++; // 重新赋值，必须用 let
}
2.2 状态变量

比如开关状态、计数器、表单输入值等，这些值会随着操作（点击、输入）变化，需要用 let。

// 开关状态（点击按钮切换 true/false）
let isShow = false;
const btn = document.createElement('button');
btn.textContent = '显示/隐藏';
btn.onclick = function() {
    isShow = !isShow; // 重新赋值，用 let
    console.log('状态：', isShow);
};
document.body.appendChild(btn);

// 计数器（点击一次加 1）
let num = 0;
const countBtn = document.createElement('button');
countBtn.textContent = '计数';
countBtn.onclick = function() {
    num++; // 重新赋值，用 let
    countBtn.textContent = `计数：${num}`;
};
document.body.appendChild(countBtn);
2.3 临时变量

比如分步计算的值、条件判断后需要修改的变量，这些场景需要多次赋值。

// 分步计算总价
let total = 0;
total += 10; // 加商品 1 价格
total += 20; // 加商品 2 价格
total *= 0.8; // 打 8 折（多次重新赋值，用 let）
console.log('总价：', total);

// 条件赋值（根据条件修改变量）
let message;
const isLogin = false;
if (isLogin) {
    message = '欢迎登录';
} else {
    message = '请先登录'; // 重新赋值，用 let
}

3. 避坑提醒（新手常错）

  1. ❌ 错误：用 const 声明需要修改的变量
const i = 0;
i++; // 报错：Assignment to constant variable.（const 不能重新赋值）
  1. ❌ 错误：没必要用 let 声明不修改的变量
// 标题文本不会改，应该用 const 而不是 let
let TITLE = '个人信息';

五、总结

  1. 优先用 const：所有不需要重新赋值的场景（常量、对象 / 数组、DOM 元素、固定字符串等），用 const 能让代码更安全、语义更清晰。
  2. 仅用 let：只有当变量需要重新赋值时（循环变量、状态变量、临时变量等），才用 let。
  3. 核心原则：能不用 let 就不用，用 const 约束 '不变'，用 let 表示 '可变'，彻底抛弃 var。

目录

  1. JavaScript 中 var、let、const 的核心区别与实战应用
  2. 一、核心概念铺垫
  3. 二、逐个拆解与对比
  4. 1. var（ES5 语法）
  5. 2. let（ES6 语法）
  6. 3. const（ES6 语法）
  7. 三、核心区别对比表
  8. 四、实际开发中的使用场景与建议
  9. 1. const 的使用场景（优先选择）
  10. 1.1 声明常量
  11. 1.2 声明不需要重新赋值的对象 / 数组
  12. 1.3 声明 DOM 元素
  13. 2. let 的使用场景（仅当需要修改时）
  14. 2.1 循环变量
  15. 2.2 状态变量
  16. 2.3 临时变量
  17. 3. 避坑提醒（新手常错）
  18. 五、总结
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • FastAPI：Python 高性能 Web 框架指南
  • Ubuntu 下使用 VSCode 调试 C++ CMake 项目指南
  • OpenAI Whisper 语音转文本入门与实战
  • 基于 Python+Django 的热门旅游景点推荐系统设计与实现
  • Claude Code 2.0.74-2.0.76 更新：LSP 集成赋予 AI IDE 级代码理解能力
  • 国内用户升级 GitHub Copilot 专业版支付方案
  • 纯 Java 手写 TopoJSON 生成器零依赖实战
  • Docker 详细安装与基础命令指南
  • 机器人 SLAM 技术核心原理解析
  • YOLOv3 C++ DLL 调用与 CUDA 依赖配置
  • LeetCode 692. 前 K 个高频单词（Python 实现）
  • Nunchaku FLUX.1 CustomV3 镜像快速上手指南
  • Effective Modern C++ 条款 35：基于任务与基于线程编程的对比与实践
  • Kotlin Multiplatform 赋能 HarmonyOS 应用开发实践与解析
  • Python 职场进阶：数据分析与自动化办公实战应用
  • CSS 基础语法与常见样式详解
  • 基于 Java Web 的城市花园小区维修管理系统设计与实现
  • 本地部署 AI 大模型的硬件配置指南
  • LangChain RAG 进阶：路由、查询构建与索引检索策略
  • Android 开发中 Cursor AI 配置与实践技巧

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online