关于var在for循环遇到的问题解决
更新时间：2021年07月09日 10:09:30 作者：stevechow
这篇文章主要给大家介绍了关于var在for循环遇到的问题的几种解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
前言
var是ES5定义变量的一种声明方式，一直听说var声明变量，存在循环变量泄漏为全局变量问题，但总是想不明白这个“全局”有什么影响，还有，到底什么时候输出的结果是递增/减的值，什么时候输出一样的值，也不清楚。
问题复现
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i)
}, i * 1000)
}
预期效果：12345
打印结果：66666
解决方式
闭包
for (var i = 1; i <= 5; i++) {
(function (j) {
setTimeout(function timer() {
console.log(j)
}, j * 1000)
})(i)
}
setTimeout 第三参数
for (var i = 1; i <= 5; i++) {
setTimeout(
function timer(j) {
console.log(j)
},
i * 1000,
i
)
}
使用 let 定义 i
for (let i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i)
}, i * 1000)
}
let
关于let，记住：当前的i只在本轮循环有效，每一次循环的i其实都是一个新的变量。
JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
总结
到此这篇关于var使用for循环遇到的问题解决的文章就介绍到这了,更多相关var for循环问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
这篇文章主要介绍了详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
在写一些关于图片操作的代码的时候，一般都需要在图片加载完成之后再执行程序。然而在Chorme中（貌似Safari也是）对window.onload的理解与IE和FF有偏差。2010-03-03
我们有两种常见的传参方式： JSON 对象格式和 formData 格式，但是一些场景是需要我们对这两种数据格式进行转换的，这篇文章主要介绍了json对象和formData相互转换的方式详解,需要的朋友可以参考下2023-02-02![Bootstrap 中data-[*] 属性的整理](//img.jbzj.com/images/xgimg/bcimg3.png)
本文给大家收藏整理了关于Bootstrap 中data-[*] 属性的相关知识，感兴趣的朋友一起看看吧2018-03-03
这篇文章主要为大家分享一下18个在项目中使用很高频的JS工具方法，希望大家能够知其然也知其所以然，不要只会调用 api，也要会写 api，快跟随小编一起学习一下吧2022-04-04
这篇文章主要为大家详细介绍了原生JavaScript实现九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
webpack中的filename 和 chunkFilename 的区别实例解析
filename 指列在 entry 中,打包后输出的文件的名称,chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称,这篇文章主要介绍了webpack中的filename 和 chunkFilename 的区别实例解析,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了javascript编写贪吃蛇游戏的代码，非常简单，也很好玩，有需要的童鞋们可以参考下。2015-07-07
在现代Web应用程序中,日期选择器是一个非常常见的组件,用户可以使用它来选择特定的日期,在本篇文章中,我们将使用JavaScript和HTML来创建一个简单但功能强大的日期选择插件,这个日期选择插件是比较考验Js基本功的,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了JavaScript解构赋值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
![Bootstrap 中data-[*] 属性的整理](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论