深入理解JavaScript系列(35):设计模式之迭代器模式详解


Posted in Javascript onMarch 03, 2015

介绍

迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。

迭代器的几个特点是:

1.访问一个聚合对象的内容而无需暴露它的内部表示。
2.为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。
3.遍历的同时更改迭代器所在的集合结构可能会导致问题(比如C#的foreach里不允许修改item)。

正文

一般的迭代,我们至少要有2个方法,hasNext()和Next(),这样才做做到遍历所有对象,我们先给出一个例子:

var agg = (function () {

    var index = 0,

    data = [1, 2, 3, 4, 5],

    length = data.length;
    return {

        next: function () {

            var element;

            if (!this.hasNext()) {

                return null;

            }

            element = data[index];

            index = index + 2;

            return element;

        },
        hasNext: function () {

            return index < length;

        },
        rewind: function () {

            index = 0;

        },
        current: function () {

            return data[index];

        }
    };

} ());

使用方法和平时C#里的方式是一样的:
// 迭代的结果是:1,3,5

while (agg.hasNext()) {

    console.log(agg.next());

}

当然,你也可以通过额外的方法来重置数据,然后再继续其它操作:
// 重置

agg.rewind();

console.log(agg.current()); // 1

jQuery应用例子

jQuery里一个非常有名的迭代器就是$.each方法,通过each我们可以传入额外的function,然后来对所有的item项进行迭代操作,例如:

$.each(['dudu', 'dudu', '酸奶小妹', '那个MM'], function (index, value) {

    console.log(index + ': ' + value);

});

//或者

$('li').each(function (index) {

    console.log(index + ': ' + $(this).text());

});

总结

迭代器的使用场景是:对于集合内部结果常常变化各异,我们不想暴露其内部结构的话,但又响让客户代码透明底访问其中的元素,这种情况下我们可以使用迭代器模式。

Javascript 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
node的process以及child_process模块学习笔记
Mar 06 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
js实现3D照片墙效果
Oct 28 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 #Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 #Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 #Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 #Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 #Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 #Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 #Javascript
You might like
php错误级别的设置方法
2013/06/17 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python中uuid模块实例浅析
2020/12/29 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
给公司的建议书范文
2014/05/13 职场文书
电子工程求职信
2014/07/17 职场文书
小学运动会前导词
2015/07/20 职场文书
小学课改工作总结
2015/08/13 职场文书
导游词之唐山景点
2019/12/18 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python