Splice() w ForEach()? [JS]

Question

Cześć, spotkałem się z dosyć niezrozumiałą dla mnie sytuacją przy zwykłym zastosowaniu forEach() i splice() wewnątrz. Miało to na celu usunięciu wszystkich elementów z tablicy składającej się z 2 elementowych tablic, w których el[1] jest pustym znakiem. Tabela wejściowa:

history.forEach((el, idx) => {
                if (el[1] === '')
                    history.splice(idx, 1)
            })
console.table(history)

W rezultacie czego usunięto niektóre elementy, ale nie wszystkie, co na poniższej ilustracji widać.

Podejrzewałem na początku, że problemem może być usuwanie elementów tabeli podczas operacji na niej, ale nawet przy wykonaniu dodatkowej, referencyjnej tabeli wynik jest ten sam. Każdy element z tych elementów na pewno jest tym samym znakiem co do wartości '', bo to "wypluwała" poprzedzająca pętla. Dziwne również wydaje mi się, dlaczego w tym momencie, jak uruchomię forEach kilkukrotnie to usuwane są wartości, tak jakbym oczekiwał po pierwszym uruchomieniu?

for (let i = 0; i < history.length; i++)
                history.forEach((el, idx) => {
                    if (el[1] === '')
                        history.splice(idx, 1)
                })
console.table(history)

Pytam, bo chciałbym wiedzieć i zrozumieć na przyszłość, skąd taki rezultat. Z góry dziękuję za odpowiedź :)

Answer 1

forEach zapamiętuje na którym indeksie jest obecnie :)

więc jeśli był na indeksie numer 1 (wartości : 400 i "") to usunął wartość.

Prze co wartość 500 i "" została przypisana do indeksu nr 1. W kolejnej iteracji forEach sprawdził 2 indeks (dlatego też został pominięty 1 który powinien być już sprawdzony jeszcze raz)

Comments

Ale właśnie w tej sytuacji ala 'referencja' nie powinna rozwiązać takiego problemu?
 

let temp = history
            history.forEach((el, idx) => {
                if (el[1] === '')
                    temp.splice(idx, 1)
            })
console.table(temp)

---

Najlepszym rozwiązaniem jest funkcja filter która podczas filtrowania tworzy zawsze nową tablicy wynikową dzięki czemu nie masz taki błędów :) 
 

const result = history.filter((el) => el[1] !== '');

Referencja to dalej ta sama tablica :) Kopia mogłaby Ci pomóc też
 

const newArray = [...history];

 

---

var temp = [...history]
            temp.forEach((el, idx) => {
                if (el[1] === '')
                    history.splice(idx, 1)
            })
console.table(history)

Mój błąd, miałem na myśli kopię i faktycznie sprawdziłem przed chwilą referencję. Ale w tym momencie kopia też nie pomaga ;D a powinna na logikę.
Oczywiście faktycznie użyję filtru, tak jak się powinno.

---

Przy kopi powinieneś iterować od końca bo teraz po prostu usuwasz nie te indeksy co trzeba ;) Z przesuwaniem indeksów zawsze jest problem ;)

---

Aaaa, rozumiem, będę pamiętać na przyszłość ^^ dzięki

---

Nie ma sprawy. Plus dla Ciebie za dokładne opisanie problemu. (screeny pomogły) Aż się chciało odpisać :D