（轉）JS的splice()方法在for循環中的使用問題

在寫JS代碼時，我們常常使用 splice 函數來刪除數組中的元素，因為 splice 函數會直接對數組進行修改，從而不需再自己寫一個算法來移動數組中的其他元素填補到被刪除的位置。splice 功能十分強大，除了可以刪除數組的元素之外，還可以刪除的同時添加新的元素到刪除的位置等等用法。在本篇文章中，我只介紹 splice 的刪除數組元素的用法，和在 for 循環中使用 splice 時遇到過的坑，作為記錄以免我下次忘記了這個坑。

 

在使用 splice 之前，必備條件是，要先有一個數組。。。

 

var arr = new Array(1, 2, 3, 4, 5); //初始化一個數組 [ 1, 2, 3, 4, 5 ]

看到這個數組，我覺得中間的數字3不好看，我要把它刪掉。數字3是數組下標2的元素，而且我只需要刪掉1個數字，於是。。。

 

var index = 2; //數字3在數組中的下標
var amount = 1; //從數組的位置index開始刪除數字的個數

var num = arr.splice( index, amount); //從arr數組的下標2開始刪除一個數字，並將被刪除的數字賦值到num

　

哇，用 splice 來刪除數組元素好簡單啊，於是我開開心心地用到 for 循環里面。。。

var arr = new Array(1, 2, 3, 4, 5); //初始化數字集合
var delete_number = 3; //要被刪除的數字

//遍歷數組
for(var i=0; i<arr.length; i++){
if(arr[i] === delete_number){ //如果找到要被刪除的數字所在的數組下標
var num = arr.splice( i, 1 ); //從i位置開始刪除1個數字
console.log("成功刪除 "+num); //輸出被刪除的數字
}
else{
console.log(arr[i]+" 未被刪除"); //如果i下標的數組元素不是需要被刪除的數字，就輸出數字
}
}

　　

哈哈，討厭的數字3肯定被刪掉了。不過還是要看一下調試信息。。。

 

 

 

看見沒有，數字3果然被刪掉了！！！哈哈哈哈，不過仔細一看，咦，4呢？？？？？？？可愛的數字4沒有被循環遍歷到。。。

 

前面說過，splice 是直接操作並修改數組的，所以當找到數字3時在循環中的 i 下標是2，而當刪除數字3后，數組下標 i 位置中保存的數字變為了數字4，然后到了下一個循環 i 下標為3時，數組下標 i 位置中保存的數字是5，所以跳過了數字4，於是調試信息中沒有可愛的數字4.。。。原理就是這樣子，是不是很繞。

 

 

題外話：因為我的疏忽，在一個for循環中加入了 splice 后，導致了我的H5游戲項目中的眾多 NPC 中的某一個 NPC 並沒有按預期地移動到相應的位置。最重要的是我還提交到了版本庫，與 splice 同時提交了幾百行代碼，所以不能回退版本只能斷點調試到深夜才找到這么小小錯誤。所以我寫了這篇文章來記錄一下在 for 循環中使用 splice 的坑。

 

說了這么多，怎么解決漏掉了數字4這個問題呢?？？很簡單，在使用 splice 的下一句，改一下循環變量值即可。。。

if(arr[i] === delete_number){ //如果找到要被刪除的數字所在的數組下標
var num = arr.splice( i, 1 ); //從i位置開始刪除1個數字
console.log("成功刪除 "+num); //輸出被刪除的數字

i = i-1; //解決方案
}

　　

看完以上內容，是不是覺得特別簡單而且小菜一碟，粗都嘛爹，等一下，我要確保你不會向我一樣犯 splice 引起的低級錯誤，所以請看以下代碼，比以上的稍微復雜一點點，如果你僅根據代碼推出的答案跟結果一樣，就能確保下次使用 splice 時會有意識避開問題了。。。

 

var arr = new Array(1, 2, 3, 4, 5); //初始化數字集合
var delete_number = 3; //要被刪除的數字
var amount = 2; ////從數組的某位置開始刪除數字的個數

var loop = arr.length; //循環次數

//遍歷數組
for(var i=0; i < loop; i++){
if(arr[i] === delete_number){ //如果找到要被刪除的數字所在的數組下標
var num = arr.splice( i, amount ); //從i位置開始刪除1個數字

i = i - 1; //改變循環變量
loop = loop - amount; //改變循環次數

}
else{
console.log( arr[i] + ", ");
}
}

//結果：1,2,5

　　

---------------------
作者：咖啡學編程
來源：CSDN
原文：https://blog.csdn.net/a727911438/article/details/55224532
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！