当前位置: 首页 > news >正文

JS 中 var、let、const 的核心区别

在 JavaScript 变量声明中,var、let、const 是三种核心声明方式。其中 var 是 ES5 及之前的旧语法,let、const 是 ES6 新增的块级作用域声明语法。

本文将从变量提升、重复声明、赋值特性、三大核心维度拆解,搭配可运行代码案例

一、核心区别速览

特性varletconst
变量提升支持,初始值为 undefined支持,存在暂时性死区支持,存在暂时性死区
重复声明允许不允许(同作用域)不允许(同作用域)
重新赋值允许允许不允许(只读常量)
初始赋值可声明不赋值可声明不赋值必须初始化赋值

二、详细特性拆解(附代码案例)

  1. 变量提升与暂时性死区
    JS 代码执行分为编译阶段和执行阶段,变量提升发生在编译阶段。
  • var:变量提升后默认赋值为 undefined,声明前访问不会报错。
  • let / const:存在变量提升,但禁止声明前访问,形成暂时性死区(TDZ),直到声明语句执行完毕,死区结束。
// var 变量提升// var 变量提升console.log(a);// undefinedvara=10;// let/const 暂时性死区console.log(b);// Uncaught ReferenceError: Cannot access 'b' before initializationletb=20;console.log(c);// 同上报错constc=30;
  1. 重复声明规则
  • var:允许在同一作用域重复声明同名变量,会覆盖之前的值,无任何报错,极易引发隐蔽 bug。
  • let / const:同一作用域内禁止重复声明同名变量,直接报错,代码更严谨。
// var 重复声明// var 重复声明varnum=1;varnum=2;console.log(num);// 2(无报错,直接覆盖)// let 重复声明letcount=1;letcount=2;// Uncaught SyntaxError: Identifier 'count' has already been declared// const 重复声明同理报错conststr="test";conststr="demo";// 语法报错
  1. 赋值与修改特性
  • var / let:属于可变变量,声明后可任意重新赋值。
  • const:属于只读常量,必须声明时初始化赋值,且不允许整体重新赋值。
    重点误区:const 并非完全不可变,它仅保证变量的内存地址不变。如果是引用类型(数组、对象),可以修改内部属性和元素。
// 1. const 必须初始化consttest;// Uncaught SyntaxError: Missing initializer in const declaration// 2. 基本类型不可重新赋值constscore=100;score=99;// 报错:Assignment to constant variable// 3. 引用类型可修改内部数据constobj={name:"李四"};obj.age=20;// 合法:修改对象属性obj.name="王五";// 合法console.log(obj);// {name: '王五', age: 20}constarr=[1,2,3];arr.push(4);// 合法:修改数组内容console.log(arr);// [1,2,3,4]

三、企业级开发最佳实践
现代 Vue/React/原生项目中,彻底废弃 var,统一遵循以下规则:

  1. 优先使用 const:绝大多数变量不会重新赋值(接口数据、常量配置、DOM 元素、函数、类),默认用 const,提升代码可读性和稳定性。
  2. 按需使用 let:仅变量值会动态改变时使用(计数器、表单输入值、状态变量、循环变量)。
  3. 绝对不用 var:规避全局污染、变量提升混乱、重复声明覆盖等所有隐性 bug。

四、总结

  1. var:ES5 旧语法,函数作用域,无严谨性,存在诸多设计缺陷,现代项目已淘汰;
  2. let:块级作用域,解决 var 核心问题,适用于值会变动的变量;
  3. const:块级作用域,只读地址,性能更优、安全性更高,是默认首选声明方式;
  4. 三者核心差异的本质:作用域机制 + 变量声明规则 + 内存绑定特性的全面升级。
http://www.jsqmd.com/news/1154182/

相关文章:

  • 拆解激石(Pepperstone)MT4 终端的资产池吞吐与时序数据源对齐
  • 大客户信赖之选:实现号码精准筛选-实时空号检测如何精准提纯数据资产
  • 字节跳动AI产品经理实习(深圳)|收藏!小白/程序员入门大模型绝佳机会
  • AI应用开发岗全都是混进去再说的!想转AI应用开发的朋友,听
  • 2026年论文查重降AI双达标攻略:同时解决AI率和重复率超标4.8元完整方案
  • AI Agent 进入「Loop Engineering」时代:让 AI 不只是执行,而是持续迭代
  • TPA3138D2与PIC32MX460F512L音频系统设计与优化
  • 英雄联盟国服换肤终极指南:5分钟解锁全皮肤免费体验
  • Teamcenter与TcUA
  • 轻断食APP怎么选?5款横向测评,参数、优缺点、场景实测都列出来了
  • 消息队列的幂等设计:重复消费不是 bug,是分布式系统的常态
  • 从零开始学Linux(八)
  • 2026年医疗行业数据库风险监测产品综合能力排名分析
  • 5分钟掌握NoSleep:Windows防休眠神器终极指南,告别意外锁屏烦恼
  • Krita Vision Tools终极指南:3个AI智能选区工具让你的图像编辑效率提升300%
  • 一线观察:长期体验后发现长春汽车贴膜品牌影响力的底层真相
  • DeepSeek大模型接入Codex平台:免费AI助手集成实战指南
  • 如何用嘎嘎降AI处理心理学论文:心理学毕业论文降AI免费4.8元完整操作教程
  • 思源宋体TTF终极指南:免费商业字体从零到精通的完整旅程
  • 技术转 AI 最容易踩的五个坑:工具、框架和心态
  • 5分钟搞定电脑分屏游戏:Nucleus Co-op让你和好友共享游戏乐趣
  • 财务数字化进入深水区:从单点工具到五层技术栈,AI如何重构企业财务底座
  • 护理学论文降AI工具免费推荐:2026年护理学毕业论文降AI免费4.8元知网达标完整指南
  • UniversalUnityDemosaics终极指南:6种插件轻松去除Unity游戏马赛克
  • 如何用嘎嘎降AI处理护理学论文:护理学毕业论文降AI4.8元知网维普达标完整教程
  • 如何让品牌在 AI 回答中占据优质生态位?拓氪科技语义适配体系有用吗
  • 好用还专业!盘点2026年王者级的的降AI率网站
  • 5分钟免费解锁英雄联盟国服全皮肤:R3nzSkin换肤工具终极指南
  • 企业软件授权审计准备:确保合规运营的关键步骤
  • 意见直达小程序,四大核心功能赋能政企物业高效管理