JavaScript设计模式与开发实践-设计模式(迭代器模式)

迭代器模式

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

jQuery中的迭代器

迭代器模式无非就是循环访问聚合对象中的各个元素。
比如：jQuery中的$.each函数，其中回调函数中的参数i为当前索引，n为当前元素。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
        $.each([1,2,3], function(i, n) {
            console.log("当前下标为：" + i)
            console.log("当前值为：" + n)
        })
</script>

实现自己的迭代器

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

            var each = function (ary, callback) {
                for (var i = 0, l = ary.length; i < l; i++){
                    callback.call(ary[i], i, ary[ i ]) // 把下标和当前元素当作参数传给callback函数
                }
            }

            each([{name: '1a'}, {name: '2b'}, {name: '3c'}], function (i, n) {
                console.log("当前下标i:", i)
                console.log("当前元素n:", n)
            })

内部迭代器和外部迭代器

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

1. 内部迭代器

我们刚刚编写的each函数属于内部迭代器，each函数的内部已经定义好了迭代规则，它完全接手整个迭代过程，外部只需要一次初始调用。
内部迭代器在调用的时候非常方便，外界不用关心迭代器内部的实现，跟迭代器的交互也仅仅是一次初始化调用，但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定，上面的each函数就无法同时迭代2个数组了。 比如现在有个需求，要判断2个数组里元素的值是否完全相等，如果不改写each函数本身的代码，我们能够入手的地方似乎只剩下each的回调函数了，代码如下：

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

            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 相等")
                    }
                })

                console.log("ary1 和 ary2 相等")
            }

            compare([1,2,3], [1,2,3,4]) // Uncaught Error: ary1 和 ary2 不相等

说实话，这个compare 函数一点都算不上好看，我们目前能够顺利完成需求，还要感谢在JavaScript里可以把函数当作参数传递的特性，但是在其他语言中未必能如此幸运。
在一些没有闭包的语言中，内部迭代器本身的实现也是相当复杂。比如C语言中的内部迭代器是用函数指针来实现的，循环处理所需要的数据都要以参数的形式明确地从外面传递进去。

2. 外部迭代器

外部迭代器必须显示地请求迭代下一个元素。
外部迭代器增加了一些调用的复杂度，但是相对也增强了迭代器的灵活性，我们可以手工控制迭代的过程和顺序。 下面这个外部迭代器的实现是来自《松本行弘的程序世界》第4章，原例用Ruby写成，这里我们翻译成JavaScript:

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

            let interator = Interator([{name: '1a'}, {name: '2b'}, {name: '3c'}])   
            console.log(interator.getCurrentItem()) // {name: '1a'}
            interator.next()
            console.log(interator.getCurrentItem()) // {name: '2b'}
            console.log(interator.isDone()) // false
            interator.next()
            console.log(interator.getCurrentItem()) // {name: '3c'}
            console.log(interator.isDone()) // false
            interator.next()
            console.log(interator.getCurrentItem()) // undefined
            console.log(interator.isDone()) // true
            interator.next()
            console.log(interator.getCurrentItem()) // undefined
            console.log(interator.isDone()) // true

• ES6的Iterator模拟next返回的例子：

          function makeInterator(array) {
                var nextIndex = 0

                return {
                    next: function () {
                        return nextIndex < array.length ? 
                        {value: array[nextIndex++], done: false} : 
                        {value: undefined, done: true}
                    }
                }
            }

           var it = makeInterator([1, 2, 3])
            
            console.log(it.next()) // {value: 1, done: false}
            console.log(it.next()) // {value: 2, done: false}
            console.log(it.next()) // {value: 3, done: false}
            console.log(it.next()) // {value: undefined, done: true}

改写 compare函数：

        var Interator = function (obj) {
                var current = 0
                var next = function () {
                    current += 1
                }
                var isDone = function () {
                    return current >= obj.length
                }
                var getCurrentItem = function () {
                    return obj[current]
                }
                return {
                    next: next,
                    isDone: isDone,
                    getCurrentItem: getCurrentItem
                }
            }
            
        var compare = function (iterator1, iterator2) {
                while(!iterator1.isDone() && !iterator2.isDone()) {
                    if (iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {
                        throw new Error("iterator1 和 iterator2 不相等")
                    }
                    iterator1.next()
                    iterator2.next()
                }
                console.log("iterator1 和 iterator2 相等")
            }
            var iterator1 = Interator([1,2,3])
            var iterator2 = Interator([1,2,3])
            
            compare(iterator1, iterator2) // iterator1 和 iterator2 相等

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

倒序迭代器

迭代器模式提供了循环访问一个聚合对象中每个元素的方法，但它没有规定我们以顺序、倒序还是中序来循环遍历聚合对象。 下面我们实现一个倒序访问的迭代器：

            var reverseEach = function (ary, callback) {
                for(var l = ary.length -1; l >= 0; l-- ) {
                    callback.call(ary[l], l, ary[ l ])
                }
            }

            reverseEach([0,1,2],function (i, n) {
                console.log(n) // 2, 1, 0
            })

中止迭代器

迭代器可以像普通 for 循环中的break 一样，提供一种跳出循环的方法。 在 jQuery的 each 函数中有 这样一句：

if (value === false ){
    break;
}
// 这句代码的意思是：约定如果回调函数的执行结果返回false，则提前终止循环。

中止迭代器约定：返回false则中止循环。

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

            each([1,2,3,4,5,6], function (i, n) {
                if (n > 3) {
                    return false
                }
                console.log(n) // 1,2,3
            })