JavaScript变量or循环中的var和let怎么使用

在for循环中使用var声明初始化带来的问题

// 一道经典面试题:var funcs = [];for (var i = 0; i < 3; i++) {  funcs[i] = function() {    console.log("My value: " + i)  };}for (var j = 0; j < 3; j++) {  funcs[j]();}/*输出结果:> My value: 3> My value: 3> My value: 3*/

会出现这种现象的原因就是:

  • var声明的作用域是函数作用域而不是块级作用域,因此在for循环的循环体之外依然能访问到在初始化for循环时定义的var变量

  • 且在循环结束后访问时,访问到的var变量是已经完成循环后的值。

解决方法

使用闭包

ES5时代的解决办法就是通过IIFE创建一个闭包,把变量在函数体内保存起来,再执行函数时就不会去访问外层的var变量了。

var funcs = [];for (var i = 0; i < 3; i++) {    // 1. 闭包    funcs[i] = (function (i) {        return function () {            console.log("My value: " + i);        };    })(i);}for (var j = 0; j < 3; j++) {    funcs[j]();}

使用let变量初始化

let声明是块级作用域,循环体内的变量不会泄露到块语句之外。

因此在循环结束后再去访问变量i时,没有外层作用域变量的干扰,访问到的自然就是函数体内保存下来的变量值。

var funcs = [];// 2. letfor (let i = 0; i < 3; i++) {  funcs[i] = function() {    console.log("My value: " + i);  };}for (var j = 0; j < 3; j++) {  funcs[j]();}

从这里也可以看出,使用var来初始化for循环本身就是违反直觉的。

用来初始化for循环的变量理应是for循环的局部变量,在循环结束以后这个变量就应该没有意义了才对。

但是如果使用var来初始化,由于var声明的变量的作用域是函数作用域,这个初始化变量就和for循环处于同一作用域了,不受for循环的限制。

本应是for循环的局部变量,却暴露在了和for循环同层的作用域,且变量值已经被循环次数改变,自然会影响循环结束后其他代码对该变量的访问。

而如果使用let来初始化for循环,就不会有这个困扰了,因为let声明的作用域是块级作用域,这个初始化变量会如愿成为for循环的局部变量。

for循环怎么处理用let和var声明的初始化变量?

先上结论:

  • 用var初始化时,for循环会直接使用创建的var初始化变量;

  • 用let初始化时,圆括号会自成一个作用域,for循环会将圆括号内的变量值往循环体内传递。

首先看名列前茅个结论规范是这么说的:

JavaScript变量or循环中的var和let怎么使用

可以看到,规范对于var初始化变量没有什么特别的处理,直接就拿来用了。 此时这个变量就是个普通的var变量,和for循环处于同一作用域。

我们用代码来佐证一下:

var funcs = [];for (var i = 0; i < 3; i++) {    // !!!重复声明了一个同名的var变量    var i = 5;    console.log("My value: " + i);}/*只会输出一次:> My value: 5*/

var可以重复声明且值会覆盖,因此在循环体内再声明一个var i = 5,循环变量被作没了,会直接跳出for循环。

var funcs = [];for (var i = 0; i < 3; i++) {    // 用let声明了一个和循环变量同名的变量    let i = 5;    console.log("My value: " + i);}/*一共输出了3次:> My value: 5> My value: 5> My value: 5*/

初始化var变量在函数作用域,循环体内的let变量在块作用域,循环体内优先访问块作用域里的let变量,因此循环体内的i值会被覆盖。

又由于var变量实际上处于let变量的外层作用域,因此let变量没有重复声明,不会报错;var变量也会如期完成自己作为循环变量的使命。

再看第二个结论,同样是先看规范:

很明显可以发现,使用let来初始化会比使用var多了一个叫perIterationLets的东西。

perIterationLets是什么?

从规范上可以看到,perIterationLets来源于LexicalDeclaration(词法声明)里的boundNames

而这个LexicalDeclaration(词法声明),其实就是我们用来初始化的let声明。

可以理解为,如果我们用let声明来初始化for循环,for循环内部不会像直接使用var变量一样来直接使用let变量,而是会先把let变量收集起来,以某种形式转换为perIterationLets,再传递给循环体。

perIterationLets被用来做什么的?

从规范上可以看到,我们的let变量以perIterationLets的身份,作为参数被传进了ForBodyEvaluation,也就是循环体里。

在循环体里,perIterationLets只做了一件事情,那就是作为CreatePerIterationEnvironment的参数:

从字面上理解,CreatePerIterationEnvironment意思就是每次循环都要创建的环境

要注意,这个环境不是{...}里的那些执行语句所处的环境。 {...}里的执行语句是statement,在规范里可以看到,stmt有自己的事情要做。

这个环境是属于圆括号的作用域,也就是我们定义的let初始化变量所在的作用域。

再看看每次循环都要创建的环境被用来干嘛了:

逐步分析一下方法:CreatePerIterationEnvironment这个

  • 首先,把当前执行上下文的词法环境保存下来,作为lastIterationEnv(上一次循环时的环境)

  • 创建一个和lastIterationEnv同级的新作用域,作为thisIterationEnv(本次循环的环境);

  • 遍历我们定义的let初始化变量,也就是perIterationLets,在thisIterationEnv(本次循环的环境)里创建一个同名的可变绑定,找到它们在lastIterationEnv(上一次循环时的环境)里的终值,作为这个同名绑定的初始值;

  • 最后,将thisIterationEnv(本次循环的环境)交还给执行上下文。

简而言之就是,for循环会在迭代之前创建一个和初始化变量同名的变量,并使用之前迭代的终值将这个变量初始化以后,再交还给执行上下文

用伪代码理解一下这个过程就是:

到这里又有一个问题,既然把圆括号内的变量向循环体里传递了,那如果在循环体里又重复声明了一个同名变量,算不算重复声明,会不会报错?

答案是不会。

因为CreatePerIterationEnvironment在执行时,在新环境里创建的是一个可变的绑定,因此如果在循环体内重复声明一个名字为i的变量,只是会影响循环体内执行语句对i值的访问。

var funcs = [];for (let i = 0; i < 3; i++) {    // !!!用let声明了一个和循环变量同名的变量    let i = 5;    console.log("My value: " + i);}/*一共输出了3次:> My value: 5> My value: 5> My value: 5*/

总结

在for循环中使用var声明来初始化的话,循环变量会暴露在和for循环同一作用域下,导致循环结束后还能访问到循环变量,且访问到的变量值是经过循环迭代后的值。

解决这个问题的方法如下:

  • 使用闭包将循环变量的值作为局部变量保存起来;

  • 使用ES6的let声明,将循环变量的作用域限制在for循环内部,初始化变量始终是for循环的局部变量,不能在外界被访问到。

for循环是怎么处理用let和var声明的初始化变量的?

  • 用var初始化时,for循环会直接使用创建的var初始化变量;

  • 用let初始化时,圆括号会自成一个作用域,for循环会将圆括号内的变量值往循环体内传递。

以上就是关于“JavaScript变量or循环中的var和let怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

文章标题:JavaScript变量or循环中的var和let怎么使用,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/24968

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月15日 上午1:37
下一篇 2022年9月15日 上午1:38

相关推荐

  • 怎样进行Apache Solr最新RCE漏洞分析

    引言 Apache Solr爆出RCE 0day漏洞(漏洞编号未给出),这里简单的复现了对象,对整个RCE的流程做了一下分析,供各位看官参考。 漏洞复现 复现版本:8.1.1 实现RCE,需要分两步,首先确认,应用开启了某个core(可以在Core Admin中查看),实例中应用开启了mycore,…

    2022年9月15日
    53000
  • coreldraw如何编辑文字

    coreldraw编辑文字的方法 1、首先找到你要修改的cdr文件。 2、打开软件,点击文件,打开。 3、在软件的左侧找到文字工具。 4、鼠标放到需要修改的文字上面,进行修改。 5、再次点击上方菜单栏的文件,保存即可。 感谢各位的阅读,以上就是“coreldraw如何编辑文字”的内容了,经过本文的学…

    2022年9月26日
    85200
  • C#非托管泄漏中HEAP_ENTRY的Size为什么会对不上

    一:背景 1. 讲故事 前段时间有位朋友在分析他的非托管泄漏时,发现NT堆的_HEAP_ENTRY 的 Size 和 !heap 命令中的 Size 对不上,来咨询是怎么回事? 比如下面这段输出: 0:000> !heap 0000000000550000 -aIndex Address Na…

    2022年9月22日
    42600
  • windows驱动精灵dx如何修复

    驱动精灵dx修复方法: 1、打开驱动精灵点击“百宝箱”。 2、点击右下方的“软件管理”。 3、在搜索栏中输入“Directx”。 4、找到“Directx 修复工具”点击“安装”即可。 感谢各位的阅读,以上就是“windows驱动精灵dx如何修复”的内容了,经过本文的学习后,相信大家对windows…

    2022年9月10日
    44700
  • Word首页不显示页码怎么设置

    首页不显示页码设置方法: 1、首先打开word文档。 2、然后点击上面菜单栏中的“插入”。 3、之后去点击功能里面的“页码”。 4、最后先去选择当前的页码, 然后点击右侧的删除键即可。 到此,相信大家对“Word首页不显示页码怎么设置”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关…

    2022年8月31日
    92700
  • Redis怎么实现保存对象

    redis保存对象 redis数据结构 String——字符串 Hash——字典 List——列表 Set——集合 Sorted Set——有序集合 redisTemplate.opsForValue();//操作字符串redisTemplate.opsForHash();//操作hashredis…

    2022年9月2日
    45400
  • windows edge浏览器和chrome的优点是什么

    edge浏览器chrome哪个好: 答:新版的edge浏览器更好一点。 在使用JavaScript测试后,edge浏览器以平均值103.5击败了谷歌Chrome,这说明它能够更好地处理开发者遇到的性能问题。 edge浏览器和chrome浏览器的优点: edge浏览器: 1、速度更快 edge浏览器已…

    2022年9月8日
    1.1K00
  • word如何生成目录

    word生成目录的方法: 1、首先打开你的Word文档,并进入或者输入一些内容。 2、选择里面的内容,点击开始中的标题1、标题2等, 并将其分别设置为不同级别的标题。 这一步一定要完成不然没法插入目录。 3、然后点击引用-目录,会出现下拉菜单,选择想要插入的目录样式, 当然也可以自定义目录样式,也可…

    2022年9月20日
    82800
  • css如何实现​左下角

    左下角 #triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;} 以上是“css如何实现左下角”这篇文章的所有内容,感谢各位的…

    2022年9月1日
    47400
  • css如何实现右上角

    右上角 #triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent;} 感谢你能够认真阅读完这篇文章,希望小编分享的“css如何实现右上角”这篇…

    2022年9月1日
    72100
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部