今天碰到一个坑,业务场景是循环一个数组,删除数组里符合条件的对象,发现数组删除的数据并不完整。直接上代码
例如
<template>
<div>
<ul>
<li :class='item.id' v-for="item in list">{{item.sex}}</li>
</ul>
<button @click="fn">删除女的数据</button>
</div>
</template>
<script>
export default {
components: {},
data(){
return{
list:[
{id:'1',name:'111',age:'22',sex:'男'},
{id:'2',name:'111',age:'22',sex:'女'},
{id:'3',name:'111',age:'22',sex:'女'},
]
}
},
mounted(){
let m=this;
},
methods:{
fn(){
let m=this;
m.list.forEach((v,i)=>{//删除区域下的分组
if(v.sex=='女'){
m.list.splice(i,1)
}
})
}
},
}
</script>
<style>
</style>
点击删除女的数据按钮,按照代码逻辑应该全部删除女,但是实际出现的情况是删除的不完整,如下图
实际原因是,当id为2的数据条件符合条件,通过 i 执行splice,来删除数据,这个时候,原来的list数组从
{id:'1',name:'111',age:'22',sex:'男'},
{id:'2',name:'111',age:'22',sex:'女'},
{id:'3',name:'111',age:'22',sex:'女'},
变成
{id:'1',name:'111',age:'22',sex:'男'},
{id:'3',name:'111',age:'22',sex:'女'},
这个时候list数组的长度从3变成2了,i 的数据从0,1,2 变成 0,1;forEach循环执行完i=1的时候就不会再执行下去了。所以数据id为3的数据没有删除掉
解决方法:重新定义一个新数组,遍历两个数组对比删除条件符合的数据**(不是赋值数组)**
fn(){
let m=this;
let arr=[]
m.list.forEach((v1,i1)=>{//重新定义一个新数组
arr.push(v1)
})
//let arr=m.list(这种赋值数组,是不行的,删除数据还是会指向list数组)
arr.forEach((v,i)=>{//删除数组下的数据
if(v.sex=='女'){
m.list.forEach((vv,ii)=>{
if(vv.id==v.id){
m.list.splice(ii,1)
}
})
}
})
}
最后结果: