Hej medskabere ,
forEach metode er virkelig praktisk, når du arbejder med arrays eller nodelister.
Det giver dig mulighed for at køre en tilbagekaldsfunktion for hvert element i disse containere.
Lad os lære at bruge det på mindre end et minut!
Hvis du foretrækker at se videoen version , det er lige her :
1. Sådan bruges det.
For at bruge det skal du fodre det med en tilbagekaldsfunktion, som kan tage op til tre parametre.
Disse parametre er:
- Den aktuelle værdi
- Indekset
- Og den matrix/nodeliste, som du arbejder med.
const array = [1, 2, 3];
array.forEach((current, index, arr) => {
console.log(current, index, arr);
});
Tag et kig i din konsol/terminal, og du vil se:
2. Lad os oprette tre knapper for at få et rigtigt eksempel.
I en HTML-fil skal du oprette tre knapper:
<button data-action="modify">Modify</button>
<button data-action="delete">Delete</button>
<button data-action="update">Update</button>
I din JS-fil skal du vælge knapperne:
const buttons = document.querySelectorAll('button');
.queryAll-metoden returnerer en nodeliste, og nodelisterne har også adgang til forEach-metoden i deres prototype.
Således kan vi bruge det til at knytte en begivenhedslytter til hver knap:
buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
alert(e.target.getAttribute
('data-action'))
})
});
Dette er et grundlæggende eksempel, men du ved nu, hvor nyttig denne metode er!
Du kan nemt undgå kodegentagelse.
Kom og tag et kig på min YouTube-kanal :https://www.youtube.com/c/TheWebSchool
Vi ses snart!
Enzo.