for迴圈無法刪除陣列所有指定元素

當前還有內建的方法可以刪除陣列中為特定值的所有元素。

比如刪除陣列中所有值為"螞蟻部落"的元素。

首先想到的是利用for迴圈遍歷陣列元素進行比對，然後刪除符合要求的元素。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Array.prototype.removeByValue = function(val){
  for(let i=0; i<this.length; i++) {
    if(this[i] == val) {
      this.splice(i, 1);
    }
  }
}
let arr=["螞蟻部落", 4, "antzone", "螞蟻部落"];
arr.removeByValue("螞蟻部落");
console.log(arr);

程式碼執行效果截圖如下：

上述程式碼表現非常完美，陣列中的兩個"螞蟻部落"全部被刪除。

通過for迴圈挨個進行比對，如果陣列元素值等於"螞蟻部落"，那麼刪除。

無論是邏輯還是執行結果都看起來無懈可擊，然而事實卻並非如此。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Array.prototype.removeByValue = function(val){
  for(let i=0; i<this.length; i++) {
    if(this[i] == val) {
      this.splice(i, 1);
    }
  }
}
let arr=["螞蟻部落","螞蟻部落", 4, "antzone"];
arr.removeByValue("螞蟻部落");
console.log(arr);

程式碼執行效果截圖如下：

removeByValue方法程式碼沒有進行任何改變，唯一改變的是陣列最後一個元素挪到第二個位。

可以看到此次並沒有成功刪除所有的"螞蟻部落"。

原因分析如下：

（1）.第一次刪除的時候，完全沒有任何問題。

（2）.但是以後問題來了，當再次迴圈的時候，陣列的length和之前相比小了1，第一個被刪除元素後面所有的元素的索引位置集體減1，也就是在陣列中的位置向前挪一位，然而i的值依然按照既定規則加1，所以第二個"螞蟻部落"無法for迴圈遍歷到，當然也就無法被刪除。

程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Array.prototype.removeByValue = function(val){
  for(let i=0; i<this.length; i++) {
    if(this[i] == val) {
      this.splice(i, 1);
      i=-1;
    }
  }
}
let arr=["螞蟻部落","螞蟻部落", 4, "antzone", ];
arr.removeByValue("螞蟻部落");
console.log(arr);

程式碼執行效果截圖如下：

上面程式碼成功刪除所有的指定元素。

為對程式碼的唯一改動就是，刪除指定元素之後，將i重置為-1。

這樣的話，再進行下一次迴圈的時候，首先會執行i++，這樣i的值變成0。

於是又從陣列的第一個元素進行比對，絕對不可能遺漏任何元素。

相關閱讀：

（1）.prototype參閱JavaScript prototype 原型一章節。

（2）.splice方法參閱JavaScript 陣列 splice一章節。