JS逆序遍歷實(shí)現(xiàn)代碼

2019-11-20 13:50:21

字體：大中小

供稿：網(wǎng)友

最常用的遍歷方式為for語(yǔ)句（也有遞歸、while方式）。當(dāng)我們遍歷一個(gè)數(shù)組的時(shí)候，我們一般會(huì)這么做：

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]);
}

這就是最常用的遍歷方式：正序遍歷。它從數(shù)組的第一項(xiàng)依次走到最后一項(xiàng)。

那為什么今天小劇還會(huì)提到逆序遍歷呢？

這里不得不提下小劇寫的組件里最常用的一個(gè)模塊：events。用于創(chuàng)建自定義事件模型，處理事件的監(jiān)聽(tīng)及觸發(fā)，最簡(jiǎn)單的發(fā)布訂閱（pub/sub）模式。因?yàn)樽罱l(fā)現(xiàn)存在內(nèi)存溢出的隱患，需要在原有的基礎(chǔ)上增加一個(gè)解除綁定的方法。

因?yàn)橥皇录幕卣{(diào)函數(shù)是放在同一數(shù)組中，解除綁定也只需要從數(shù)組中找到對(duì)應(yīng)的回調(diào)函數(shù)（同一回調(diào)函數(shù)可能綁定多次），并且移除即可。

很簡(jiǎn)單的需求，于是很自然地寫出類似下面的代碼：

復(fù)制代碼代碼如下:

//移除數(shù)組中的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);

很正常的代碼有木有，可最終輸出結(jié)果卻是：[1, 2, 2, 1, 1, 2],顯然執(zhí)行結(jié)果不符合預(yù)期。

問(wèn)題出在哪兒呢？

仔細(xì)分析了一下，發(fā)現(xiàn)問(wèn)題出在了每次匹配成功，執(zhí)行移除操作之后，都會(huì)跳過(guò)下一個(gè)待檢查項(xiàng)，因?yàn)閿?shù)組中之后的每一項(xiàng)都向前上升一位。

找到了問(wèn)題所在，改了下代碼，在執(zhí)行移除操作之后，調(diào)整序列索引index（i）。

復(fù)制代碼代碼如下:

//移除數(shù)組中的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);
    //調(diào)整序列索引
    i = i-1;
  }
}
console.log(arr);

問(wèn)題解決了，但總感覺(jué)修改序列索引是件調(diào)戲for循環(huán)的事。于是靈光一閃，啪啪啪，敲出下面的代碼：

復(fù)制代碼代碼如下:

//移除數(shù)組中的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);

遍歷的過(guò)程不變，唯一變化的是遍歷的順序變了，對(duì)了，還少了一個(gè)變量total。

好吧，我承認(rèn)今天寫的東西很

麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

JS逆序遍歷實(shí)現(xiàn)代碼