js之迭代器模式

最新推荐文章于 2024-08-01 19:18:34 发布

linhongyong

最新推荐文章于 2024-08-01 19:18:34 发布

阅读量1k

点赞数

分类专栏：设计模式文章标签：函数模式迭代器模式

本文链接：https://blog.csdn.net/linhongyong/article/details/53427690

版权

设计模式专栏收录该内容

12 篇文章 1 订阅

订阅专栏

迭代器模式

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

实现自己的迭代器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        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 ] );});

    </script>
</body>
</html>

1. 内部迭代器：

我们刚刚编写的 each 函数属于内部迭代器， each 函数的内部已经定义好了迭代规则，它完全接手整个迭代过程，外部只需要一次初始调用。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
       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 ] );
       });
       var compare = function( ary1, ary2 ){
           if ( ary1.length !== ary2.length ){
               throw new Error ( 'ary1 和 ary2 不相等' );
           }
           each( ary1, function( i, n ){
               if ( n !== ary2[ i ] ){
                   throw new Error ( 'ary1 和 ary2 不相等' );
               }
           });
           alert ( 'ary1 和 ary2 相等' );
       };
       compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( 'ary1 和 ary2 不相等' );

    </script>
</body>
</html>

2. 外部迭代器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        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
            }
        };
//        再看看如何改写 compare 函数：
        var compare = function( iterator1, iterator2 ){
            while( !iterator1.isDone() && !iterator2.isDone() ){
                if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){
                    throw new Error ( 'iterator1 和 iti03.htmlerator2 不相等' );
                }
                iterator1.next();
                iterator2.next();
            }
            alert ( 'iterator1 和 iterator2 相等' );
        }
        var iterator1 = Iterator( [ 1, 2, 3 ] );
        var iterator2 = Iterator( [ 1, 2, 3 ] );
        compare( iterator1, iterator2 ); // 输出：iterator1 和 iterator2 相等
    </script>
</body>
</html>

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

通过上面的代码可以观察到，无论是内部迭代器还是外部迭代器，只要被
迭代的聚合对象拥有 length 属性而且可以用下标访问，那它就可以被迭代。

倒序迭代器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //倒序迭代器
        var reverseEach = function( ary, callback ){
            for ( var l = ary.length - 1; l >= 0; l-- ){
                callback( l, ary[ l ] );
            }
        };
        reverseEach( [ 0, 1, 2 ], function( i, n ){
            console.log( n ); // 分别输出：2, 1 ,0
        });
    </script>
</body>
</html>

中止迭代器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //中止迭代器
        var each = function( ary, callback ){
            for ( var i = 0, l = ary.length; i < l; i++ ){
                if ( callback( i, ary[ i ] ) === false ){ // callback 的执行结果返回 false，提前终止迭代
                    break;
                }
            }
        };
        each( [ 1, 2, 3, 4, 5 ], function( i, n ){
            if ( n > 3 ){ // n 大于 3 的时候终止循环
                return false;
            }
            console.log( n ); // 分别输出：1, 2, 3
        });
    </script>
</body>
</html>