本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

JavaScript中的letvar,苏南大叔已经写过两篇相关文章了,链接请参考文章底部的相关文章。具体的说来,前两篇文章的思想就是:大体上看,两者都是变量定义。但是在变量作用域范围上,是有区别的。而网上普遍的说法是:使用let的话,更容易定位错误所在位置。

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - let-vs-var-2
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-1)

那么,大家也许想了,如果我不想定位错误所在位置呢?或者,可以通过严密的逻辑来控制错误的发生呢?那么,这里还有使用let而不使用var的理由么?答案是:有!

本文测试环境:win10chrome@90.0.4430.212

往期回顾,控制错误信息

先看看,没涉及变量提升概念之前的代码例子:

avar = "avar";
(function () {
    console.log(avar)
})()
var cvar = "cvar";
(function () {
    console.log(cvar)
})()
let elet = "elet";
(function () {
    console.log(elet)
})()

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - js-define-var
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-2)

let有个说法,叫做:暂时性死区(temporal dead zone,简称TDZ)。苏南大叔是这么理解的:在有let定义的区块内,在let定义之前,任何使用对应变量的行为,都会触发致命错误,程序停止运行。

以下代码,都会报错:

console.log(alet)
let alet = "let"
Uncaught ReferenceError: Cannot access 'alet' before initialization

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - let-error
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-3)

let flet = "flet";
(function () {
    console.log(flet)
    let flet = "flet"
})()

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - let-error-2
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-4)

如果把上述结论,换成var的话,在var变量定义之前,使用相关变量的行为,并不会得到致命错误提示,相关变量只是一个undefined。这是因为var具有一个变量提升的副作用。

var dvar = "dvar";
(function () {
    console.log(dvar)
    var dvar = "dvar"
})()
console.log(evar)
var evar = "evar";

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - var-undefined
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-5)

总结上来说,只要区块里面有let定义,那么从区块开始到let定义之间就是传说中的“暂时性死区”。在这个死区之内,任何试图使用相关变量的行为,都会被触发致命错误!而换成var,或者不指明的情况下,并不会触发报错,最多仅仅是输出undefinedlet性格很刚烈,容不得一点沙子。var性格很温和,怎么写都是可以的。

一个新的理由,使用let而不用var

下面有段小程序,可以给你个不可拒绝的理由,来使用let而不是var

下面的例子中,变量i循环从03。在循环体内,使用setTimeout来输出i。那么,这个需求里面,应该使用var还是let呢?或者说两者都可以呢?

估计大家都应该认为是:两者都可以。事实上,使用let才是正解。使用var,并不能得到预期值!

看实际执行结果:

for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

var输出的是:3 3 3

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - var-settimeout
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-6)

for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

let输出的是0 1 2

苏南大叔:JavaScript,再次举例对比let和var的区别,为什么使用let? - let-settimeout
JavaScript,再次举例对比let和var的区别,为什么使用let?(图7-7)

分析理由的话,可能let有点天然的await的感觉?哈哈。苏南大叔自己瞎猜的。当然,这里还有个“几乎同时输出”的问题,所以,这个代码还是有提升的空间,待日后再次发掘了。

相关文章

总结

这里,再次总结了letvar的小小区别,大家可以看到:除了需要正准确的发现错误的目的外,在特定情形下,使用let才是程序正确运行的关键所在。这可以说是使用let的一个比较好的理由了吧?

觉得有收获的话,欢迎打赏评论转发。更多精彩文章,可以点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。