博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript设计模式之迭代器模式
阅读量:7144 次
发布时间:2019-06-29

本文共 2917 字,大约阅读时间需要 9 分钟。

前言:菜鸡也有梦想,而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理,从今天开始要保持每周写博客的习惯,希望自己可以有所成长。为了培养编程思维,决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式,并且将知识点和收获记录在博客中。

此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法,感谢作者曾探大大写出这么好的一本书。如有冒犯,请联系本人:markcoder@outlook.com处理,请大家购买正版书籍。

1.迭代器模式介绍

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象 的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即 使不关心对象的内部构造,也可以按顺序访问其中的每个元素。
比如 jQuery 中的$.each 函数
$.each( [1, 2, 3], function( i, n ){  console.log( '当前下标为: '+ i );  console.log( '当前值为:' + n ); });复制代码

2.代码示例

首先我们自己先实现一个迭代器
let each = function (arr, callback) {    for (let i = 0; i < arr.length; i++) {        callback.call(arr, i, arr[i])    }}each([1, 2, 3], function (i, n) {    console.log( '当前下标为: '+ i );     console.log( '当前值为:' + n ); })复制代码

3.内部迭代器和外部迭代器

迭代器可以分为内部迭代器和外部迭代器,它们有各自的适用场景。

3.1内部迭代器

内部迭代器就是内部已经定义好了迭代规则,它完全接手整个迭代过程,外部只需要一次初始调用。

内部迭代器在调用的时候非常方便,外界不用关心迭代器内部的实现,跟迭代器的交互也仅仅是一次初始调用,但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定,上面的 each 函数就无法同时迭代 2 个数组了。

比如现在有个需求,要判断 2 个数组里元素的值是否完全相等, 如果不改写 each 函数本身 的代码,我们能够入手的地方似乎只剩下 each 的回调函数了,代码如下:

let compare = function (ary1, ary2) {    if (ary1.length !== ary2.length) {        throw new Error('两个数组不相等');    }    each(ary1, function (i, n) {        if (n !== ary2[i]) {            throw new Error('两个数组不相等');        }    })    alert('两个数组相等');}compare([1, 2, 3], [2, 3, 4]); // throw new Error ( '两个数组不相等' );复制代码

3.2外部迭代器

外部迭代器必须显式地请求迭代下一个元素。

外部迭代器增加了一些调用的复杂度,但相对也增强了迭代器的灵活性,我们可以手工控制 迭代的过程或者顺序。

let Iterator = function (arr) {    let current = 0;        let next = function () {        current += 1;    }        let isDone = function () {        return current >= arr.length;    }        let getCurrentItem = function () {        return arr[current];    }        return {        next,        isDone,        getCurrentItem    }}let compare = function (iterator1, iterator2) {    while (!iterator1.isDone() && !iterator2.isDone()) {        if (iterator1.getCurrentItem() !== iterator2.getCurrentItem()) {            throw new Error('两个数组不相等');        }        iterator1.next();        iterator2.next();    }    alert('两个数组相等');}let iterator1 = Iterator([1, 2, 3]);let iterator2 = Iterator([1, 2, 3]);compare(iterator1, iterator2);复制代码

外部迭代器虽然调用方式相对复杂,但它的适用面更广,也能满足更多变的需求。内部迭代 器和外部迭代器在实际生产中没有优劣之分,究竟使用哪个要根据需求场景而定。

4.反向迭代器

let reverseEach = function (arr, callback) {    for (let i = arr.length - 1; i>=0; i--) {        callback.call(arr, i, arr[i]);    }}reverseEach([1, 2, 3], function (index, item) {    console.log(item); // 3 2 1})复制代码

5.终止迭代器

如果回调函数的执行结果返回 false,则提前终止循环。
let each = function (arr, callback) {    for (let i = 0; i < arr.length; i++) {        if (callback.call(arr, i, arr[i]) === false) {            break;        }    }}each( [ 1, 2, 3, 4, 5 ], function( i, n ){     if ( n > 3 ){ // n 大于 3 的时候终止循环        return false;     }     console.log( n ); // 分别输出:1, 2, 3 });复制代码

参考

《JavaScript设计模式与开发实践》—— 曾探

转载于:https://juejin.im/post/5caff9d8f265da039955cbfe

你可能感兴趣的文章
四舍五入网络Java保留两位小数
查看>>
MFC 循环界面假死的解决(MFC 按钮终止循环)
查看>>
详细解说九宫图比较常用的多控件布局
查看>>
程序员的出路在哪里?挣钱的机会来了续-福利来了,仿QQ界面,放出全部源码,打造创业框架及实现思路...
查看>>
浅析Android线程模型一 --- 转
查看>>
Cocos2d-x PluginX (二)增加新的Plugin
查看>>
python-django开发学习笔记四
查看>>
cocos2d-x开发记录:二,基本概念(导演,场景,层和精灵,场景切换,效果)...
查看>>
Binutils工具集中的一些比较常用的工具
查看>>
jsp里面实现asp.net的Global文件内容。
查看>>
Oracle ROWID
查看>>
WCF服务通信测试
查看>>
dos命令dir查找文件的用法及实例
查看>>
Hadoop守护进程【简--】
查看>>
uboot中gd的定义和使用
查看>>
Tcpdump MySQL Query
查看>>
mac jdbc连接mysql
查看>>
Activity生命周期的学习以及Logcat的使用
查看>>
Environment 常用方法
查看>>
【TYVJ】1338 QQ农场(最大流+最大权闭合图)
查看>>