TypeScript中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没有变量提升

在代码块内部，若在声明变量前尝试访问该变量，该变量将处于不可用状态。这种语法行为被称为暂时性死区（Temporal Dead Zone，简称TDZ）。

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

3、let变量不能重复声明

使用var关键字时，对同一变量进行多次声明不会引发报错，最终仅保留一个变量实例。

var a=1;
var a=2;

在上述示例中，所有的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实际上都是一个全新的变量实例。

（2）在for循环结构中，不仅循环体{}会生成块级作用域，循环条件()部分也会生成独立的块级作用域。循环条件()的块级作用域是循环体{}块级作用域的父级作用域，因此let声明的变量可以跨越()和{}的作用域限制。

参考：TypeScript let与var的区别

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