參考
js在循環(huán)遍歷數(shù)組中刪除指定元素踩坑( foreach.. for.. for..in.. )
JS-數(shù)組遍歷中刪除元素的方法優(yōu)化
一廊驼、刪除失效的例子
let arr = [1, 1, 2];
arr.forEach((item, index, arr) => {
if (item == 1) {
arr.splice(index, 1);
}
})
console.log(arr); // [1, 2]
第一次forEach循環(huán),arr是[1, 1, 2]江咳,index是0币励,item是1,if條件成立片择,使用splice刪除了item1嚎卫,arr變成[1, 2]
第二次forEach循環(huán)勃救,arr是[1, 2]新锈,index是1甲脏,item是2,if條件不成立妹笆,使用splice無法刪除了第二個重復(fù)的1
二块请、解決方案
1.使用filter()方法篩選符合條件的元素,去除不符合條件的元素
let arr = [1, 1, 2];
arr = arr.filter(item => {
return item != 1;
});
console.log(arr);
2.刪除下標i的時候執(zhí)行 i--(使下標回退一個位置)
出現(xiàn)問題的原因就是splice刪除當前數(shù)據(jù)時晾浴,導(dǎo)致后面的數(shù)據(jù)前移,最直接的解決辦法就是i也跟著前移即可牍白。
let arr = [1, 1, 2];
for (let i = 0; i < arr.length; i++) {
if (arr[i] == 1) {
arr.splice(i, 1);
i--;
}
}
console.log(arr);
注意脊凰,此時使用For in遍歷是不行的
let arr = [1, 1, 2];
for (let i in arr) {
if (arr[i] == 1) {
arr.splice(i, 1);
i--;
}
}
console.log(arr);// [1, 2]
原因是迭代器的i,每次都重新取值了茂腥,i--失效狸涌。
3.從后向前遍歷,這樣就算后面的數(shù)據(jù)前移最岗,也不影響繼續(xù)遍歷
let arr = [1, 1, 2];
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] == 1) {
arr.splice(i, 1);
}
}
console.log(arr);
三帕胆、擴展到map
private testDelMap(): void {
let m: Map<string, number> = new Map();
m.set("a", 1);
m.set("b", 2);
m.set("c", 3);
m.set("d", 3);
m.set("a", 4);
for (let [k, v] of m) {
console.log("map k:", k, v);
}
for (let [k, v] of m) {
if (v == 3) {
m.delete(k);
}
}
for (let [k, v] of m) {
console.log("new map k:", k, v);
}
}
測試結(jié)果說明可以安全刪除