Splice

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

在JS中常使用该方法来更新数组数据,使用起来着实方便,但此方法在js的循环体(for,forEach,map,for in,for of)中使用,会存在问题

举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13

let apple1 = [1, 2, 3, -3, 4, 5, -5, 6, 7];
let apple2 = [1, 2, 3, -3, -4, 5, -5, 6, 7];
let apple3 = [1, 2, 3, -3, -4, -5, -5, 6, 7];
for (var i = 0; i <= apple1.length; i++) {
	if (apple1[i] < 0) {
		apple1.splice(i, 1);
	}
}
console.log('apple1=>',apple1)

// apple1=>  [1, 2, 3, 4, 5, 6, 7]
// apple2=>  [1, 2, 3, -4, 5, 6, 7]
// apple3=>  [1, 2, 3, -4, -5, 6, 7]

疑问

为什么第一组看起来正常,后面两组结果不正常呢?通过大佬的指点🙇🙆‍️🙇后,又看了下文档,
通过文档可知,splice是直接修改数组的,所以第一组当找到-3时,下标为3,此时执行splice移除该元素,移除后,此时的下标3指向的是4,但是下标为3的已经循环了一次,等到再次执行时,就会直接跳过4,继续执行下标为4的5,再次找到了小于0的-5,此时再次执行splice,下标的指向再次发生变化,跳过6,直接执行下标为6的7,至此循环结束

解决

只需要在splice执行后,追加i–,将其下标往前移动一位或者使用倒序来进行遍历即可,以此来避开这个坑.🎉🎉🎉