數組循環刪除數據，刪除不完整解決方法

今天碰到一個坑，業務場景是循環一個數組，刪除數組裏符合條件的對象，發現數組刪除的數據並不完整。直接上代碼

例如

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

	}

最後結果：