Naučte se používat metodu forEach v JS!

Ahoj kolegové tvůrci ,

forEach metoda je opravdu užitečná, když pracujete s poli nebo uzly.
Umožňuje vám spustit funkci zpětného volání pro každý prvek v těchto kontejnerech.
Pojďme se naučit, jak jej používat za méně než minutu!

Pokud dáváte přednost videu, podívejte se na verzi , je to tady :

1. Jak jej používat.

Chcete-li jej použít, musíte jej nakrmit funkcí zpětného volání, která může mít až tři parametry.
Tyto parametry jsou:

• Aktuální hodnota
• Index
• A pole/uzlový seznam, se kterým pracujete.

const array = [1, 2, 3];

array.forEach((current, index, arr) => {
    console.log(current, index, arr);
});

Podívejte se do své konzole/terminálu a uvidíte:

2. Vytvořme tři tlačítka, abychom měli skutečný příklad.

V souboru HTML vytvořte tři tlačítka:

<button data-action="modify">Modify</button>
<button data-action="delete">Delete</button>
<button data-action="update">Update</button>

V souboru JS vyberte tlačítka:

const buttons = document.querySelectorAll('button'); 

Metoda .queryAll vrací seznam uzlů a seznam uzlů má také přístup k metodě forEach ve svém prototypu.

Můžeme jej tedy použít k připojení posluchače událostí ke každému tlačítku:

buttons.forEach(btn => {
    btn.addEventListener('click', (e) => {
        alert(e.target.getAttribute
        ('data-action'))
    })
});

Toto je základní příklad, ale nyní víte, jak užitečná tato metoda je!
Můžete se snadno vyhnout opakování kódu.

Přijďte se podívat na můj Youtube kanál :https://www.youtube.com/c/TheWebSchool

Brzy se uvidíme!

Enzo.