迭代器模式

摘自《JavaScript设计模式与开发实践》

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

目前，恐怕只有在一些“古董级”的语言中才会为实现一个迭代器模式而烦恼，现在流行的大部分语言如 Java、Ruby 等都已经有了内置的迭代器实现，许多浏览器也支持JavaScript 的Array.prototype.forEach 。

jQuery 中的迭代器

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

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

实现自己的迭代器

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

 const each = function (arr, callback) {
    for (let i = 0; i < arr.length; i++) {
      callback.call(arr[i], i, arr[i])
    }
  }
  each([1, 2, 3], function (i, n) {
    alert([i, n])
  })

内部迭代器

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

  const 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 不相等' )

说实话，这个 compare 函数一点都算不上好看，我们目前能够顺利完成需求，还要感谢在 JavaScript 里可以把函数当作参数传递的特性，但在其他语言中未必就能如此幸运。

外部迭代器

外部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度，但相对也增强了迭代器的灵活性，我们可以手工控制迭代的过程或者顺序。

const Iterator = function (obj) {
    let current = 0
    const next = function () {
      current += 1
    }
    const isDone = function () {
      return current >= obj.length
    }
    const getCurrItem = function () {
      return obj[current]
    }
    return {
      next: next,
      isDone: isDone,
      getCurrItem: getCurrItem
    }
  }
  // 再看看如何改写 compare 函数：
  const compare = function (iterator1, iterator2) {
    while (!iterator1.isDone() && !iterator2.isDone()) {
      if (iterator1.getCurrItem() !== iterator2.getCurrItem()) {
        throw new Error('iterator1 和 iterator2 不相等')
      }
      iterator1.next()
      iterator2.next()
    }
    alert('iterator1 和 iterator2 相等')
  }
  const iterator1 = Iterator([1, 2, 3])
  const iterator2 = Iterator([1, 2, 3])
  compare(iterator1, iterator2) // 输出：iterator1 和 iterator2 相等

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

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

迭代器模式不仅可以迭代数组，还可以迭代一些类数组的对象。比如 arguments 、{"0":'a',"1":'b'} 等。通过上面的代码可以观察到，无论是内部迭代器还是外部迭代器，只要被迭代的聚合对象拥有 length 属性而且可以用下标访问，那它就可以被迭代。

  let isArrayLike = (collection) => {
    const MAX_ARRAY_INDEX = Math.pow(2, 53) - 1
    let length = collection !== null && collection.length
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX
  }
  $.each = function (obj, callback) {
    let value
    let i = 0
    const length = obj.length
    isArray = isArrayLike(obj)
    if (isArray) { // 迭代类数组
      for (; i < length; i++) {
        value = callback.call(obj[i], i, obj[i])
        if (value === false) {
          break
        }
      }
    } else {
      for (i in obj) { // 迭代 object 对象
        value = callback.call(obj[i], i, obj[i])
        if (value === false) {
          break
        }
      }
    }

    return obj
  }

倒序迭代器

由于 GoF 中对迭代器模式的定义非常松散，所以我们可以有多种多样的迭代器实现。总的来说，迭代器模式提供了循环访问一个聚合对象中每个元素的方法，但它没有规定我们以顺序、倒序还是中序来循环遍历聚合对象。下面我们实现一个倒序访问的迭代器：

const reverseEach = function(arr, callback) {
    for(let l = arr.length; l > 0; l--) {
        callback(l, arr[ l ])
    }
}
reverseEach( [ 0, 1, 2 ], function( i, n ){
    console.log( n )  // 分别输出：2, 1 ,0
})

中止迭代器

迭代器可以像普通 for 循环中的 break 一样，提供一种跳出循环的方法。

if ( value === false ) {
    break
}

这句代码的意思是，约定如果回调函数的执行结果返回 false ，则提前终止循环。下面我们把之前的 each 函数改写一下：

const each = function (ary, callback) {
    for (let 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
  })