• 你知道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<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

    才疏学浅,目前只发现了这两种方法,如果有新方法或者不对的地方,请指教。
  • 相关阅读:
    CodeforcesBeta Round #19 D. Points 离线线段树 单点更新 离散化
    挑战练习题3.3 POJ 2886 Who Gets the Most Candies? 树状数组
    hdu4288 Coder 离线线段树 单点更新 区间求和 离散化?
    zoj 1610 Count the Colors 线段树 区间更新
    51nod 1307 绳子与重物 二分+dfs / 并查集
    51nod 1116 K进制下的大数 暴力/数论
    Wannafly2016-12-27 SPOJ-INTSUB 数学
    C++——Vector
    LEDE Project
    Raspberry Pi 3 with Openwrt
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/6492478.html
Copyright © 2020-2023  润新知