最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Javascript 设计模式 - 迭代器模式

    正文概述 掘金(alanyf)   2020-12-09   351

    设计模式 - 迭代器模式

    迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。

    例如 Javascript中的forEachmapsome等;

    迭代器可分为一下两种:

    • 内部迭代器
    • 外部迭代器

    内部迭代器

    • 例如:
    function each(ary, callback) {
        for (let i = 0; i < ary.length; i++){
            callback.call(ary[i], i, ary[i]);
        }
    }
    each([1, 2, 3], (i, n) => alert([i, n]));
    

    总结: 内部迭代器调用方式简答,但它的适用面相对较窄。

    外部迭代器

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

    var Iterator = function( obj ){
        var current = 0;
        var next = function(){
            current += 1;
        };
        var isDone = function(){
            return current >= obj.length;
        };
        var getCurrItem = function(){
            return obj[ current ];
        };
        return {
            next: next,
            isDone: isDone,
            getCurrItem: getCurrItem
        }
    };
    

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

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

    迭代器模式不仅可以迭代数组,还可以迭代一些类数组的对象。

    无论是内部迭代器还是外部迭代器,只要被迭代的聚合对象拥有 length 属性而且可以用下标访问,那它就可以被迭代。

    例如:arguments{'0': 'a', '1': 'b'}

    // 迭代器支持类数组和对象的遍历
    function each(obj, callback) {
        var value, i = 0, length = obj.length, isArray = isArraylike( obj );
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                value = callback.call( obj[ i ], i, obj[ i ] );
                if ( value === false ) {
                    break;
                }
            }
        } else {
            // 迭代object 对象
            for ( i in obj ) {
                value = callback.call( obj[ i ], i, obj[ i ] );
                if ( value === false ) {
                    break;
                }
            }
        }
        return obj;
    };
    

    倒序迭代器

    中止迭代器

    function each(ary, callback){
        for (let i = 0; i < ary.length; i++){
            // callback 的执行结果返回false,提前终止迭代
            if (callback(i, ary[i]) === false ){ 
                break;
            }
        }
    };
    

    迭代器模式的应用举例

    • nodejs的express框架的中间件思想,处理请求用到的next()方法就是迭代器模式。
    • ECMAScript 6 的 Iterator(遍历器)和 Generator异步编程中使用了next()

    参考

    JavaScript设计模式与开发实践


    起源地下载网 » Javascript 设计模式 - 迭代器模式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元