经典面试题之JavaScript for循环(var let)

 更新时间:2023年10月26日 11:58:16   作者:samllplum  
如果你也在面试找工作,那么也一定遇到过这道for循环打印结果的题,下面我们来探讨下,对经典面试题之js for循环相关知识感兴趣的朋友跟随小编一起看看吧

如果你也在面试找工作,那么也一定遇到过这道for循环打印结果的题,下面我们来探讨下

var循环

 for(var i = 0; i < 10; i++) {
    setTimeout(function(){console.log(i)}); 
 }

先把答案写出来

 下面来讲一下原因:

划重点

① var

②setTimeout()

重点1:你需要了解一下变量提升(hoisting)

var变量声明,无论发生在何处,都在执行任何代码之前进行处理。
用var声明的变量的作用域是它当前的执行上下文,它可以是嵌套的函数,也可以是声明在任何函数外的变量。如果你重新声明一个 JavaScript 变量,它将不会丢失其值。

然后上面的代码其实是这样的

var i = 0;
 
for (; i < 10; i++) {
  setTimeout(function () {
    console.log(i)
  })
}

重点2、setTimeout()

它总是在当前的同步代码执行完成后开始运行。(出自简书---一斤代码)

可以加入log进行跟踪验证:、

var i = 0;
 
for (; i < 10; i++) {
  console.log('+++++', i)
 
  setTimeout(function () {
    console.log(i)
  })
}

执行结果:

+++++ 0
+++++ 1
+++++ 2
+++++ 3
+++++ 4
+++++ 5
+++++ 6
+++++ 7
+++++ 8
+++++ 9
10
10
10
10
10
10
10
10
10
10

由此可见,当开始执行setTimeout()中的代码时for循环外面的变量i就已经变成了10,使用console.log(i)从作用域查找到的i值就是10,然后循环十次10。

let循环

ES6的let/const,简单来说let/const是声明块级作用域的变量

 for(let i = 0; i < 10; i++) {
    setTimeout(function(){console.log(i)}); 
 }

 下面是打印结果:

到此这篇关于经典面试题之JavaScript for循环(var let)的文章就介绍到这了,更多相关js for循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript单元测试ABC

    JavaScript单元测试ABC

    在服务器端的单元测试中,都有各种各样的测试框架,在JavaScript中现在也有一些很优秀的框架,但在本文中,我们将自己动手一步步来实现一个简单的单元测试框架
    2012-04-04
  • Cookies 和 Session的详解及区别

    Cookies 和 Session的详解及区别

    这篇文章主要介绍了Cookies 和 Session的详解及区别的相关资料,需要的朋友可以参考下
    2017-04-04
  • JavaScript清空数组元素的两种方法简单比较

    JavaScript清空数组元素的两种方法简单比较

    这篇文章主要介绍了JavaScript清空数组元素的两种方法简单比较,罗列了几种常见的情况javascript数组的方法,并且比较了其中的两种常见方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • javascript基本算法汇总

    javascript基本算法汇总

    这篇文章主要为大家详细介绍了javascript基本算法,包括输出奇偶数控制算法、冒泡排序等,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • javascript中使用replaceAll()函数实现字符替换的方法

    javascript中使用replaceAll()函数实现字符替换的方法

    第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符.
    2010-12-12
  • 使用 JScript 创建 .exe 或 .dll 文件的方法

    使用 JScript 创建 .exe 或 .dll 文件的方法

    JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer 中的 JavaScript,实际上是指 JScript。
    2011-07-07
  • 微信小程序实现富文本图片宽度自适应的方法

    微信小程序实现富文本图片宽度自适应的方法

    小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确,这篇文章主要介绍了微信小程序实现富文本图片宽度自适应的方法,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JavaScript中的错误处理全面指南

    JavaScript中的错误处理全面指南

    在JavaScript开发中,错误处理是一个不可忽视的重要环节,本文将深入探讨JavaScript中的错误处理机制,包括错误的类型、捕获与抛出错误的方法,需要的可以参考下
    2024-10-10
  • 详细介绍适用于小程序的jsEncrypt.js与jsencrypt.min.js加密库

    详细介绍适用于小程序的jsEncrypt.js与jsencrypt.min.js加密库

    jsencrypt.min.js是一个JavaScript库,它允许开发者在前端实现RSA加密和解密操作,而无需深入理解加密算法的底层实现,这篇文章主要介绍了适用于小程序的jsEncrypt.js与jsencrypt.min.js加密库的相关资料,需要的朋友可以参考下
    2025-10-10
  • JavaScript实现PDF加载与显示的技术指南

    JavaScript实现PDF加载与显示的技术指南

    在Web开发中,利用JavaScript技术加载和显示PDF文件是一种常见需求,尤其是在文档预览或在线阅读器的开发中,本文详细介绍了使用JavaScript库,特别是PDF.js,来实现PDF文件在浏览器中的加载和显示,需要的朋友可以参考下
    2025-08-08

最新评论