cocos2d JS 源生js实现each方法

时间 2019-11-06

标签 cocos2d cocos 实现方法栏目 Cocos2d-x 繁體版

原文原文链接

javascript笔记——源生js实现each方法

出处：http://www.lovejavascript.com/#!zone/blog/content.html?id=48javascript

jquery里面有个each方法，将循环操做简化、便捷。html

随后es出了个forEach方法，两个虽然用法相近，可是不能处理对象类型。且没法经过return true达到continue效果。java

此外还有个every方法，该方法虽然能够实现continue效果，可是在处理类数组与对象类型时，彻底无用。jquery

在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？我在GridManager.js中集成了该方法，代码以下:数组

 
        // 经过字面量方式实现的函数each 
       
        var  
        each =   
        function 
        (object, callback){ 
       
        var  
        type = ( 
        function 
        (){ 
       
        switch  
        (object.constructor){ 
       
        case  
        Object: 
       
        return  
        'Object' 
        ; 
       
        break 
        ; 
       
        case  
        Array: 
       
        return  
        'Array' 
        ; 
       
        break 
        ; 
       
        case  
        NodeList: 
       
        return  
        'NodeList' 
        ; 
       
        break 
        ; 
       
        default 
        : 
       
        return  
        'null' 
        ; 
       
        break 
        ; 
       
        } 
       
        })(); 
       
        // 为数组或类数组时, 返回: index, value 
       
        if 
        (type ===  
        'Array'  
        || type ===  
        'NodeList' 
        ){ 
       
        // 因为存在类数组NodeList, 因此不能直接调用every方法 
       
        [].every.call(object,  
        function 
        (v, i){ 
       
        return  
        callback.call(v, i, v) ===  
        false  
        ?  
        false  
        :  
        true 
        ; 
       
        }); 
       
        } 
       
        // 为对象格式时,返回:key, value 
       
        else  
        if 
        (type ===  
        'Object' 
        ){ 
       
        for 
        ( 
        var  
        i  
        in  
        object){ 
       
        if 
        (callback.call(object[i], i, object[i]) ===  
        false 
        ){ 
       
        break 
        ; 
       
        } 
       
        } 
       
        } 
       
        }

咱们来try一下，测试下数组、对象、类数组类型及中断效果函数

数组类型:post

 
        var  
        _array = [1,2,3,4]; 
       
        each(_array,  
        function 
        (i, v){ 
       
        console.log(i +  
        ': '  
        + v); 
       
        });

输出以下:测试

对象类型:url

 
        var  
        object = {a:1, b:2, c:3} 
       
        each(object,  
        function 
        (i, v){ 
       
        console.log(i +  
        ': '  
        + v); 
       
        });

输出以下:spa

类数组类型 :

 
        var  
        ele = document.querySelectorAll( 
        'div' 
        ); 
       
        each(ele,  
        function 
        (i, v){ 
       
        console.log(i +  
        ': '  
        + v); 
       
        });

输出以下:

增长中断条件:

 
        var  
        object2 = {name: 
        'baukh' 
        , age:  
        '29' 
        , six: 
        '男' 
        , url:  
        'www.lovejavascript.com' 
        ,} 
       
        each(object2,  
        function 
        (i, v){ 
       
        if 
        (i ===  
        'age' 
        ){  
        //若是存在键值为age的属性时，则输出警告，用于实现continue效果 
       
        console.log( 
        '存在键值为age，这家伙已经' 
        +v+ 
        '岁了' 
        ); 
       
        return  
        true 
        ; 
       
        } 
       
        if 
        (i ===  
        'six'  
        && v ===  
        '男' 
        ){ 
        //若是存在键值为age的属性时，则输出跳出，用于实现break效果 
       
        console.log( 
        '存在键值为six,是个男的，不用关注了~' 
        ); 
       
        return  
        false 
        ; 
       
        } 
       
        console.log(i +  
        ': '  
        + v); 
       
        });

输出以下:

从结果能够看出来，each方法已经实现了jquery的each功能。且实现如此简单~