【JS】166-JavaScript设计模式——迭代器模式-CFANZ编程社区

三、迭代器模式(Iterator Pattern)

1.概念介绍

迭代器模式(Iterator Pattern) 是提供一种方法，顺序访问一个聚合对象中每个元素，并且不暴露该对象内部。

这种模式属于行为型模式，有以下几个特点：

访问一个聚合对象的内容，而无需暴露它的内部表示。
提供统一接口来遍历不同结构的数据集合。
遍历的同事更改迭代器所在的集合结构可能会导致问题。

在迭代器模式中，通常包含有一个包含某种数据集合的对象，需要提供一种简单的方法来访问每个元素。
这里对象需要提供一个 next()方法，每次调用都必须返回下一个连续的元素。

这里假设创建一个对象 leo，我们通过调用它的 next()方法访问下一个连续的元素：

1. let obj;
2. while(obj = leo.next()){
3.     // do something
4.     console.log(obj);
5. }

另外迭代器模式中，聚合对象还会提供一个更为渐变的 hasNext()方法，来检查是否已经到达数据末尾，我们这么修改前面的代码：

1. while(leo.hasNext()){
2.     // do something
3.     console.log(obj);
4. }

2.优缺点和应用场景

2.1优点

它简化了聚合类，并支持以不同的方式遍历一个聚合对象。
在同一个聚合上可以有多个遍历。
在迭代器模式中，增加新的聚合类和迭代器类都很方便，无须修改原有代码。

2.2缺点

由于迭代器模式将存储数据和遍历数据的职责分离，增加新的聚合类需要对应增加新的迭代器类，类的个数成对增加，这在一定程度上增加了系统的复杂性。

2.3应用场景

访问一个聚合对象的内容而无须暴露它的内部表示。
需要为聚合对象提供多种遍历方式。
为遍历不同的聚合结构提供一个统一的接口。

3.简单案例

根据上面的介绍，我们这里实现一个简单案例，将设我们数据只是普通数组，然后每次检索，返回的是间隔一个的数组元素（即不是连续返回）：

然后我们还要给它提供更简单的访问方式和多次迭代数据的能力，我们需要添加下面两个方法：

1. let leo = (function(){
2.     let index = 0, data = [1, 2, 3, 4, 5],
3.         len = data.length;
4.     return {
5.         next: function(){
6.             let obj;
7.             if(!this.hasNext()){
8.                 return null;
9.             };
10.             obj = data[index];
11.             index = index + 2;
12.             return obj;
13.         },
14.         hasNext: function(){
15.             return index < len;
16.         }
17.     }
18. })()

rewind() 重置指针到初始位置；
current() 返回当前元素，因为当指针步前进时无法使用 next()操作；

代码变成这样：

这样这个案例就完整了，接下来我们来测试：

1. let leo = (function(){
2.     //.. 
3.     return {
4.          // .. 
5.          rewind: function(){
6.              index = 0;
7.          },
8.          current: function(){
9.              return data[index];
10.          }
11.     }
12. })();

1. // 读取记录
2. while(leo.hasNext()){
3.     console.log(leo.next());
4. };  // 打印 1 3 5
5. // 回退
6. leo.rewind();
7. // 获取当前
8. console.log(leo.current()); // 回到初始位置，打印1

4.应用场景

迭代器模式通常用于：对于集合内部结果常常变化各异，我们不想暴露其内部结构的话，但又响让客户代码透明底访问其中的元素，这种情况下我们可以使用迭代器模式。

简单理解：遍历一个聚合对象。

jQuery应用例子：

jQuery中的 $.each()方法，可以让我们传入一个方法，实现对所有项的迭代操作：

1. $.each([1,2,3,4,5],function(index, value){
2.     console.log(`${index}: ${value}`)
3. })
• 使用迭代器模式实现 each()方法
4. let myEach = function(arr, callback){
5.     for(var i = 0; i< arr.length; i++){
6.         callback(i, arr[i]);
7.     }
8. }