数组元素删除

关键词：Array数组删除多个元素、JS、倒序删除

背景🤺

删除数组中特定条件的元素（可能存在多个）_JS实现。
实际业务场景为 为用户分配对应维度权限时，通过checkbox点选更新原权限数组（需删除相关子权限），但发现有些子权限未被删除。

错误思路🤡

判断数组中符合条件的元素，直接splice()删除

let arr = [100, 200, 300, 400, 500];
for(let i = 0; i < arr.length; i++){
    if(arr[i] > 300) {
       arr.splice(i ,1);
    }
}
console.log(arr);

执行结果：[100, 200, 300] ？
实际结果：[100,200,300,500]，可能看到这个结果你就能想到原因了

原因：遍历至符合条件的元素 400 时，i 此时为3，执行splice()方法结束，i++变为4。进入下一轮循环，由于 400 被删除，arr.length由原长 5 变为 4，故并未继续进入循环，导致 500 未被删除。

改进思路🤖_临时变量存储数组初始长度

let arrLength = arr.length;

let arr = [100, 200, 300, 400, 500];
let arrLength = (arr.length);
for(let i = 0; i < arrLength; i++){
    if(arr[i] > 300) {
       arr.splice(i ,1);
    }
}
console.log('数组原始长度：', arrLength);
console.log('删除后的数组：', arr);

这下总该万无一失了吧🐶，然而：

运行结果_临时变量存储数组初始长度.png

原因：初始长度虽然拿到了，但是删除了 400 之后，500 的下标已经不是原来的 4 了，而是 3，所以就算判断 arr[4] 也是无意义的。
当然，每次删除元素之后，可以通过 i-1,来解决这个问题。

改进思路_倒序删除

let arr = [100, 200, 300, 400, 500];
for(let i = arr.length-1; i >= 0; i--){
    if(arr[i] > 300) {
       arr.splice(i ,1);
    }
}
console.log('删除后的数组：', arr);

运行结果_倒序删除.png

改进思路_JS_filter()过滤

let arr = [100, 200, 300, 400, 500];
for(let item in arr){
    arr = arr.filter(item => {
        return item <= 300;
    });
}
console.log('删除后的数组：', arr);

截图就不上了，和倒序删除正确结果一致。

总结👻

本文从数组删除元素遇到的实际问题，分析了数组长度、下标变化对遍历数组产生的影响，最后通过倒序删除、JS自带方法等不同方案解决问题。

小白踩坑之路，如有不当希望指出，若有好想法欢迎讨论👶