javascript在數組的循環中刪除元素

在開發JavaScript應用的過程當中，常常會遇到在循環中移除指定元素的需求。

按照常規的思路，就是對數組進行一個for循環，而後在循環裏面進行if判斷，在判斷中刪除掉指定元素便可。

可是實際狀況每每不會像預想的那樣順利運行。

出現的問題場景還原

(function () { var arr = [1, 2, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++){ // 打印數組中的狀況，便於跟蹤數組中數據的變化
        console.log(i + ' = ' + arr[i]); // 刪除掉全部爲2的元素
        if(arr[i] === 2) { arr.splice(i, 1); } } console.log(arr); })();

從最終的結果能夠看到，這段代碼實際上只刪除掉了匹配的其中一個元素，而另外一個匹配條件的元素還存在，並不符合程序設計的初衷。

而從打印出來的運行過程不難發現，產生這個結果的緣由是由於，當刪除掉了一個元素後，數組中元素的索引（下標）發生了實時變化，形成了程序的異常。

解決問題的方法

找到了出現問題的緣由，就不難解決問題了。

方法1：實時調整數組中元素的下標對應關係。

(function () { var arr = [1, 2, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++){ // 打印數組中的狀況，便於跟蹤數組中數據的變化
        console.log(i + ' = ' + arr[i]); // 刪除掉全部爲2的元素
        if(arr[i] === 2) { arr.splice(i--, 1); } } console.log(arr); })();

出現問題的緣由，是由於移除掉中間的一個元素以後，該元素後面的元素的索引（下標）都往前加1了，那麼咱們能夠在刪除元素後手動將循環中的下標重置爲如今對應的下標便可（i--）。

方法2：從後往前遍歷數組元素。

(function () { var arr = [1, 2, 2, 3, 4, 5]; for (var i = arr.length - 1; i >= 0; i--) { // 打印數組中的狀況，便於跟蹤數組中數據的變化
        console.log(i + ' = ' + arr[i]); // 刪除掉全部爲2的元素
        if(arr[i] === 2) { arr.splice(i, 1); } } console.log(arr); })();

出現問題的緣由，是由於移除掉中間的一個元素以後，該元素後面的元素的索引（下標）都往前加1了，那麼只要是從後往前循環，就能夠不用管後面元素的索引（下標）了。

方法3：使用while循環代替for循環（仍是從後往前循環）。

(function () { var arr = [1, 2, 2, 3, 4, 5]; var i = arr.length; while(i--) { console.log(i + ' = ' + arr[i]); if(arr[i] === 2) { arr.splice(i, 1); } } console.log(arr); })();

同上面從後往前循環的原理一致，只是將for循環使用了while循環代替。

 

"明天的今天是昨天，昨天又是新的一天。"