Javascript设计模式之迭代器模式

前言：菜鸡也有梦想，而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理，从今天开始要保持每周写博客的习惯，希望自己可以有所成长。为了培养编程思维，决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式，并且将知识点和收获记录在博客中。

此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法，感谢作者曾探大大写出这么好的一本书。如有冒犯，请联系本人：markcoder@outlook.com处理，请大家购买正版书籍。

1.迭代器模式介绍

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象 的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即 使不关心对象的内部构造，也可以按顺序访问其中的每个元素。
比如 jQuery 中的$.each 函数

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

2.代码示例

首先我们自己先实现一个迭代器

let each = function (arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        callback.call(arr, i, arr[i])
    }
}

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

3.内部迭代器和外部迭代器

迭代器可以分为内部迭代器和外部迭代器，它们有各自的适用场景。

3.1内部迭代器

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

内部迭代器在调用的时候非常方便，外界不用关心迭代器内部的实现，跟迭代器的交互也仅仅是一次初始调用，但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定，上面的 each 函数就无法同时迭代 2 个数组了。

比如现在有个需求，要判断 2 个数组里元素的值是否完全相等， 如果不改写 each 函数本身 的代码，我们能够入手的地方似乎只剩下 each 的回调函数了，代码如下：

let compare = function (ary1, ary2) {
    if (ary1.length !== ary2.length) {
        throw new Error('两个数组不相等');
    }
    each(ary1, function (i, n) {
        if (n !== ary2[i]) {
            throw new Error('两个数组不相等');
        }
    })
    alert('两个数组相等');
}

compare([1, 2, 3], [2, 3, 4]); // throw new Error ( '两个数组不相等' );
复制代码

3.2外部迭代器

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

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

let Iterator = function (arr) {
    let current = 0;
    
    let next = function () {
        current += 1;
    }
    
    let isDone = function () {
        return current >= arr.length;
    }
    
    let getCurrentItem = function () {
        return arr[current];
    }
    
    return {
        next,
        isDone,
        getCurrentItem
    }

}

let compare = function (iterator1, iterator2) {
    while (!iterator1.isDone() && !iterator2.isDone()) {
        if (iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
            throw new Error('两个数组不相等');
        }
        iterator1.next();
        iterator2.next();
    }
    alert('两个数组相等');
}

let iterator1 = Iterator([1, 2, 3]);
let iterator2 = Iterator([1, 2, 3]);

compare(iterator1, iterator2);
复制代码

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

4.反向迭代器

let reverseEach = function (arr, callback) {
    for (let i = arr.length - 1; i>=0; i--) {
        callback.call(arr, i, arr[i]);
    }
}

reverseEach([1, 2, 3], function (index, item) {
    console.log(item); // 3 2 1
})
复制代码

5.终止迭代器

如果回调函数的执行结果返回 false，则提前终止循环。

let each = function (arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        if (callback.call(arr, i, arr[i]) === false) {
            break;
        }
    }
}

each( [ 1, 2, 3, 4, 5 ], function( i, n ){ 
    if ( n > 3 ){ // n 大于 3 的时候终止循环
        return false; 
    } 
    console.log( n ); // 分别输出：1, 2, 3 
});
复制代码

参考

《JavaScript设计模式与开发实践》—— 曾探

转载于:https://juejin.im/post/5caff9d8f265da039955cbfe