When writing JS code, we often use the splice function to delete elements in the array, because the splice function will directly modify the array, so there is no need to write an algorithm to move other elements in the array to fill the deleted position. The splice function is very powerful. In addition to deleting the elements of the array, you can also add new elements to the deleted position while deleting, etc. usage. In this article, I only introduce the use of splice to delete array elements, and the pitfalls encountered when using splice in the for loop, as a record so that I will not forget this pitfall next time.
Before using splice, the prerequisite is to have an array first. . .
var arr = new Array(1, 2, 3, 4, 5); //初始化一个数组 [ 1, 2, 3, 4, 5 ]Seeing this array, I think the number 3 in the middle is not good-looking, and I want to delete it. The number 3 is the element of the array subscript 2, and I only need to delete 1 number, so. . .
var index = 2; //数字3在数组中的下标
var amount = 1; //从数组的位置index开始删除数字的个数
var num = arr.splice( index, amount); //从arr数组的下标2开始删除一个数字，并将被删除的数字赋值到numWow, it's so easy to use splice to delete array elements, so I happily used it in the for loop. . .
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下标的数组元素不是需要被删除的数字，就输出数字
}
}Haha, the annoying number 3 must have been cut out. But still have to look at the debug information. . .
Did you see, the number 3 was deleted! ! ! Hahahaha, but take a closer look, hey, what about 4? ? ? ? ? ? ? The cute number 4 is not looped over. . .
As mentioned earlier, splice directly operates and modifies the array, so when the number 3 is found, the i subscript in the loop is 2, and when the number 3 is deleted, the number stored in the array subscript i position becomes the number 4, Then when the subscript i of the next cycle is 3, the number stored in the subscript i position of the array is 5, so the number 4 is skipped, so there is no cute number 4 in the debugging information. . . The principle is like this, isn't it very convoluted.
Digression: Because of my negligence, after adding splice in a for loop, one of the many NPCs in my H5 game project did not move to the corresponding position as expected. The most important thing is that I also submitted to the repository, and submitted hundreds of lines of code at the same time as splice, so I can't roll back the version and can only breakpoint and debug until late at night to find such a small error. So I wrote this article to document the pitfalls of using splice in a for loop.
Having said so much, how to solve the problem of missing the number 4?? ? It's very simple, just change the value of the loop variable in the next sentence of using splice. . .
if(arr[i] === delete_number){ //如果找到要被删除的数字所在的数组下标
var num = arr.splice( i, 1 ); //从i位置开始删除1个数字
console.log("成功删除 "+num); //输出被删除的数字
i = i-1; //解决方案
}
After reading the above content, do you think it is very simple and a piece of cake? Dad, wait a minute, I want to make sure that you will not make low-level mistakes caused by splice like me, so please see the following code, which is slightly more complicated than the above. A little bit, if you get the same answer based on the code alone, you can make sure that you will consciously avoid the problem the next time you use 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] + ", ");
}
}