浅谈js设计模式之迭代器模式

迭代器模式无非就是循环访问聚合对象中的各个元素。比如 jQuery中的 $.each 函数,其中回
调函数中的参数 i 为当前索引, n 为当前元素,代码如下:

$.each([1, 2, 3], function(i, n) {
    console.log('当前下标为: ' + i);
    console.log('当前值为:' + n);
});

现在我们来自己实现一个 each 函数, each 函数接受 2 个参数,第一个为被循环的数组,第
二个为循环中的每一步后将被触发的回调函数:

var each = function(ary, callback) {
    for(var i = 0, l = ary.length; i < l; i++) {
        callback.call(ary[i], i, ary[i]); // 把下标和元素当作参数传给 callback 函数
    }
};
each([1, 2, 3], function(i, n) {
    alert([i, n]);
});

迭代器模式不仅可以迭代数组,还可以迭代一些类数组的对象。比如 arguments 、
{"0":'a',"1":'b'} 等。 通过上面的代码可以观察到,无论是内部迭代器还是外部迭代器,只要被
迭代的聚合对象拥有 length 属性而且可以用下标访问,那它就可以被迭代。
在 JavaScript 中, for in 语句可以用来迭代普通字面量对象的属性。jQuery 中提供了$.each`
函数来封装各种迭代行为:

$.each = function(obj, callback) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike(obj);
    if(isArray) { // 迭代类数组
        for(; i < length; i++) {
            value = callback.call(obj[i], i, obj[i]);
            if(value === false) {
                break;
            }
        }
    } else {
        for(i in obj) { // 迭代 object 对象
            value = callback.call(obj[i], i, obj[i]);
            if(value === false) {
                break;
            }
        }
    }
    return obj;
};

 

posted @ 2018-02-05 10:25  zt123123  阅读(137)  评论(0编辑  收藏  举报