JavaScript经典面试题 —— 解决循环打印问题
循环打印问题是面试中经典的题目，一般会给出代码，让我们解释原因，并给出若干解决方案。
1. 题目分析
以下代码运行后会打印什么？
答案：6 6 6 6 6
for (var i = 1; i <= 5; i++) {setTimeout(function () {console.log(i);}, 0);
}
虽然每个for循环中定时器设置的时间都是0，但由于JavaScript是单线程 eventLoop机制，setTimeout是异步任务，遇到setTimeout函数时，JavaScript会将其放入任务队列中，待同步任务执行完毕后，才执行任务队列中的异步任务。
又因为setTimeout函数也是一种闭包，往上找它的父级作用域链是window，而变量i是用var声明的，是window上的全局变量，所以此时变量i的值已经变成i = 6了，最后执行setTimeout时，当然会输出5个6了！
2. 解决办法
如果就是要输入1 2 3 4 5，该怎么办呢？
1. 立即执行函数
立即执行函数可以锁定参数值，传入每次循环的当前索引，从而锁定索引值。
for (var i = 1; i <= 5; i++) {(function (i) {setTimeout(function () {console.log(i);}, 0);})(i);
}
2. 使用let声明（块级作用域）
利用JavaScript的块级作用域，就不用这么麻烦了。如果for循环使用块级作用域变量关键字，循环就会为每个循环创建独立的变量，从而每次打印都会有正确的索引值。
for (let i = 1; i <= 5; i++) {setTimeout(function () {console.log(i);}, 0);
}
3. 定时器传入第三个参数
一般我们使用setTimeout都会使用2个参数，回调函数和延迟时间，但setTimeout是有第三个参数的。
一旦定时器到期，会将第三个参数作为参数传递给回调函数。这样打印时，也能得到正确的索引值。
for (var i = 1; i <= 5; i++) {setTimeout(function (i) {console.log(i);},0,i);
}
JavaScript经典面试题 —— 解决循环打印问题相关推荐
- 50道 JavaScript 经典面试题汇总篇
web前端教程 用大白话,来讲编程 有很多小伙伴都跟我提过,为什么之前<经典面试题>系列不像<趣味ES6>和<vue基础系列>一样,来个汇总篇呗,免得想看的话要一道 ...
- 20道JavaScript经典面试题
该篇文章整理了一些前端经典面试题,附带详解,涉及到JavaScript多方面知识点,满满都是干货-建议收藏阅读 前言 如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,文章公众号首发,关注 前端 ...
- php基础面试选择题,php面试之javascript经典面试题
兄弟连php面试频道整理了javascript的10个面试题.快来测试一下你是否已经全部掌握JavaScript核心技能,在面试中你一定可以用得到. 1介绍js的基本数据类型 Undefined.Nu ...
- 前端javascript经典面试题集合（2020年最新）
1. call和apply的区别是什么,哪个性能更好一些 fn.call(obj, 10, 20, 30) fn.apply(obj, [10, 20, 30]) call性能要比apply性能好一点 ...
- Web前端面试之JavaScript典型面试题及答案
JavaScript是Web前端三要素之一,是互联网上最流行的脚本语言.一个合格的Web前端工程师一定要掌握JavaScript,而企业在招聘前端人员时也会考察其对JavaScript的掌握.接下来就 ...
- for循环经典面试题
for循环经典面试题 var arr=[];for(var i=0;i<2;i++){ //先是进行循环arr[i]=function(){ //进到这里,arr[0]=function(){c ...
- JavaScript前端经典面试题之ES6面试题汇总es6
推荐阅读: vue3面试题:最新vue3.0前端经典面试试题及答案(持续更新中--)_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使 ...
- 高频面试题：Spring 如何解决循环依赖？
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 在关于Spring的面试中,我们经常会被问到一个问题:Spring ...
- Web前端经典面试题-JavaScript
Web前端经典面试题-JavaScript 看看银行卡余额,看看工资条,看看房价,动力就来了,大二狗,加油~~ JavaScript 原型链.类.继承.作用域.闭包.js运行机制/单线程.js数据类型 ...
最新文章
- php cms拥有博客功能,20款最为知名的开源PHP CMS
- Docker源码分析（一）：Docker架构
- handler消息机制
- 【Android 进程保活】应用进程拉活 ( 系统 Service 机制拉活 | Service 组件 onStartCommand 方法分析 | 源码资源 )
- Android WebView 和 javaScript的互相调用(三)
- 【Linux】23_网络管理物理层详解
- centos7 编译安装nginx 设置自启动服务 支持https
- mac终端操作文件或文件夹(持续更新)
- java 匹配最后一次出现的字符_在Java中查找字符串中字符的最后一次出现
- [解决]WebLogic跨域访问安全问题
- 使用Controller.UpdateModel方法来更新ViewModel
- EMS邮箱数据库常用命令（二）
- 五位数电话号码以及中国各市区号
- .NET获取微信openid
- 模拟信号幅度调制之AM
- Android判断首次安装
- 【R语言】Studio的下载及安装及RStudio打开后空白的解决
- Storport MSI (Message Signaled Interrupts)
- 积木机器人拼装图恐龙图纸_App Store: 机器人积木模型--恐龙积木拼装对战游戏...
- 大数据-------元数据管理
热门文章
- python移动自动化测试面试视频_Python-自动化测试面试
- 中国经济回暖与华尔街的阴谋
- Obsidian 同步 Remotely Save S3 配置指南
- YDOOK：CSDN 1024 程序员节日专文：Ubuntu remotely install cuda
- SQL存储过程来调用webservice
- Apollo（分布式配置中心）核心概念及核心功能介绍
- uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型 - 大总结
- 中国电信天翼物联加入开源鸿蒙社区
- Android App Icon 替换
- Java实现视频(mp4/flv/..)及图片(jpg/jpeg/png/..)给前端调用