前言
作为一个前端切图仔
,少有和各类设计模式打交道。但这不影响我们学习设计模式的思维,来提升我们的代码水平。
本章通过讲解迭代器模式,希望能够让你对设计模式更一步的学习。
本章学习内容👇
- 内部迭代器
- 外部迭代器
内部迭代器
迭代器可以分为内部迭代器
和外部迭代器
。
在上一章: JavaScript迭代器模式与开发实践(上)
我们编写的ForEach
函数就属于内部迭代器
。那么内部迭代器
究竟代表着什么呢?
- 迭代器内部事先定义好了迭代的规则,迭代器完全接手整个迭代过程,外部只需要以此初始调用即可。
什么意思呢?就像我们用JavaScript
中的ApiforEach
一样👇
let arr = [1,2,3]
arr.forEach((item,index)=>{
arr[index] = item + index
})
我们只需要完成初始调用(包括传参的回调函数)后 ,就不用插手迭代器的运行了。这作为内部迭代器
的优点,不用关心迭代器内部的实现;但这也同样作为内部迭代器
的缺点,无法在迭代器运行时实现更多的操作。
假设,我们现在有个需求:判断来个数组里的元素是否相等。我们如果不改变ForEach
本身,那么能够实现的方法只有通过传入的回调函数了👇
let compare = function(arr1,arr2){
let res = true
if(arr1.length !== arr2.length){
return false
}
ForEach(arr1,function(item,index){
if( item !== arr2[index] ){
res = false
}
})
return res
}
外部迭代器
外部迭代器
必须显示地请求迭代下一个元素
什么意思呢?也就是迭代器每次只会遍历一个元素,需要使用者去人为地向后进行衍生。
这里我们实现一个外部迭代器
👇
var Iterator = function( obj ){
var current = 0;
var next = function(){
current += 1;
};
var isDone = function(){
return current >= obj.length;
};
var getCurrItem = function(){
return obj[ current ];
};
return {
next: next,
isDone: isDone,
getCurrItem: getCurrItem
}
}
然后再用这个迭代器去实现上面元素比较的需求:
var compare = function( iterator1, iterator2 ){
while( !iterator1.isDone() && !iterator2.isDone() ){
if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){
return false
);
}
iterator1.next();
iterator2.next();
}
return true
}
这样看上去是不是就简单多了?虽然外部迭代器
调用的方法比较麻烦,需要依次遍历。但是在某些需求下使用要优于内部迭代器
。
尾声
内部迭代器
和外部迭代器
本质都是迭代一个可迭代对象,具体使用哪个我们需要根据需求场景而定。