本来以为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吗,如何解决它的更多相关文章

  1. Chrome谷歌浏览器中js代码Array.sort排序的bug乱序解决办法

    [现象] 代码如下: var list = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v ...

  2. sql 游标循环当中重新赋值

    sql 游标循环当中的变量必须重新赋值不然变量的值就是前次循环的值

  3. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js种的循环语句

    //js种的循环语句 //while与do while的区别是while是满足条件后才执行 //do while是不管满不满足条件都会执行一次 //for 循环与while,do while相比循环结 ...

  5. js中的循环语句

    js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; whil ...

  6. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  7. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  8. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  9. js中的循环

    js中的循环是我们经常要用到的,现在进行一些归纳. 一.javascript种的循环. 1.循环对象 var o = { name: 'Jack', age: 20, city: 'Beijing' ...

随机推荐

  1. MFC中Carray的使用

    CArray 需要包含的头文件 <afxtempl.h> CArray类支持与C arrays相似的数组,但是必要时可以动态压缩并扩展.数组索引从0开始.可以决定是固定数组上界还是允许当添 ...

  2. 网络虚拟化(SDN,NFV..)和企业骨干网的演化

    本来昨天就规划了今天的这篇文章,无奈昨天中午自己喝了将近一瓶的52度二锅头...晚上想着今天怎么着也完了,要颓废难受一天了...没想到早上居然一点都不难受了.于是就写下了本文.正文之前,还是做个广告, ...

  3. 通过SiteMapDataSource动态获取SiteMap文件进行权限设置

    最近做一个用ASP.NET做一个小项目,用户不是很多,功能不算太复杂,但是做到权限控制的时候有点犯难,这么一个小系统如果全部做一个大的复杂的权限控制觉得成本不划算,打算用Treeview ,根据不同的 ...

  4. kubernetes外部访问的几种方式

    1:用的最多的是nodePort,如下nginx的service,将type设置成NodePort,同时nodePort设置成30010(k8s为了不与宿主机的端口冲突,默认限制了30000以下的端口 ...

  5. 决策树---ID3算法(介绍及Python实现)

    决策树---ID3算法   决策树: 以天气数据库的训练数据为例. Outlook Temperature Humidity Windy PlayGolf? sunny 85 85 FALSE no ...

  6. eclipse安装使用教程

    eclipse安装使用教程 很多人都知道要用eclipse来做java开发,但很多的新手朋友却不知道怎么下载和安装eclipse. 下面给你介绍一下怎么下载和安装eclipse来用于自己的学习或者项目 ...

  7. Hibernate-基础入门案例,增删改查

    项目结构: 数据库: /* SQLyog Ultimate v12.09 (64 bit) MySQL - 5.5.53 : Database - hibernate01 ************** ...

  8. 采用thinkphp中f方法实现快速缓存实例

    一般使用文件方式的缓存就能够满足要求,而thinkphp还提供了一个专门用于文件方式的快速缓存方法f方法. 由于采用的是php返回方式,所以其效率较s方法较高. f方法具有如下特点: 1.简单数据缓存 ...

  9. 关于Cocos2d-x运行项目时弹框崩溃的解决

    想要运行工程的时候,跳出一个框说停止cantnot open the window,还提到什么GLVM之类的,这是显卡驱动出现问题,如果是远程连接电脑的话,很有可能就是用来远程连接的那台电脑的显卡驱动 ...

  10. Spring in Action 4th 学习笔记 之 AOP

    前提:本文中的AOP仅限于Spring AOP. 先说说为什么需要AOP 最简单的一个例子就是日志记录,如果想记录一些方法的执行情况,最笨的办法就是修改每一个需要记录的方法.但这,真的很笨... 好的 ...