JavaScript迭代器模式与开发实践(下)

51 阅读2分钟

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

前言

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

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

本章学习内容👇

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

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

迭代器除了能够迭代数组对象外,对于类数组这种具有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。这俩个方法都会在满足一个条件时,结束迭代,返回目标元素或下标。

我们基于这一点,一起来实现一个类似于findmyFind函数吧🤔

在此处我们通过使用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
}

尾声

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