Typescript let和var区别

TypeScript let vs var

TS本质复用JS的变量规则,核心差异:作用域、变量提升、重复声明、暂时性死区

1.作用域

  • var函数作用域 ,没有块级作用域({}、for、if 不隔离)

  • let块级作用域{}内部声明,外面访问报错

    if(true){
    var a = 1
    let b = 2
    }
    console.log(a) // 1,var逃出if块
    console.log(b) // ❌报错,let块内有效

for循环经典坑

复制代码
for(var i=0;i<3;i++){}
console.log(i) //3,var泄露到循环外面

for(let j=0;j<3;j++){}
console.log(j) //❌报错

2.变量提升

  • var:提升,可以先使用再声明 ,值为undefined

    console.log(x) // undefined
    var x = 10

  • let:也会提升,但存在暂时性死区TDZ,声明前不能访问

    console.log(y) // ❌Cannot access 'y' before initialization
    let y = 20

3.重复声明

  • var:允许同一作用域重复声明,覆盖

    var n =1
    var n=2 //没问题

  • let同一块内禁止重复声明,直接报错

    let m=1
    let m=2 // ❌报错

4.全局挂载

复制代码
var g = 99
// 浏览器:var会挂载到window对象 window.g ===99

let gg =99
// let不会挂载到window

TS额外小提示

  1. 尽量不用var ,现代TS/JS优先用let(可修改) /const(只读)

  2. let允许后续重新赋值,const不允许重新赋值

    let num =1
    num=2 // ✅可以修改

    const num2=1
    num2=2 //❌

快速对照表

特性 var let
作用域 函数作用域 块级作用域 {}
提升 提升,访问得undefined 提升,暂时性死区,访问报错
重复声明 允许 禁止
全局挂载window
暂时性死区

总结:var老旧,漏洞多;写TS一律优先let/const,放弃var。

相关推荐
晓得迷路了17 分钟前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css
YHHLAI23 分钟前
前端路由与浏览器历史:从多页应用到单页应用的演进
前端
奈斯先生Vector29 分钟前
从“能调用”到“可运营”:AI Agent 进入多模型时代后的架构升级
java·javascript·数据库·人工智能·算法·架构·aigc
Escalating_xu30 分钟前
【C++类和对象(上)】从类的定义、封装与对象模型到内存对齐和 this 指针
开发语言·前端·c++
Json____33 分钟前
宿舍安全卫生检查系统:Node 全栈开发实战
java·前端·数据库·毕业设计·课程设计·毕设·wwwoop.com
晴天1637 分钟前
HTML canvas标签使用指南-Day32
前端·html
weixin1997010801641 分钟前
《alibaba.idle.isv.order.ship 接入实录:闲鱼订单发货回传的5个隐式约束》(附Python源码)
服务器·前端·python
初願致夕霞1 小时前
五种IO模型(详解非阻塞IO与多路转接)
linux·前端·网络·数据库·tcp/ip