如何声明变量_JavaScript中let和const的区别是什么

发布时间 - 2026-01-05 00:00:00    点击率:
const声明必须初始化且不可重赋值,let允许后续赋值;两者均有TDZ;默认优先用const,仅需重赋值时用let;const锁定绑定而非值,let在闭包中提供独立块级绑定。

let 和 const 都会创建块级作用域变量,但 const 要求必须初始化且不可重新赋值

这是最核心的区别:不是“常量不能改”,而是“绑定不能重赋值”。const 声明的变量在声明时就必须给初始值,之后不能再用 = 赋新值;let 则允许后续赋值,也允许先声明后赋值。

  • const 声明不等于“值不可变”——比如 const obj = {a: 1},你仍可以执行 obj.a = 2obj.b = 3,因为对象本身没被替换,只是属性在变
  • let 允许重复声明同一作用域内的不同变量(如循环中),但不允许在同一作用域内重复声明同名变量,否则报 Identifier 'x' has already been declared
  • 两者都存在“暂时性死区(TDZ)”:在声明语句之前访问会抛出 ReferenceError,不像 var 那样提升并初始化为 undefined

什么时候该用 const,什么时候该用 let

默认优先用 const,只有明确需要后续重新赋值时才换 let。这不是风格偏好,而是代码意图的显式表达。

  • 函数参数、对象/数组解构、模块导入(import)默认都是 const 绑定
  • 循环变量用 let(如 for (let i = 0; i ),因为每次迭代都需要新绑定;若用 const 会立即报错
  • 计数器、状态标记、临时中间值(如 let temp = x * 2)适合 let
  • 配置项、DOM 引用、API 实例(如 const modal = document.getElementById('modal'))应优先 const

var、let、const 的提升和作用域差异

三者行为差异集中在“是否提升”和“作用域边界”上,直接影响变量能否提前访问和是否被外层污染。

  • var:函数作用域,声明会被提升(hoisted),初始化为 undefined,可重复声明
  • let / const:块级作用域({}iffor 等内部),声明被提升但不初始化,访问触发 TDZ 错误
  • constlet 多一层限制:必须在声明时初始化,否则语法错误 Missing initializer in const declaration
if (true) {
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 1;
  const y = 2;
  console.log(y); // OK
}

常见错误场景和修复建议

很多运行时问题其实源于混淆了“绑定不可变”和“值不可变”,或忽略了 TDZ。

立即学习“Java免费学习笔记(深入)”;

  • const 声明前使用(哪怕只读)→ 改成 let 或调整顺序
  • 试图对 const arr = [1, 2] 执行 arr = [3, 4] → 报错;但 arr.push(3) 合法;若真要冻结内容,需配合 Object.freeze(arr)
  • for...infor...of 中误用 const → 循环变量必须用 let,否则每次迭代都会尝试重新绑定
  • 导出模块时写 export const foo = () => {} 是安全的;但若想动态改导出值(极少见),得用 let + export { foo } 形式

真正容易被忽略的是:const 对引用类型只锁定“指向”,不锁定“内容”;而 let 的块级绑定在闭包和异步回调中表现更可预测——比如循环里 setTimeout,用 let 自动获得每次迭代的独立绑定,用 var 就会全部输出最后一个值。


# javascript  # java  # access  # 区别  # 作用域  # red  # Object  # 常量  # if  # for  # const  # 循环  # 引用类型  # var  # 闭包  # undefined  # 对象  # dom  # 异步  # 绑定  # 什么时候  # 迭代  # 报错  # 但不  # 该用  # 的是  # 都是  # 这是  # 就会 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何在Windows环境下新建FTP站点并设置权限?  中国移动官方网站首页入口 中国移动官网网页登录  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  Laravel如何实现用户密码重置功能?(完整流程代码)  如何快速搭建高效WAP手机网站吸引移动用户?  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  JavaScript如何实现错误处理_try...catch如何捕获异常?  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel如何升级到最新版本?(升级指南和步骤)  laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法  Laravel如何使用Blade组件和插槽?(Component代码示例)  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  Laravel如何处理表单验证?(Requests代码示例)  nginx修改上传文件大小限制的方法  node.js报错:Cannot find module 'ejs'的解决办法  java中使用zxing批量生成二维码立牌  如何打造高效商业网站?建站目的决定转化率  什么是javascript作用域_全局和局部作用域有什么区别?  JavaScript Ajax实现异步通信  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel如何使用Socialite实现第三方登录?(微信/GitHub示例)  标题:Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel怎么调用外部API_Laravel Http Client客户端使用  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  详解jQuery停止动画——stop()方法的使用  ,南京靠谱的征婚网站?  东莞市网站制作公司有哪些,东莞找工作用什么网站好?  如何在建站宝盒中设置产品搜索功能?  Android中AutoCompleteTextView自动提示  WordPress 子目录安装中正确处理脚本路径的完整指南  Android滚轮选择时间控件使用详解  个人摄影网站制作流程,摄影爱好者都去什么网站?  如何快速生成可下载的建站源码工具?  🚀拖拽式CMS建站能否实现高效与个性化并存?  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  如何在企业微信快速生成手机电脑官网?  如何在 Telegram Web View(iOS)中防止键盘遮挡底部输入框  如何在腾讯云免费申请建站?  Laravel如何使用Sanctum进行API认证?(SPA实战)  如何在Windows服务器上快速搭建网站?  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  香港服务器租用费用高吗?如何避免常见误区?  Python自动化办公教程_ExcelWordPDF批量处理案例  如何为不同团队 ID 动态生成多个独立按钮  JS碰撞运动实现方法详解  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程?  网站建设整体流程解析,建站其实很容易!  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  如何在腾讯云服务器上快速搭建个人网站?