如何有效的刪除陣列中符合條件的值？

anchovy發表於2022-05-01
陣列

專案開發比較常見的是刪除陣列中指定索引的值，程式碼如下：

let arr = [1, 2, 3, 4, 5, 6, 7, 8]

for(let i=0,len=arr.length; i < len-1; i++) {
  if(i === 2) { // 刪除索引為2的值
    arr.splice(i, 1)
    break
  }
}

console.log(arr) // [1, 2, 4, 5, 6, 7, 8]

從上可以看出刪除1個能通過 break 退出循序，但刪除多個該如何處理呢？

這樣實現？

let arr = [1, 2, 3, 4, 5, 6, 7, 8]

for(let i=0,len=arr.length; i < len-1; i++) {
  if(arr[i] < 5) {
    arr.splice(i, 1)
  }
}

console.log(arr) // ?

結果：[2, 4, 5, 6, 7, 8]，與預想的：[5, 6, 7, 8]對比明顯不是想要的資料，出現這個原因是為什麼呢？下面我們來剖析下迴圈執行步驟和輸出結果：

第1次執行，把符合條件的陣列元素 arr[0] 刪除了，執行後，i 變成了 1，arr 變成了 [2, 3, 4, 5, 6, 7, 8]
在第1次執行的結果上，再執行，就會把 arr[1] 刪除，i 變成了 2，arr 變成了 [2, 4, 5, 6, 7, 8]
接著在第2次執行的結果上執行，就沒有符合條件的了，因為 arr[2] 為 5，不符合條件，arr最終還是[2, 4, 5, 6, 7, 8]，所以執行結果不對。

那麼如何解決呢？我們可以採取 i 還原來處理，讓 i 每次都從 0 開始，程式碼如下：

let arr = [1, 2, 3, 4, 5, 6, 7, 8]

for(let i=0,len=arr.length; i < len-1; i++) {
  if(arr[i] < 5) {
    arr.splice(i, 1)
    i--
  }
}

總結：

這是一個典型的原陣列不斷改變導致的執行結果不對問題，所以在處理陣列的過程中要多思考，當前執行到陣列的什麼位置，這樣可以有效的發現問題，予以解決。

更多前端知識，請關注小程式，不定期有驚喜！

image.png

相關文章