js之迭代器模式

来源：互联网发布：windows 10下崩溃绿屏编辑：程序博客网时间：2024/06/05 18:07

迭代器模式

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

实现自己的迭代器

现在我们来自己实现一个 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>

0 0