（轉）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