Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
微信公众号 前端自习课

三、迭代器模式(Iterator Pattern)

1.概念介绍

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

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

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

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

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

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

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

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

2.优缺点和应用场景

2.1优点

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

2.2缺点

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

2.3应用场景

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

3.简单案例

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

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

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

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

代码变成这样:

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

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

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

4.应用场景

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

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

  • jQuery应用例子:

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

1
2
3
$.each([1,2,3,4,5],function(index, value){
console.log(`${index}: ${value}`)
})

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

4.小结

迭代器模式是一种相对简单的模式,目前绝大多数语言都内置了迭代器。而且迭代器模式也是非常常用,有时候不经意就是用了。

参考资料

  1. 《JavaScript Patterns》

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com
微信公众号 前端自习课

前端自习课