github地址:https://github.com/LiangJingxuan

javascript利用闭包实现迭代器轮询数组中的元素

闭包:首先是全局作用域,在js中函数以外的作用域称为全局作用域,可以包含各种变量和函数。每个函数又会有一块自己的作用域,用来存储该函数私有的变量及函数,这称为局部作用域。全局作用域可以访问函数以外的一切变量及函数,但不能访问函数内私有的变量,如果我们想从外面访问函数内部变量时,我们可以在函数内部定义一个子函数,这样,子函数就可以访问父函数中的变量,当子函数访问其父函数中的变量,此时就产生了一个闭包。

通常情况下,我们都知道如何利用循环来遍历一个简单数组,但是有时候我们需要面对更为复杂的数据结构,他们通常会有着与数组截然不同的序列规则,这时候需要将"下一个"的复杂逻辑封装成易于使用的next()函数。

这里定义一个函数,接受数组输入的初始函数,我们在其中定义了一个私有指针,该指针会始终指向数组中的下一个元素:

function setup(x){
    var i=0;
    return function(){
        return x[i++];
    }
}

然后,用一组数据调用setup方法就会产生所需要的next()方法:

var data=['foo','bar','baz','goo'];
var next=setup(data);

下面,每次调用next方法时,就会得到数组中的一个元素,当数组中的个数调用结束后在次调用就会得到undefined:

next();  // foo
next(); // bar
next(); // baz
next(); // goo
next(); // undefined

请注意上面:"var next=setup(data);"  得到的是setup函数返回的匿名函数体并不是匿名函数的调用,在函数中,通过函数名调用函数不加后面的小括号得到的只是函数本体,并不会执行调用函数的方法,只有加上小括号才会进行调用。接下来:"next()" 才是真正的调用setup中的匿名函数。这里先将next存为变量是为了将数组参数传递给setup方法进行保存。

最后,通过上面的方法我们来写一个迭代器轮询数组中的元素(最近公司需要做一个楼盘数据实时展示的功能运用了此方法),文章写的比较简单如果有错误或什么疑问欢迎留言:

function  iteratorHouse(array){
    var i=0;
    return function (){
        if(i<array.length-1){
            return array[i++];
        }else{
            i=0;
            return array[array.length-1];
        }
    }
}

var houseData=['楼盘1','楼盘2','楼盘3','楼盘4','楼盘5','楼盘6'];
var showHouse=iteratorHouse(houseData);

setInterval(function(){
    console.log(showHouse());
},10000);

 

posted @ 2018-05-18 10:56  热爱世界的liang  阅读(1237)  评论(0编辑  收藏  举报