Vše, co potřebujete vědět o forEach() v Javascriptu

Metoda forEach se používá k iteraci přes pole nebo objekt. Poté se používá buď k extrahování, manipulaci nebo transformaci dat nějakým způsobem.

Struktura forEach je následující. Uvedl jsem také volitelné argumenty pro funkci.

Jak funguje metoda forEach()?

array.forEach(function(currentValue, index [optional], array [optional]), thisArg[optional])

Metoda forEach prochází dané pole, avšak na rozdíl od běžného for smyčka předává funkci zpětného volání za každé neprázdné prvek pole. Podívejme se znovu na syntaxi forEach.

// Lets initialize an array called numbers
let numbers = [1,2,3,4]

numbers.forEach(function(){
    // code
})

Zde vidíme, že metoda forEach přebírá funkci zpětného volání. Funkce zpětného volání přebírá tři výše uvedené argumenty. Aktuální hodnota, index a samotný objekt pole.

Aktuální hodnota je hodnota v této aktuální iteraci. Toto je jediný požadovaný argument, takže nazvěme argument něco sémanticky správného. Seznam čísel by měl prvky nazývané number.

numbers.forEach(function(number){
    // code
})

Nyní můžeme do funkce přidat nějakou logiku. Pojďme se zatím přihlásit do konzole.

let numbers = [1,2,3,4]
numbers.forEach(function(number){
    console.log(number);
})

// logs 1
// logs 2
// logs 3
// logs 4

Můžeme také definovat funkce zpětného volání samostatně pro metodu forEach.

let users = ['user1','user2','user3']

// A method to use as callback
function findUser(user){
    if(user == 'user2') console.log('user found');
}

// Pass the callback into the function
users.forEach(findUser);
// logs user found

A co zbývající volitelné argumenty?

Index

Prvním volitelným argumentem pro funkci zpětného volání je index. Index představuje aktuální počet iterací. Ekvivalent k i proměnná v běžném pro smyčka, for (let i=0; i < array.length; i++) .

let names =['kate','jack','john']
names.forEach(function(name,index){
    console.log(index, name);
})

// logs 0 kate
// logs 1 jack
// logs 2 john

Rychlé řešení:pro každé zpětné volání funkce šipky

Můj preferovaný způsob psaní funkcí je jako funkce šipky. Funkci zpětného volání můžeme nahradit funkcí šipky.

array.forEach((element) => {
    console.log(element);
})

thisArg

Tento parametr se nepoužívá příliš často, ale thisArg odkazuje na kontext, ve kterém by mělo být voláno zpětné volání. Pokud nezadáte thisArg parametr, kontext, na který odkazuje toto klíčové slovo se stane oknem .

Karta, na které se nacházíte, je ve vašem prohlížeči kontext okna, když spouštěla ​​kód JavaScript. Okno lze také považovat za nejvzdálenější globální objekt.

Mějte prosím na paměti, že nemůžete použít funkci šipky, pokud chcete, aby byl kontext svázán s thisArg namísto okna.

array.forEach(function(item)=>{
    console.log(this === window) // true
    console.log(this === array) //false
})

// add thisArg parameter.
array.forEach(function(item)=>{
    console.log(this === window) //false
    console.log(this == array) //true
}, array)

Dokonce i oficiální dokumentace Mozzila
měl problém přijít s příkladem. Pokud však někdy narazíte na skutečný případ použití, dejte mi vědět, abych mohl tento článek aktualizovat.

Kdy byste měli použít forEach ve smyčce for?

1. forEach uchovává všechny proměnné v rozsahu funkce zpětného volání. Proměnné vně si tedy zachovávají hodnotu. Níže vidíme, že jméno proměnná zachovává rozsah bloku pro funkci zpětného volání.

const name = 'john'
const arrNames = ['jack','jill','june']

arrNames.forEach(function(name){
    console.log(name);
})
// logs john

console.log(name)
// logs name

1. Zabraňte chybám na hranicích při přístupu k prvkům indexováním pomocí for smyčka. Řekněme, že jsme chtěli iterovat celý seznam, ale nevložili jsme do smyčky správný rozsah. Tomu můžeme zabránit použitím forEach.

let fruits = ['apple','banana','orange'];
for(let i = 0; i <= fruits.length ; i++){
    console.log(fruits[i]);
}
// logs apple
// logs banana
// logs orange
// logs undefined (since we stepped out of range)

fruits.forEach(function(fruit){
    console.log(fruit);
})

// logs apple
// logs banana
// logs orange

Kdy byste neměli používat forEach přes smyčku for?

Používám forEach smyčka, kdekoli je to možné, protože je stručnější než for smyčka. Smyčce forEach se však můžeme vyhnout pouze tehdy, když se chceme ze smyčky předčasně vymanit pomocí příkazu break nebo předejte aktuální iteraci pomocí příkazu pokračovat .

Chceme se například vymanit ze smyčky, když je splněna nějaká podmínka hledání.

let conditionalCheck = [1,2,3,null,4,5,6]

for(let i = 0; i < conditionalCheck.legnth; i++){
    if(conditionalCheck[i] == null){
        break;
    } 
    console.log(conditionalCheck[i])
}

// logs 1
// logs 2
// logs 3

Závěr

Tento příspěvek by vám měl poskytnout informace, které potřebujete při rozhodování o tom, jaký typ smyčky použít. Pokud jde o výkon mezi dvěma smyčkami, smyčka for je rychlejší ve srovnání se smyčkou forEach. Čitelnost a udržovatelnost kódových bází by však měla být prioritou, kterou forEach může poskytnout.