JavaScript 设计模式之迭代器模式

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

jQuery 中的迭代器

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

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

实现自己的迭代器

现在来自己实现一个 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([1, 2, 3], function (i, n) {
  alert([i, n]);
});

内部迭代器和外部迭代器

1 内部迭代器

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

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

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

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

2 外部迭代器

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

var Iterator = function (obj) {
  var current = 0;
  var next = function () {
    current += 1;
  };
  var isDone = function () {};
  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 和 iterator2 不相等");
    }
    iterator1.next();
    iterator2.next();
  }
  alert("iterator1 和 iterator2 相等");
};
var iterator1 = Iterator([1, 2, 3]);
var iterator2 = Iterator([1, 2, 3]);
compare(iterator1, iterator2); // 输出:iterator1 和 iterator2 相等

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

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

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

在 JavaScript 中，for in 语句可以用来迭代普通字面量对象的属性。jQuery 中提供了 $.each 函数来封装各种迭代行为：

$.each = function (obj, callback) {
  var value,
    i = 0,
    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;
};

倒序迭代器

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
});

中止迭代器

把之前写的 each 函数改造一下，约定如果回调函数的执行结果返回 false，则提前终止循环。

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
});

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙点赞关注一下，您的支持是我坚持写作最大的动力，多谢支持。