你知道js当中for循环当中的bug吗，如何解决它

时间：2021-04-20 20:27:23

本来以为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吗，想想差点自己都信了，但是，结果呢？

你知道js当中for循环当中的bug吗，如何解决它

结果明显是10，那么原因是什么呢？由于for循环中的i变量是用var声明的，此时的 i 在全部范围内都有效，所以每一次循环，新的i值会覆盖旧的i值，导致最后输出是最后一轮的i的值，当最后输出的时候i 已经变为10了

那么，有没有解决的办法呢，办法是有的，且听我慢慢道来：

方法一：闭包

再用闭包的时候，你首先要了解什么是闭包，所谓“闭包”，指得是拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），它可以访问局部变量，并且在访问的同时使局部变量的内存不被释放。那么，怎么用闭包呢，简单点来讲，就是嵌套函数。代码如下：

 

   var arr = [];
    for(var i = 0;i<10;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<10;i++) {
        arr2[i] = function() {
            console.log(i)
        }
    }
    arr[3]();


变量i是let声明的，当前i只在本轮循环中有效所以每次循环的i其实是一个新的变量，所以最后输出的是3

才疏学浅，目前只发现了这两种方法，如果有新方法或者不对的地方，请指教。

 

标签：

相关文章