1. 程式人生 > >JavaScript_02面向物件程式設計(原型【四】)自己實現each方法可遍歷多維陣列

JavaScript_02面向物件程式設計(原型【四】)自己實現each方法可遍歷多維陣列

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <script type="text/javascript" charset="UTF-8">
        /*
         * 原型的另外一個作用就是擴充套件物件中的屬性和方法:
         * 1.模擬Array中each迴圈方法。
         * 
         * 2.foreach
         * 
         */
        
        
        //Array each方法
        
        //ECMA5 forEach 迴圈遍歷陣列的每一項。
          
        //var arr=[1,2,3,[4,5]];ECMA5只適合遍歷一維陣列。
      /*  
        var arr=[1,2,3,4,5];
        
        arr.forEach(function(item,index,array){
            
            alert(item);
        });
        */
       
       //自己實現一個Array each方法,能遍歷多維陣列。
       
       var arr = [1,2,3,[4,[5,[6]]]];//arr.length
       
       
       Array.prototype.each=function(fn){
           
           try{
               //1.目的:遍歷陣列的每一項。
              // var i = 0;//計算器,記錄當前遍歷的元素位置.
               this.i || (this.i=0);
               
               //2.嚴謹判斷什麼時候走each核心方法;
               //當陣列長度>0,並且傳遞的引數必須為函式.
               if(this.length>0 && fn.constructor==Function){
                   //迴圈遍歷陣列的每一項
                   while(this.i<this.length){//遍歷while迴圈的範圍
                       //核心程式碼:獲取陣列的每一項
                       var e=this[this.i];
                       
                       //如果當前元素獲取到了,且當前元素是一個數組。
                       if(e && e.constructor==Array){
                           //直接做遞迴操作。
                             e.each(fn);
                       }else{
                           //如果不是陣列(那就是一個單個元素)
                           
                           //fn(e);
                          // var obj=true;
                           //fn.apply(obj,[e]);
                           //這個目的就是為了把陣列的當前元素傳遞給fn函式,並讓函式執行。
                           //fn.apply(e,[e]);//節省記憶體
                           fn.call(e,e);
                       }
                       this.i++;
                     
                   }
                   this.i=null;//釋放記憶體,垃圾回收機制回收變數       
               }          
           }catch(ex){
               //do something       
           }     
           retrun this;      
       }          
        arr.each(function(item){
            alert(item);
        })           
    </script>
</head>
<body>
    <h1>New Web Project Page</h1>
</body>