TypeScript中let和var的区别介绍

目录
  • 1、作用域不同
  • 2、let没有变量提升
  • 3、let变量不能重复声明
  • 4、for循环中的let与var

1、作用域不同

用var声明的变量，只有函数作用域和全局作用域，没有块级作用域。而let可以实现块级作用域，只能在代码块{}内有效，在{}之外不能访问，如下代码所示：

{
let a = 0;
var b = 1;
}
console.log(a) // ReferenceError: a is not defined
console.log(b) // 1

2、let没有变量提升

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为：暂时性死区，英文为：temporal dead zone，简称 TDZ。

//报错
console.log(a)
let a=10

3、let变量不能重复声明

使用var，多次声明同一个变量，不会报错，只会得到一个变量。

var a=1;
var a=2;

上述例子中，所有的a的声明实际上都引用了一个相同的a。在多人开发一个项目时，容易出现问题。比如都定义了一个变量a，但各自用途不同，后面定义的a会把前面定义的覆盖掉。

而let就相对严格，无法多次声明同一个变量，一个变量只能声明一次，并且无法在 let 语句前去访问该变量

let a=1;
let a=2; //错误

4、for循环中的let与var

for (var i = 0; i < 3; i++) {
setTimeout(function (){console.log("i:" + i);});
}

上述代码打印出来i都是3，这个结果令人感觉奇怪。其实并不奇怪，原因如下所示：

（1）var是全局变量，并且可以允许重复定义，所以在for (var i = 0; i < 3; i++)语句中，i重复定义了3次，最终的值以最后一次定义为准。

（2）javascript是单线程，setTimeout()会等for执行完之后才开始计时，此时i的值为3，最终打印出3

for (let j = 0; j < 3; j++) {
setTimeout(function (){console.log("j:" + j);});
}

上述代码打印出来i是0、1、2，原因分析如下：

（1）变量j是用let声明的，当前的j只在本轮循环中有效，每次循环的j其实都是一个新的变量。

（2）在for循环中，不仅循环体{}会生成块级作用域，循环条件()也会生成块级作用域，循环条件()的块级作用域是循环体{}块级作用域的父级作用域，所以let可以跨越()和{}作用域。

参考：TypeScript let与var的区别

