你不知道的javascript设计模式（七）---- 迭代器模式

秒速五厘米 2022-11-13 06:24 146阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  迭代器模式的定义
     *  js的迭代器
     *   *  内部迭代器
         *  外部迭代器
         *  用js实现迭代器对象
 *  小结

# 前言 #

**这两天收到很多读者的回复评论，对我的鼓舞很大，大家可以从我的博客中提高就是对我最大的支持**！言归正传，上一章我们谈到了策略模式，用于一些可以通过不同算法达到相同目的的场景，分离了算法本身和算法执行的部分，来保证设计模式的单一职责原则。这一章，我们将来学习关于迭代器模式的相关内容

# 正文 #

## 迭代器模式的定义 ##

> 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示

前面我们说过，每一种设计模式的核心原理都是分离业务逻辑中不变和易变的部分，来让各个部分维持单一的职责。迭代器模式就是把迭代的过程从业务逻辑分离出来，这样可以使得，在使用迭代器模式以后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素  
        其实迭代器模式是一种很常见而且我们不知不觉已经用过很多次的模式了，像Array原型方法中的forEach和es6中实现的iterator对象都是迭代器模式的体现

## js的迭代器 ##

迭代器分为内部迭代器和外部迭代器，这里我们将分别进行介绍

### 内部迭代器 ###

内部迭代器函数往往在内部就已经定义了迭代了规则，它完全负责了整个迭代过程，外部只需要调用一次就可以完成迭代，比如下面的例子：

function each(arr, callback) {
    	for( let i = 0; i < arr.length; i++) {
    		callback(arr[i], i, arr[i]);
    	}
    }

each函数会迭代传进来的数组对象，并且把下标和数组迭代对象的值传给回调函数。所以我们可以发现，对于内部迭代器而言，调用的过程是很方便的，外界不需要关注迭代器的实现，只需要在初始调用的时候把需要的值传给迭代器就可以了。  
        这是内部迭代器的优势也是它的劣势，因为已经规则好迭代规则，使得当迭代规则发生变化的时候，函数的复用性会变差，需要修改到函数本身去兼容更多的迭代方式

### 外部迭代器 ###

与之相对的就是外部迭代器，大家应该比较熟悉，Array的原型方法里有一个sort的排序函数，它基于外部迭代器实现的，我们可以传入不同的迭代规则函数给sort，来配置出不同规则的迭代器，相比内部迭代器函数调用略复杂，但是灵活性扩展了很多

### 用js实现迭代器对象 ###

迭代器对象其实在es6中已经实现了，但是这里还是给大家写一遍简易的迭代器对象，方便大家加深对迭代器对象的印象，迭代器对象应该满足几个要素：

*  currentIndex，迭代器对象应该至少是一个类数组形式，也就是实现了length属性，具有迭代的index
 *  next方法，具有向下一个迭代对象递推的能力
 *  isDone方法，用来判断迭代是否结束，达到迭代终点
 *  getCurrentItem方法，用来获取迭代过程中的当前值

# 小结 #

这一章我们细谈了迭代器模式，这个其实在很多语言里都已经进行了实现，在设计模式中是一种相对简单的设计模式，简单到我们平时甚至天天使用但是却没意识到这是一种设计模式。下一章节我们将进一步学习一种新的，大家耳熟能详的设计模式，**发布-订阅模式**。  
       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/ad188a9e80474421bcdb61487d3248af.png