你知道js当中for循环当中的bug吗,如何解决它
本来以为for循环可以很好的解决一切问题,直到今天遇到了这段代码,刷新了我对for循环的认识,话不多说,直接上代码
var arr = [];
for(var i = 0;i<10;i++) {
arr[i] = function()
{
console.log(i)
}
}
arr[3]();
大家看上面这段代码,我先声明了一个空数组,然后把它放在循环里面,循环添加函数作为arr数组的数据,第一印象看到的时候,肯定不少人会毫不犹豫的说出3这个答案,
因为索引为3的时候console.log刚好是3吗,想想差点自己都信了,但是,结果呢?

结果明显是10,那么原因是什么呢?由于for循环中的i变量是用var声明的,此时的 i 在全部范围内都有效,所以每一次循环,新的i值会覆盖旧的i值,导致最后输出是最后一轮的i的值,当最后输出的时候i 已经变为10了
那么,有没有解决的办法呢,办法是有的,且听我慢慢道来:
方法一:闭包
再用闭包的时候,你首先要了解什么是闭包,所谓“闭包”,指得是拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),它可以访问局部变量,并且在访问的同时使局部变量的内存不被释放。那么,怎么用闭包呢,简单点来讲,就是嵌套函数。代码如下:
var arr = [];
for(var i = 0;i<;i++){
(function(val) {
arr[i] = function() {
console.log(val)
}
})(i)
}
arr[3]();
将for的循环内容方法放在一个自调用的匿名函数里面,这个时候的val是由 i 来传递的,此时的变量val可以被访问,而且内存不被释放,也就是说,val没有覆盖一说,所以自然而然的输出结果是3
方法二:ES6当中的let
ES6现在的推行范围不是很广,而且许多低版本的浏览器无法识别ES6,所以此方法用的时候是有局限性的,建议你把浏览器的版本升为高版本;
好嘞,言归正真,我们先来了解一下什么是ES6当中的let:
let全称为代码块作用域,顾名思义他是作用域代码块的,它和var的用法相似,但是在同一个代码快中不能出现重名的let变量;代码如下:
var arr = [];
for(let i = 0;i<;i++) {
arr2[i] = function() {
console.log(i)
}
}
arr[3]();
变量i是let声明的,当前i只在本轮循环中有效所以每次循环的i其实是一个新的变量,所以最后输出的是3 才疏学浅,目前只发现了这两种方法,如果有新方法或者不对的地方,请指教。
你知道js当中for循环当中的bug吗,如何解决它的更多相关文章
- Chrome谷歌浏览器中js代码Array.sort排序的bug乱序解决办法
[现象] 代码如下: var list = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v ...
- sql 游标循环当中重新赋值
sql 游标循环当中的变量必须重新赋值不然变量的值就是前次循环的值
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js种的循环语句
//js种的循环语句 //while与do while的区别是while是满足条件后才执行 //do while是不管满不满足条件都会执行一次 //for 循环与while,do while相比循环结 ...
- js中的循环语句
js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) { //statements;} var a=1,b=0; whil ...
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- js中的循环
js中的循环是我们经常要用到的,现在进行一些归纳. 一.javascript种的循环. 1.循环对象 var o = { name: 'Jack', age: 20, city: 'Beijing' ...
随机推荐
- docker探索-在centos6.5中安装docker(三)
1.要求 centos6.5中需要64位 centos6.5的linux内核需要3.x(centos的内核是2.6) 2.查看当前系统的位数和版本 [root@jacky jacky]# uname ...
- activiti5.13工作流系列(一)-初识
1.什么是工作流? 工作流就是让多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程,工作流由实体(Entity).参与者(Participant).流程定义(Flow Definition) ...
- USB 之传输编码格式 NRZI 介绍
记录NRZI (Non-Return-to-Zero Inerted code) 非归零翻转编码,之前,我先稍微记录一下他的前身. RZ 编码(Return- to - zero coding) RZ ...
- 4种用于构建嵌入式linux系统的工具_转
转自:4种用于构建嵌入式linux系统的工具 Linux 被部署到比 Linus Torvalds 在他的宿舍里开发时所预期的更广泛的设备.令人震惊的支持了各种芯片,使得Linux 可以应用于大大小小 ...
- windows server 2008 域控安装
windows server 2008 域控安装:1.dns安装,安装过程会提示.net frame 3.51安装 3.域控安装 原文:地址 http://wenku.baidu.com/link?u ...
- C#递归累计到父行
搞了半天 写了一个算法,希望能帮到需要的朋友 效果如下 水电费用是由 就是部门水费和电费累加的,而部门水费由科室水费累加起来的 表结构 DataTable dt = new DataTable(); ...
- DataTable使用技巧:DataRowState
DataGridView:获取 DataRow 对象的状态,共有5个枚举值. Added 该行已添加到 DataRowCollection 中,AcceptChanges 尚未调用. Deleted ...
- r函数知识总结
1. rbind(), cbind(): 构造.合并vector 或matrix为一个矩阵:cbind(1, 1:10) ----默认列合并, rbind(1, 1:10) ----行合并(or构造 ...
- 【转】MFC WM_CTLCOLOR 消息
WM_CTLCOLOR消息用来完成对EDIT, STATIC, BUTTON等控件设置背景和字体颜色, 其用法如下: 1.首先在自己需要设置界面的对话框上点击右键-->建立类向导-->加入 ...
- ‘,’之后要留空格,如 Function(x, y, z)
‘,’之后要留空格,如 Function(x, y, z).如果‘;’不是一行的结束 符号,其后要留空格,如 for (initialization; condition; update). #inc ...