Javascript 设计模式 - 迭代器模式

586 阅读2分钟

设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象 5 的内部表示。

迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。

例如 Javascript中的forEachmapsome等;

迭代器可分为一下两种:

  • 内部迭代器
  • 外部迭代器

内部迭代器

内部已经定义好了迭代规则,它完全接手整个迭代过程,外部只需要一次初始调用。

  • 例如:
function each(ary, callback) {
    for (let i = 0; i < ary.length; i++){
        callback.call(ary[i], i, ary[i]);
    }
}
each([1, 2, 3], (i, n) => alert([i, n]));

总结: 内部迭代器调用方式简答,但它的适用面相对较窄。

外部迭代器

必须显式地请求迭代下一个元素。

外部迭代器增加了一些调用的复杂度,但相对也增强了迭代器的灵活性,我们可以手工控制迭代的过程或者顺序。

var Iterator = function( obj ){
    var current = 0;
    var next = function(){
        current += 1;
    };
    var isDone = function(){
        return current >= obj.length;
    };
    var getCurrItem = function(){
        return obj[ current ];
    };
    return {
        next: next,
        isDone: isDone,
        getCurrItem: getCurrItem
    }
};

总结: 外部迭代器虽然调用方式相对复杂,但它的适用面更广,也能满足更多变的需求。内部迭代器和外部迭代器在实际生产中没有优劣之分,究竟使用哪个要根据需求场景而定。

迭代类数组对象和字面量对象

迭代器模式不仅可以迭代数组,还可以迭代一些类数组的对象。

无论是内部迭代器还是外部迭代器,只要被迭代的聚合对象拥有 length 属性而且可以用下标访问,那它就可以被迭代。

例如:arguments{'0': 'a', '1': 'b'}

// 迭代器支持类数组和对象的遍历
function each(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 {
        // 迭代object 对象
        for ( i in obj ) {
            value = callback.call( obj[ i ], i, obj[ i ] );
            if ( value === false ) {
                break;
            }
        }
    }
    return obj;
};

倒序迭代器

从尾到头的遍历数组。

中止迭代器

在遍历过程中,如果满足某种条件可以终止迭代。

function each(ary, callback){
    for (let i = 0; i < ary.length; i++){
        // callback 的执行结果返回false,提前终止迭代
        if (callback(i, ary[i]) === false ){ 
            break;
        }
    }
};

迭代器模式的应用举例

  • nodejs的express框架的中间件思想,处理请求用到的next()方法就是迭代器模式。
  • ECMAScript 6 的 Iterator(遍历器)和 Generator异步编程中使用了next()

参考

JavaScript设计模式与开发实践