数组循环删除数据，删除不完整解决方法

逃离我推掉我的手 2021-12-19 04:23 301阅读 0赞

**今天碰到一个坑，业务场景是循环一个数组，删除数组里符合条件的对象，发现数组删除的数据并不完整。直接上代码**

**例如**

<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>

![在这里插入图片描述][20190702171035103.png]  
**点击删除女的数据按钮，按照代码逻辑应该全部删除女，但是实际出现的情况是删除的不完整，如下图**  
![在这里插入图片描述][20190702171048805.png]  
**实际原因是，当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)	
    						}
    					})							
    				}
    			})	
    
    	}

**最后结果：**  
![在这里插入图片描述][20190702174223283.png]

[20190702171035103.png]: /images/20211218/602355a3ca9846fdbbf044f502328a93.png
[20190702171048805.png]: /images/20211218/d3fd5682f70341bd81c35f604ecb235b.png
[20190702174223283.png]: /images/20211218/86b58597955742c1b7bb19e51cac6d4b.png