简单了解JavaScript变量or循环中的var和let

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了javascript变量or循环中的var和let详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,下面一起来看一下,希望对大家有帮助。

简单了解JavaScript变量or循环中的var和let

【相关推荐:javascript视频教程、web前端】

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

// 一道经典面试题:var funcs = [];for (var i = 0; i  My value: 3> My value: 3> My value: 3*/

登录后复制

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

var声明的作用域是函数作用域而不是块级作用域,因此在for循环的循环体之外依然能访问到在初始化for循环时定义的var变量。且在循环结束后访问时,访问到的var变量是已经完成循环后的值。

解决方法

使用闭包

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

立即学习“Java免费学习笔记(深入)”;

var funcs = [];for (var i = 0; i 

使用let变量初始化

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

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

var funcs = [];// 2. letfor (let i = 0; i 

从这里也可以看出,使用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  My value: 5*/

登录后复制

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

var funcs = [];for (var i = 0; i  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  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视频教程、web前端】

以上就是简单了解JavaScript变量or循环中的var和let的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2698416.html

(0)
上一篇 2025年3月7日 18:49:48
下一篇 2025年3月6日 06:49:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 分享12道面试题,看你懂不懂JavaScript!

    你到底懂不懂javascript?下面本篇文章给大家整理分享12道javascript面试题,来做做这12道面试题试试,看看能不能全部答对! JavaScript 是每一个前端开发者都应该掌握的基础技术,但是很多时候,你可能并不完全懂 Ja…

    2025年3月7日
    200
  • JavaScript如何改变this指向?三种方法浅析

    javascript如何改变this指向?下面本篇文章给大家介绍一下js改变this指向的三种方法,希望对大家有所帮助! 一、this指向 点击打开视频讲解更加详细 this随处可见,一般谁调用,this就指向谁。this在不同环境下,不同…

    2025年3月7日
    200
  • 一文带你熟练使用最常用的ES6

    本篇文章带大家聊聊es6,带你30分钟熟练使用最常用的es6,还不学是等着被卷死? 一. 关于ES6 了解一门技术或者语言,最好的方法就是知道它能做些什么  ES6 , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范 那么…

    2025年3月7日
    200
  • javascript怎么求素数

    求素数的方法:1、遍历1~n区间中的所有自然数给n来除,若余数为0则表示该数n不是素数,否则就是素数,语法“for(i=2;i 本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。 素数的概念 素数又…

    2025年3月7日 编程技术
    200
  • JavaScript五个常用功能示例(总结分享)

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了五个常用功能及其示例,包括了计时器、流程控制、闭包应用、arguments剩余参数以及二次封装函数的相关问题,下面一起来看一下,希望对大家有帮助。 【相关推荐:javas…

    2025年3月7日
    200
  • JavaScript怎么拿捏箭头函数

    本篇文章给大家带来了关于javascript视频教程的相关知识,其中主要介绍了关于箭头函数的相关问题,包括了语法规则、简写规则、常见应用等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:JavaScript视频教程、web前端】 …

    2025年3月7日
    200
  • JavaScript中Number类型常见误区背后原理及解决办法

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于number类型的相关知识,包括了number类型的常见误区背后原理以及解决方法等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:JavaScript视频教程…

    2025年3月7日 编程技术
    200
  • 通过示例探索 9 个常用的 javascript 函数

    函数是 JavaScript 最重要的方面之一。如果没有 JavaScript 函数,它将非常有限。javascript 中的函数用于执行特定的操作或任务。 它们可以写入代码中,也可以使用 Function 构造函数创建。函数可以定义在其他…

    2025年3月7日
    200
  • JavaScript万字面试总结

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了一些面试常见的问题总结,下面一起来看一下,希望对大家有帮助。 【相关推荐:JavaScript视频教程、web前端】 一、JS基础 1.1 Js有哪些数据类型 JavaS…

    2025年3月7日 编程技术
    200
  • 【前端必备】16个实用工具/网站分享

    推荐16个前端必备的实用工具与网站。总结分享一些日常工作中比较实用的软件和网站,这些网站你平时工作中大概率是会用到的,感觉不错的话可以点赞收藏 1. GitHub Desktop 对于新手来说,要记住那么多git命令可能有点困难,建议新手用…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论