JS常见设计模式 之 迭代器模式

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

现在大部分语言都已经有了内置的迭代器的实现，许多浏览器也支持JavaScript的Array.prototype.forEach

实现一个自己的迭代器

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

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

each([1, 2, 3], function (value, index, ary) {
  console.log(value, index, ary)
})

内部迭代器和外部迭代器

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

内部迭代器

我们上面编写的each函数属于是内部迭代器。each函数的内部已经定义好了迭代规则，它负责整个迭代的过程，外部我们只需要调用一次。

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

比如我们现在要实现一个函数，来比较两个只包含数字的数组的内容是否完全相等，如果我们用each函数的话就只能这样写：

function compare(ary1, ary2) {
  if (ary1.length !== ary2.length) {
    throw new  Error('ary1和ary2不相等')
  }
  each(ary1, function (val, index) {
    if (val !== ary2[index]){
      throw new  Error('ary1和ary2不相等')
    }
  })
  alert('ary1和ary2相等')
}

虽然我们实现了需求，但是这个函数是真的丑陋。

外部迭代器

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

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

function Iterator(obj) {
  let current = 0
  const next = function () {
    current++
  }

  const isDone = function() {
    return current >= obj.length
  }

  const getCurrItem = function () {
    return obj[current]
  }

  return {
    next,
    isDone,
    getCurrItem,
    length: obj.length
  }
}

我们再用这个函数来改写compare函数：

function compare(ary1, ary2) {
  const it1 = Iterator(ary1)
  const it2 = Iterator(ary2)
  if (it1.length !== it2.length){
    throw new  Error('ary1和ary2不相等')
  }
  while(!it1.isDone()) {
    if (it1.getCurrItem() !== it2.getCurrItem()) {
      throw new  Error('ary1和ary2不相等')
    }
    it1.next()
    it2.next()
  }

  alert('ary1和ary2相等')
}

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

我之前有一个文章里面讲过，数组对象不仅可以给迭代，同时类数组对象也是可以被迭代的，同时如果有的对象实现了自己的迭代规则，那么这个对象也是可以被迭代的.