Js变量or循环中的var和le的介绍

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

  • 解决方法

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

    • 总结

      在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循环会将圆括号内的变量值往循环体内传递。

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

      Js变量or循环中的var和le的介绍

      可以看到,规范对于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变量也会如期完成自己作为循环变量的使命。

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

      Js变量or循环中的var和le的介绍

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

      perIterationLets是什么?

      Js变量or循环中的var和le的介绍

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

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

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

      perIterationLets被用来做什么的?

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

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

      Js变量or循环中的var和le的介绍

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

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

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

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

      Js变量or循环中的var和le的介绍

      逐步分析一下方法: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循环会将圆括号内的变量值往循环体内传递。

      以上就是Js变量or循环中的var和le的介绍的简略介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注亿速云行业资讯频道哦!

      文章标题:Js变量or循环中的var和le的介绍,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/24533

      (0)
      打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
      亿速云的头像亿速云
      上一篇 2022年9月13日 下午11:29
      下一篇 2022年9月13日 下午11:31

      相关推荐

      • 猫鼠服务器是什么公司

        猫鼠(Cats and Mouse)服务器可能是您要询问的一种服务器类型,或者是一个特定服务器名称的误解,但在知识库中并无明确的记录表示猫鼠服务器代表着一个具体的公司。如果您是在询问一个公司或品牌名为“猫鼠”的服务器供应商,可能需要提供更多信息或者具体的上下文才能得出准确答案。如果您实际上指的是一个…

        2024年4月25日
        7800
      • 推理服务器作用是什么

        摘要 推理服务器的作用是1、执行模型推理任务、2、优化推理性能、3、降低延迟、4、提高吞吐量、5、支持多种模型格式、6、提供模型管理与扩展功能。 在这些核心功能中,优化推理性能尤为关键,因为它直接关系到模型部署后的效率和稳定性。推理服务器通过使用专门的算法和硬件加速技术,大幅提高处理速度,同时保持高…

        2024年4月25日
        9300
      • 服务器管理的好处是什么

        摘要 服务器管理的好处包括: 1.提高安全性、2.增强性能、3.确保数据完整性、4.优化资源利用,等重要方面。特别是提高安全性,这是服务器管理中的关键部分,为防止未授权访问、数据泄露和其他潜在威胁,定期对服务器进行维护和更新至关重要。此外,安装安全软件、监控系统漏洞、及时打补丁和执行严格的访问控制策…

        2024年4月25日
        8400
      • 云服务器存储资料是什么

        摘要 云服务器存储资料是1、通过网络访问的远程服务器上存储的数据,其依赖于2、云计算技术,使得数据存取更加灵活和高效。在这两点中,通过网络访问的远程服务器存储意味着用户无需对物理硬件进行管理或投入高额的初期成本,而是通过互联网连接到远程数据中心,实现数据存储和管理。这种模式不仅降低了企业或个人的技术…

        2024年4月25日
        8500
      • 下挂的服务器叫什么

        摘要:下挂的服务器通常被称作1、边缘服务器或2、即服务外设。其中,边缘服务器主要用于提高网络服务的访问速度和提升用户体验。通过布局在接近最终用户的地理位置上,这种服务器能够缓存内容,减少数据传输的延迟,加快载入速度,有效缓解主服务器的负荷。边缘服务器尤其适用于内容交付网络(CDN)和大数据分析等场景…

        2024年4月25日
        9900
      注册PingCode 在线客服
      站长微信
      站长微信
      电话联系

      400-800-1024

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

      分享本页
      返回顶部