logo

Alt hvad du behøver at vide om forEach() i Javascript

ForEach-metoden bruges til at iterere over en matrix eller et objekt. Bruges derefter til enten at udtrække, manipulere eller transformere dataene på en eller anden måde.

Strukturen af ​​forEach er som følgende. Jeg har også angivet de valgfrie argumenter for funktionen.

Hvordan fungerer forEach()-metoden? 

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

ForEach-metoden går gennem det givne array dog ​​i modsætning til den almindelige for sløjfe den passerer en tilbagekaldsfunktion for hver ikke-tom element i arrayet. Lad os tage et kig på forEach-syntaksen igen. 

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

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

Her kan vi se, at forEach-metoden tager en tilbagekaldsfunktion. Callback-funktionen tager tre argumenter nævnt ovenfor. Den aktuelle værdi, indeks og selve array-objektet.

Den aktuelle værdi er værdien på den aktuelle iteration. Dette er det eneste nødvendige argument, så lad os kalde argumentet for noget semantisk korrekt. En liste over tal ville have elementer kaldet nummer. 

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

Nu kan vi tilføje noget logik til funktionen. Lad os logge på konsollen for nu. 

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

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

Vi kan også definere tilbagekaldsfunktionerne separat for forEach-metoden.

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

Hvad med de resterende valgfrie argumenter?

Indeks

Det første valgfrie argument for tilbagekaldsfunktionen er indekset. Indekset er en repræsentation af det aktuelle antal iterationer. Svarende til i variabel i en almindelig for loop, 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

Hurtig til side:for hvert tilbagekald en pilfunktion

Min foretrukne metode til at skrive funktioner er som pilefunktioner. Vi kan erstatte tilbagekaldsfunktionen med en pilefunktion. 

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

thisArg

Denne parameter bruges ikke særlig ofte, men thisArg henviser til den kontekst, som tilbagekald skal kaldes på. Hvis du ikke angiver en thisArg parameter, konteksten, der henvises til af dette søgeord bliver vinduet .

I din browser er den fane, du er på, vindueskonteksten, da den udførte JavaScript-koden. Vinduet kan også opfattes som det yderste globale objekt.

Vær opmærksom på, at du ikke kan bruge en pilefunktion, hvis du ønsker, at konteksten skal være bundet til thisArg i stedet for vinduet. 

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)

Selv den officielle Mozzila-dokumentation
havde svært ved at komme med et eksempel. Men hvis du nogensinde støder på en faktisk anvendelse af dette, så lad mig det vide, så jeg kan opdatere denne artikel.

Hvornår skal du bruge forEach over en for-løkke?

  1. forEach holder alle variabler inden for omfanget af tilbagekaldsfunktionen. Så variabler udenfor bevarer værdien. Nedenfor kan vi se, at navnet variabel bevarer blokomfanget for tilbagekaldsfunktionen.
const name = 'john'
const arrNames = ['jack','jill','june']

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

console.log(name)
// logs name
  1. Undgå grænsefejl, når vi får adgang til elementer ved at indeksere ved hjælp af for sløjfe. Lad os sige, at vi ønskede at gentage den fulde liste, men ikke satte det korrekte interval i løkken, vi kan forhindre dette ved at bruge 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

Hvornår bør du ikke bruge en forHver over en for-løkke?

Jeg bruger forEach loop, hvor det er muligt, da det er mere kortfattet end for sløjfe. Det eneste tidspunkt at undgå en forEach-løkke er dog, når vi ønsker at bryde ud af en løkke tidligt ved hjælp af break-sætningen eller bestå den aktuelle iteration med en fortsæt-erklæring .

For eksempel ønsker vi at bryde ud af en løkke, når en søgebetingelse er opfyldt. 

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

Konklusion

Dette indlæg skal give dig indsigt, du har brug for, når du beslutter dig for, hvilken type sløjfe du skal bruge. Hvad angår ydeevne mellem de to loops, er for-løkken hurtigere sammenlignet med forEach-løkken. Imidlertid bør læsebarheden og vedligeholdelsen af ​​kodebaser være en prioritet, som forEach kan levere.