Lær, hvordan du bruger forEach-metoden i JS!

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.