JS设计模式--迭代器模式

2018年01月07日Web前端0

停了好久的每两周一个设计的设计模式的计划再次开始了。。。这次讲的是迭代器模式。

一、什么是迭代器模式

迭代器模式是指提供一种方法顺序访问一个集合中的各个元素，而又不需关心该集合的内部构造的方式。

二、实现简单的迭代器

我们经常使用到jQuery中的$.each()工具方法，以及ES5中Array.prototype.forEach()方法都是使用的迭代器模式。

现在我们自己来实现一个迭代器：

function each (arr, fn) {
    var i = 0,
        len = arr.length;

   for (; i < len; ++i) {
        fn(i, arr[i]);
   }
}

测试一下：

each([1, 2, 3, 4], function (index, value) {
    console.log(index, value);
});

一个简单的迭代器就实现了。

三、对象字面量迭代器

迭代器模式不仅可以迭代数组，而且可以迭代一些类数组的对象。JS中可以使用for in 循环迭代字面量对象。

我们看下jQuery中提供的each()方法：

each: function( obj, callback) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj );
    if ( args ) {
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.apply( obj[ i ], args );
                if ( value === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                value = callback.apply( obj[ i ], args );
                if ( value === false ) {
                    break;
                }
            }
        }
    }
    return obj;
}

其中还通过

if ( value === false ) {
    break;
}

这种方式使迭代器能够像for循环中的brea一样跳出循环。

四、总结

迭代器模式是一种相对较为简单的模式，而且目前大多数语言已经内置了迭代器。

JavaScript设计模式

目录