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

前言

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

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

本章学习内容👇

• 迭代类数组对象
• 实现倒序迭代器
• 实现中止迭代器

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

迭代器除了能够迭代数组对象外，对于类数组这种具有length属性并且可以用下标访问的对象以及字面量独享，也是能够迭代的。我们通过判断目标是否为类数组，将它与数组同质化处理；而字面量对象的遍历我们在实现时使用for in语句实现👇

let ForEach = function (target,callback){
    let len = target.length
    if (isArrayLike(target)){//判断是否为数组或类数组
        for(let i = 0 ; i < len ; i++){
            //遍历数组，依次执行回调
            callback(target[i],i)
        }
    }else{
        for(let i in target){
            callback(target[i],i)
        }
    }
​
}
​
function isArrayLike(target){
    return !!("length" in target & !!target && target.length);
}

倒序迭代器

迭代器本身没有一个固定的顺序，没有强制要求是顺序遍历的。只要能够遍历完整个可迭代对象那么这个迭代器就是成立的。因此，我们也可以开发出一个倒序的迭代器👇

let reverseForEach = function (target,callback){
    let len = target.length-1
        for(let i = len ; i > -1 ; i--){
            //遍历数组，依次执行回调
            callback(target[i],i)
        }
}

中止迭代器

中止迭代器，有用过吗？如果没有那你可能得回去学习下ES6了。在ES6中我们有常用的俩个中止迭代器：find以及findIndex。这俩个方法都会在满足一个条件时，结束迭代，返回目标元素或下标。

我们基于这一点，一起来实现一个类似于find的myFind函数吧🤔

在此处我们通过使用break的方式停止迭代👇

let myFind = function (target,callback){
    let len = target.length
    let value = undefined
    for(let i = 0 ; i < len ; i++){
       value =  callback(target[i],i)
       if (value){//如果找到了，则停止迭代
           break
       } 
    }
    return value
}

尾声

迭代器模式相关内容就到此结束了，欢迎继续阅读本专栏中的其他设计模式😊