到此这篇关于TypeScript let与var的区别的文章就介绍到这了,更多相关TypeScript let与var区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • TypeScript利用TS封装Axios实战

    TypeScript利用TS封装Axios实战

    目录 简介 Axios几个常用类型 AxiosRequestConfig AxiosInstance AxiosStatic AxiosResponse AxiosError 基础封装 拦截器封装 常用方法封装 总结 简介 这是TypeScript实战的第三篇文章.前面两篇笔者分别介绍了在Vuex和Pinia中怎么使用TypeScript以及Vuex和Pinia的区别.今天我们再用TypeScript封装一遍Axios.希望能进一步巩固TypeScript的基础知识. Axios几个常用类型 在

  • TypeScript保姆级基础教程

    TypeScript保姆级基础教程

    目录 什么是 TypeScript? 那么 ts 和 js 有什么区别呢? 什么是类型注解? ts 的类型 联合类型: 类型别名 数组类型 函数 定义单个函数 统一定义函数格式 函数返回值类型void 函数-可选参数 可选和默认值的区别 对象类型-单独使用 对象类型-类型别名 接口 接口继承 元组 字面量类型 枚举 any 类型 使用any的场景 什么是 TypeScript? TypeScript,简称 ts,是微软开发的一种静态的编程语言,它是 JavaScript 的超集. 那么它有什么特

  • TypeScript中的装饰器用法

    一.装饰器 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为. 通俗的讲装饰器就是一个方法,可以注入到类.方法.属性参数上来扩展类.属性.方法.参数的功能. 常见的装饰器有:类装饰器.属性装饰器.方法装饰器.参数装饰器 装饰器的写法:普通装饰器(无法传参) . 装饰器工厂(可传参) 装饰器是过去几年中js最大的成就之一,已是Es7的标准特性之一 二.类装饰器: 类装饰器在类声明之前被声明(紧靠着类声明). 类装饰器应用于类构造函数,可以用来监视,修改或替换类

  • 使用typescript+webpack构建一个js库的示例详解

    使用typescript+webpack构建一个js库的示例详解

    目录 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 运行webpack进行打包 测试验证 输出esm模块 已经输出了umd格式的js了, 为什么还要输出esm模块? ----TreeShaking 用tsc输出esm和类型声明文件 package.json中添加exports配置声明模块导出路径 完善package.json文件 用api-extrac

  • TypeScript中let和var的区别介绍

    目录 1.作用域不同 2.let没有变量提升 3.let变量不能重复声明 4.for循环中的let与var 1.作用域不同 用var声明的变量,只有函数作用域和全局作用域,没有块级作用域.而let可以实现块级作用域,只能在代码块{}内有效,在{}之外不能访问,如下代码所示: { let a = 0; var b = 1; } console.log(a) // ReferenceError: a is not defined console.log(b) // 1 2.let没有变量提升 在代码

  • iOS开发中class和#import的区别介绍

    在iOS开发过程中,我们在一些源码中经常会看到导包的时候有的用#import进行导包,但是有的的时候也会看到用@class进行导包,那么这两种方式有什么区别呢? 一 @class和#import的主要区别 首先说一下最主要的区别: •使用#import引入一个类的头文件,编译时会将该类的头文件中的所有信息都引入,包含属性和方法: •使用@class仅仅是告诉编译器这是一个类,并不会因入该类的其他信息,而我们所关心的也仅此一点,而不需要知道该类的内部有哪些属性和方法,因此使用@class可以提升编

  • python中if和elif的区别介绍

    多个if语句是每次单独判断 比如: 例子一 a = 5 if a < 6: #条件1 print(1) if a < 7: #条件2 print(2) else: print(3) 条件1和条件2是独立的,第一次判断a的值小于6,所以打印出数字1,第二次判断a的值小于7,所以打印出2.如果所有的if语句都判断失败,才会执行else后的语句,否则else语句不执行. 如果条件2修改为elif,结果就不同了 例子二 a = 5 if a < 6: #条件1 print(1) elif a &

  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    目录 类型别名 type 接口 interface interface和type的相似之处 都可以描述 Object和Function Type Interface 二者都可以被继承 interface 继承 interface interface 继承 type type 继承 type type 继承 interface 实现 implements 二者区别 1. 定义基本类型别名 2. 声明联合类型 3. 声明元组 4. 声明合并 5. 索引签名问题 总结 类型别名 type 首先认识一下

  • typescript中type和interface的区别有哪些

    目录 前言 type和interface的相同点 type和interface的不同点 结语 如何选择 Interface . Type 总结 前言 在typescript里面,有两个概念十分容易混淆,那便是 type 和 interface,它俩都可以用来表示 接口,但是实际使用上会存在一些差异,因此本篇文章就准备聊聊它俩,彻底弄清它俩的联系与区别,废话不多说,开搞! type和interface的相同点 在我看来,它俩就是对 接口定义 的两种不同形式,目的都是一样的,都是用来定义 对象 或者

  • ASP.NET Core中Razor页面与MVC区别介绍

    ASP.NET Core中Razor页面与MVC区别介绍

    作为.NET Core 2.0发行版的一部分,还有一些ASP.NET的更新.其中之一是添加了一个新的Web框架来创建“页面”,而不需要复杂的ASP.NET MVC.新的Razor页面是一个比较简单的MVC框架版本,在某些方面是老的“.aspx” WebForms的演变. 在本文中,我们将介绍使用ASP.NET Razor页面和MVC的一些细节. Razor页面基础知识 ASP.NET MVVM vs MVC Razor页面的优点和缺点 使用Handlers实现多个GET.POST Action方

  • 详细聊聊TypeScript中unknown与any的区别

    目录 前言 1. unknown vs any 2. unknown 和 any 的心智模式 3.总结 总结 前言 我们知道 any 类型的变量可以被赋给任何值. let myVar: any = 0; myVar = '1'; myVar = false; TypeScript 指南并不鼓励使用 any,因为使用它就会丢掉类型限制--而需要类型限制也是我们选择 TypeScript 的一个原因,所以就是有点背道而驰. TypeScript(3.0 及以上版本)还提供了一种类似于 any 的特殊

  • TypeScript中type和interface的区别及注意事项

    目录 前言 概念 type interface 异同点 不同点 相同点 补充:Ts中type和interface定义类型扩展类型的方法 总结 前言 在 TS 中,type 和 interface相似,都可以给类型命名并通过该名字来引用表示的类型.不过它们之间是存在一些差别的,我们在使用时也需要注意一些特殊场景. 概念 type type关键字是声明类型别名的关键字.它的语法如下: type AliasName = Type; type:声明类型别名的关键字 AliasName:类型别名的名称 T

  • tomcat自定义Web部署文件中docBase和workDir的区别介绍

    本文主要介绍的是tomcat自定义Web部署文件中docBase和workDir的区别,下面话不多说,直接来看详细介绍. 首先看这段tomcat配置文件: <Context path="/web" reloadable="false" docBase="D:\CAPRuntime\src\main\webapp" workDir="D:\CAPRuntime\src\main\webapp"/> 其中的docBas

  • JavaScript中的null和undefined区别介绍

    JavaScript中存在2个代表信息不存在的特殊值:null和undefined.个人认为可以从以下角度来理解这两个特殊值之间的区别: 1.null代表有存储信息的容器(比如之前被赋过值的变量),但该容器中的内容为空. 2.undefined代表不存在用于存储信息的容器. JavaScript中的null与其它多数编程语言中的null没有什么区别,基本用于表示信息值为空:而在JavaScript中下述情况下表达式返回结果为undefined: 1.从未被赋过值的变量. 2.访问某个对象不存在的

随机推荐