DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS逆序遍歷實現代碼
JS逆序遍歷實現代碼
編輯:關於JavaScript     

最常用的遍歷方式為for語句(也有遞歸、while方式)。當我們遍歷一個數組的時候,我們一般會這麼做:

復制代碼 代碼如下:
var arr = [1,2,3,4,5,6,7,8,9,10];
for(var i=0,total=arr.length;i<total;i++){
  console.log(i,arr[i]);
}

這就是最常用的遍歷方式:正序遍歷。它從數組的第一項依次走到最後一項。

那為什麼今天小劇還會提到逆序遍歷呢?

這裡不得不提下小劇寫的組件裡最常用的一個模塊:events。用於創建自定義事件模型,處理事件的監聽及觸發,最簡單的發布訂閱(pub/sub)模式。因為最近發現存在內存溢出的隱患,需要在原有的基礎上增加一個解除綁定的方法。

因為同一事件名的回調函數是放在同一數組中,解除綁定也只需要從數組中找到對應的回調函數(同一回調函數可能綁定多次),並且移除即可。

很簡單的需求,於是很自然地寫出類似下面的代碼:

復制代碼 代碼如下:
//移除數組中的2
var arr = [1,2,2,2,2,1,1,2,2];
for(var i=0,total=arr.length;i<total;i++){
  if(arr[i] == 2){
    //符合條件,移除
    arr.splice(i,1);
  }
}
console.log(arr);

很正常的代碼有木有,可最終輸出結果卻是:[1, 2, 2, 1, 1, 2],顯然執行結果不符合預期。

問題出在哪兒呢?

仔細分析了一下,發現問題出在了每次匹配成功,執行移除操作之後,都會跳過下一個待檢查項,因為數組中之後的每一項都向前上升一位。

找到了問題所在,改了下代碼,在執行移除操作之後,調整序列索引index(i)。

復制代碼 代碼如下:
//移除數組中的2
var arr = [1,2,2,2,2,1,1,2,2];
for(var i=0,total=arr.length;i<total;i++){
  if(arr[i] == 2){
    //符合條件,移除
    arr.splice(i,1);
    //調整序列索引
    i = i-1;
  }
}
console.log(arr);

問題解決了,但總感覺修改序列索引是件調戲for循環的事。於是靈光一閃,啪啪啪,敲出下面的代碼:

復制代碼 代碼如下:
//移除數組中的2
var arr = [1,2,2,2,2,1,1,2,2];
for(var i = arr.length-1;i!=-1;i--){
  if(arr[i] == 2){
    //符合條件,移除
    arr.splice(i,1);
  }
}
console.log(arr);

遍歷的過程不變,唯一變化的是遍歷的順序變了,對了,還少了一個變量total。

好吧,我承認今天寫的東西很屌絲,但通過這個例子,給以後寫代碼的時候提了個醒,在遍歷過程中,如果涉及到修改數組本身(增刪),逆序遍歷是個比較保險的遍歷方式。

coding筆記,留給以後嘲笑自己!

轉載請注明來源:http://bh-lay.com/blog/148c07761fa

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved