循環刪除數組中元素的正確方法

1.循環刪除數組中元素的正確方法

提起循環刪除數組中的元素，最先想到的就是使用for循環和數組的splice方法來實現（正序循環刪除方法），如下代碼用來實現刪除數組中大於2的元素：

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
for (let i = 0, len = arr.length; i < len; i++) {
    if (arr[i]> 2) {
        arr.splice(i, 1);
    }
}
console.log(arr) // [1, 2, 4, 4, 2, 1]

通過循環刪除后，將結果打印出來，發現結果中出現了4，顯然沒有達到想要的結果，這是因為在上述循環刪除過程中由於刪除操作的存在，使得數組中索引值對應的元素值發生變化而產生的，如下圖所示：

當循環到索引值為2的位置時，該位置上對應的數值為3，3滿足大於2的條件，需要刪除，刪除之后，整個數組中的元素會向前移動一位，此時索引值為2的位置上的數值為4，之后會繼續循環到索引值為3的位置，索引值為2的位置上的值就不會再被遍歷，因此元素4得以保留，之后的過程與此類似。

由於刪除操作使得數組中索引值對應的元素值發生變化從而導致循環刪除結果不准確，為了避免這種情況，可以采用以下正確方法：

1、倒序循環刪除

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] > 2) {
        arr.splice(i, 1);
    }
}
console.log(arr) // [1, 2, 2, 1]

倒序循環刪除與正序循環刪除最大區別是：在倒序循環刪除中，它的刪除操作不會影響還未循環遍歷的元素；這就使得即使刪除之后數組中元素會向前移動一位，也不會讓未遍歷的元素跳過遍歷。原理圖如下

2、正序循環刪除，刪除操作后將索引值減1

上面分析中可知在正序循環刪除方法中，刪除操作會使得對應索引值位上的元素清空，整個數組中的元素向前移動一位，補位的元素會填充到執行刪除操作的索引值位置上，移位之后如果不進行任何操作繼續下一個循環，會導致補位元素跳過遍歷，為了防止這種補位元素跳過遍歷現象，應該在刪除操作后將索引值減1，對執行刪除操作的索引值位置再進行一次遍歷。

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
for (let i = 0, len = arr.length; i < len; i++) { 
    if (arr[i]> 2) {
        arr.splice(i, 1);
        i--;
    }
}
console.log(arr) // [1, 2, 2, 1]

原理圖如下：