深入理解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 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
webpack打包多页面的方法
Nov 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 Try Catch异常测试
2009/03/01 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
python能否java成为主流语言吗
2020/06/22 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
师范应届生教师求职信
2013/11/05 职场文书
黄河象教学反思
2014/02/10 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
找工作求职信
2014/07/07 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
教师个人自我评价
2015/03/04 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
入党介绍人意见2015
2015/06/01 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
你需要掌握的20个Python常用技巧
2022/02/28 Python