JavaScript迭代器模式与开发实践（中）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解迭代器模式，希望能够让你对设计模式更一步的学习。

本章学习内容👇

• 内部迭代器
• 外部迭代器

内部迭代器

迭代器可以分为内部迭代器和外部迭代器。

在上一章： 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
}

这样看上去是不是就简单多了？虽然外部迭代器调用的方法比较麻烦，需要依次遍历。但是在某些需求下使用要优于内部迭代器。

尾声

内部迭代器和外部迭代器本质都是迭代一个可迭代对象，具体使用哪个我们需要根据需求场景而定。