今天測試代碼，發(fā)現(xiàn)一個(gè)致命bug鼓黔，在做刪除文件處理時(shí)央勒，我通過文件名查找當(dāng)前刪除項(xiàng)，結(jié)果由于沒有考慮到文件列表里會(huì)出現(xiàn)同名文件澳化，所以對本文件的刪除可能會(huì)導(dǎo)致同名文件也被刪除崔步。
deleteExistedFile(file){
let data = {}
data.loanId = this.loanId
data.docId = this.loanDocument.id
data.filename = file.name
return remove(data).then((res)=>{
for(let i=0;i<this.fileStack.length;i++){
let item = this.fileStack[i]
if(item.name === file.name || item === file.name){
this.fileStack.splice(i,1)
}
}
this.validate()
}).catch((e)=>{
})
},
這段代碼的問題是，我刪第一個(gè)fan.jpg時(shí)缎谷，i=0井濒，fileList被splice掉了第一個(gè)。第二次循環(huán)時(shí)i=1慎陵，之前為i=2時(shí)的fan.jpg在此時(shí)已經(jīng)變成新的fileList里的i=1眼虱。結(jié)果就是喻奥，刪第一個(gè)fan.jpg時(shí)席纽，會(huì)把第三個(gè)fan.jpg刪掉。
致命原因?yàn)椋?strong>我對正在循環(huán)的數(shù)組進(jìn)行了“增刪”操作
1171520600785_.pic.jpg
1191520600965_.pic.jpg
于是我把用文件名查找改成了通過fileStack的index查找撞蚕，這樣就避免了多刪的情況：
deleteExistedFile(file, index){
let data = {}
data.loanId = this.loanId
data.docId = this.loanDocument.id
data.filename = file.name
return remove(data).then((res)=>{
this.fileStack.splice(index,1)
this.validate()
}).catch((e)=>{
})
},
但是润梯，這樣寫只能適用于單文件一個(gè)個(gè)刪除，如果多文件同時(shí)刪除的話甥厦，又會(huì)出現(xiàn)問題纺铭。
所以，我能想最好的解決方式就是刀疙，先通過循環(huán)的方式給數(shù)組里要?jiǎng)h除的item加上readyToRemove=true的標(biāo)簽舶赔，循環(huán)結(jié)束，再對加了標(biāo)簽的新數(shù)組進(jìn)行map谦秧，去除item. readyToRemove=true的項(xiàng)竟纳。
核心思想
千萬不要對正在for循環(huán)的數(shù)組進(jìn)行增刪操作
