Js中循环删除数组元素

JavaScript里在for循环里splice删除数组指定元素的注意事项：需要删除多个元素时，在for循环里直接splice删除会导致index索引变化。

logo.png

例如要删除性别为男(male)的学生

var stuArr = [
  {name:'Jesse',gender:'male'},
  {name:'Leo',gender:'male'},
  {name:'Sophia',gender:'female'},
  {name:'Kathy',gender:'female'},
  {name:'Gaviin',gender:'male'}
];

如果直接在for循环里splice删除，会导致删除不完全，因为splice导致了数组本身的改变，索引值也会变化,错误代码如下：

// 错误方法，不能这样写
for(var i=0; i<stuArr.length; i++) {
  if(stuArr[i].gender === 'male') {
    stuArr.splice(i,1);
  }
}
console.log(stuArr);
// 运行结果，删除后数组当前值
[
  {name:'Leo',gender:'male'},
  {name:'Sophia',gender:'female'},
  {name:'Kathy',gender:'female'},
]

以上代码运行结果可见因数组动态变化导致索引变化，所以不能这样删除，下面总结三种正确的实现方式

1. 循环中索引添加递加判断,只有在不删除元素时才对索引递加

for(var i=0; i<stuArr.length;) {
  if(stuArr[i].gender === 'male') {
    stuArr.splice(i,1);
  }else{
    i++;
  }
}
console.log(stuArr);
// 运行结果，删除后数组当前值
[
  {name:'Sophia',gender:'female'},
  {name:'Kathy',gender:'female'},
]

2. 先获取所有待删除元素的下标，再使用for循环倒序删除，因为从后往前删除不会使数组前方的数组索引发生变化。

// 首先获取所有待删除的数组下标
var indexArr = [];
for(var i=0;i<stuArr.length;i++){
  if(stuArr[i].gender === 'male') {
    indexArr.push(i);
  }
}
获取到的索引数组为：[0,1,4];
for(var i=indexArr.length-1;i>=0;i--) {
  stuArr.splice(indexArr[i],1);
}
// 运行结果，删除后数组当前值
[
  {name:'Sophia',gender:'female'},
  {name:'Kathy',gender:'female'},
]

3. 直接使用Array的filter方法

stuArr = stuArr.filter(function(item){
  return item.gender !== 'male';
})
// 运行结果，删除后数组当前值
[
  {name:'Sophia',gender:'female'},
  {name:'Kathy',gender:'female'},
]