Vejledning til JavaScripts forEach()-metode

Introduktion

forEach() metode er en af ​​mange, der kan bruges til at sløjfe gennem indholdet af et array og vise hvert element successivt. Det har de særskilte kvaliteter, der adskiller det fra andre teknikker til iteration over arrays, hvilket betyder, at det er op til dig at vælge, hvilken metode du vil bruge, baseret på hvad du laver.

Syntaks og parametre

forEach() metoden har en meget ligetil syntaks:

forEach(callback(currentElement, index, arr), thisValue);

Som parameter accepterer den en callback funktion og kører den for hver post i arrayet. Denne callback funktionen tager tre argumenter - currentElement (påkrævet), dens index (den index af currentElement ), og arrayet (arr ), som elementet tilhører. Til sidst, thisValue (valgfrit) parameter vil blive brugt som værdien af ​​this i callback .

Bemærk: Den eneste nødvendige parameter er currentElement , som repræsenterer værdien af ​​arrayets elementer. index og currentElement argumenter vil være dem, du vil bruge mest.

Sådan bruges JavaScript forEach() Metode

Lad os tage et kig på forEach() metode i aktion. Som vi har nævnt før, kan du bruge det til at iterere et array og anvende en tilbagekaldsfunktion til hvert element i det array. I dette afsnit forklarer vi, hvordan man angiver en passende tilbagekaldsfunktion, og hvordan man bruger hver af dens parametre.

I tidligere versioner af JavaScript, før ES6 , skal du angive en tilbagekaldsfunktion som følger:

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(function (age) {
	newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

Alternativt kan du definere tilbagekaldsfunktionen et sted uden for forEach() metode og kald den ved hjælp af følgende syntaks:

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(increaseAgeBy5);

function increaseAgeBy5(age) {
	newAges.push(age + 5);
}

console.log(newAges); 
// Output: [25, 33, 24, 61]

Begge disse er ret læsbare og smarte måder at bruge en forEach() på metode, men vi kan forenkle syntaksen yderligere. Siden ES6 kan vi definere en tilbagekaldsfunktion som en pilefunktion :

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach((age) => {
	newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

Eller du kan skjule funktionen til blot:

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach((age) => newAges.push(age + 5));

console.log(newAges); 
// Output: [25, 33, 24, 61]

Indekset Parameter

index er en valgfri parameter, der kan bruges til at vurdere placeringen af ​​et element i det oprindelige array. For eksempel kunne vi vise både positionen og værdien af ​​elementet:

const courses = ['Biology', 'Mathematics', 'Chemistry', 'Physics'];

courses.forEach(function (course, index) {
	console.log(index + ': ' + course);
});

Dette resulterer i:

0: Biology
1: Mathematics
2: Chemistry
3: Physics

Arrayet Parameter

array parameter refererer til selve det originale array. Det er en valgfri parameter, som du generelt vil bruge relativt sjældent, da du allerede har adgang til hvert enkelt element og kan køre operationer på dem. Hvis vi sender det som en parameter på console.log() , vil hele arrayet blive udskrevet én gang for hvert element i arrayet:

const courses = ['Biology', 'Mathematics', 'Chemistry', 'Physics'];

courses.forEach(function (course, index, array) {
	console.log(array);
});

Dette resulterer i:

[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]

Fælles JavaScript forEach() Eksempler

Med introduktionen af ​​vejen - lad os dykke ned i et par almindelige brugssager af forEach() metode. I dette afsnit viser vi, hvordan man går gennem et array af objekter, og hvordan man beregner summen af ​​alle elementer i et array - dog kan du definere enhver vilkårlig tilbagekaldsfunktion.

Sådan går du gennem en række objekter efter værdi

Hands down - den mest almindelige brug af forEach() metoden er at udskrive hvert element (eller nogle af deres felter) i et array:

const students = [
	{ firstName: 'John', lastName: 'Doe' },
	{ firstName: 'Stephen', lastName: 'Matt' },
	{ firstName: 'Abigail', lastName: 'Susu' },
];

students.forEach((student) => {
	console.log(`${student.firstName} ${student.lastName}`);
});

Dette resulterer i:

John Doe
Stephen Matt
Abigail Susu

Sådan summeres matrixelementer eller deres felter

Lad os fortsætte med at forklare, hvordan vi kunne tilføje alle elementerne i et array og vise sum :

const students = [
	{ firstName: 'John', lastName: 'Doe', tuition: 5000},
	{ firstName: 'Stephen', lastName: 'Matt', tuition: 7500 },
	{ firstName: 'Abigail', lastName: 'Susu', tuition: 6000 },
];

sum = 0;

students.forEach((student) => {
	sum += student.tuition;
});

console.log(sum); 
// Output: 18500

forEach()-metode vs for Loop

JavaScript giver os et par måder at iterere over elementer i et array - især for loop og forEach() metode. Begge fungerer på samme måde og i slutningen af ​​dagen er de ret ligeværdige med hensyn til ydeevne. Der er kun et par forskelle mellem dem, så for at hjælpe dig med at vælge, hvilken du skal bruge, vil vi dække disse forskelle i dette afsnit.

Omfanget af variabelnavne

forEach() metoden har et funktionsomfang - den holder alle variabelnavne inden for omfanget af sin tilbagekaldsfunktion. Hvis du tildeler en variabel uden for forEach() metoden og brug den i løkken, hvis der er en konflikt (samme variabelnavn) - den inde fra tilbagekaldsfunktionen bruges. Antag for eksempel, at vi opretter en student variabel og tildel Joy til det. Hvis vi gik gennem eleverne, blev hver af dem betegnet som en student , ville vi have en konflikt mellem variabelnavne:

const student = 'Joy';
const students = ['Mark', 'Jane', 'John', 'Sarah'];

students.forEach((student) => {
	console.log(student); 
    // Output: "Mark" "Jane" "John" "Sarah"
});

console.log(student);
// Output: "Joy"

Det er ikke en god praksis at bruge det samme variabelnavn flere gange, og det øger bare forvirringen - men det er værd at bemærke, at forEach() har et funktionsomfang.

Håndtering af manglende elementer

En for loop og forEach() metode håndtere manglende elementer anderledes. Antag, at vi har et array, hvor nogle elementer mangler:

const students = ['Mark', , 'Jane', 'John', , 'Sarah'];

Når du ser på arrayet ovenfor, vil du bemærke, at nogle elementer mangler (en sjældenhed i students array). Lad os først gå over students array med for loop for at se, hvordan den håndterer manglende værdier:

Gratis e-bog:Git Essentials

Tjek vores praktiske, praktiske guide til at lære Git, med bedste praksis, industriaccepterede standarder og inkluderet snydeark. Stop med at google Git-kommandoer og lær faktisk det!

const students = ['Mark', , 'Jane', 'John', , 'Sarah'];
const studentsList = [];

for (let i = 0; i < students.length; i++) {
	studentsList.push(students[i]);
}

console.log(studentsList); 
// Output: ["Mark",undefined,"Jane","John",undefined,"Sarah"]

I kodestykket ovenfor vil du bemærke, at vi får en undefined værdi på det første og det fjerde indeks - students[1] og students[4] . for loop behandler manglende elementer som undefined værdier.

Lad os nu tage et kig på, hvordan forEach() metoden behandler manglende værdier i students array:

const students = ['Mark', , 'Jane', 'John', , 'Sarah'];
const studentsList = [];

students.forEach(function (student) {
	studentsList.push(student);
});

console.log(studentsList); 
// Output: ["Mark","Jane","John","Sarah"]

forEach() springer den manglende værdier over og går videre!

Ren og læsbar kode

Det er helt op til dig at bestemme, hvilken måde at sløjfe gennem et array, der giver renere og mere læsbar kode. forEach() metoden har bestemt en mere kortfattet syntaks, derfor anses den generelt for at være mere passende, hvis kodelæsbarheden står højt på en prioritetsliste.

I dette afsnit giver vi dig eksempler på kodestykker og lader dig bestemme, hvilken metode til looping-arrays er nemmere at læse og forstå.

Antag, at vi har en række elever. Hver elev har sit navn og en række kurser, de deltager i:

const students = [
	{ name: 'John', courses: ['Maths', 'English', 'Physics'] },
	{ name: 'Sarah', courses: ['Chemistry', 'Maths', 'Computer Science'] },
];

Lad os antage, at vi ønsker at vise hver elevs navn og hvert kursus, som en individuel studerende deltager i.

Det kan vi opnå ved at bruge to for sløjfer. Den første sløjfe gentager alle elever og logger elevens navn. Den anden gentager alle kurser, som den nuværende studerende deltager i og logger dem én efter én:

for (let i = 0; i < students.length; i++) {
	let student = students[i];
	console.log(student);

	for (let k = 0; k < student.courses.length; k++) {
		let subject = student.courses[k];
		console.log(subject);
	}
}

for loop kræver, at du får adgang til arrayet ved hjælp af midlertidig i og k variabler og derefter få adgang til hvert element ved hjælp af firkantede parentesnotation . Dette kan virke rodet og kan tilføje en masse forvirring til din kode, da det ikke er ligetil at forstå sammenlignet med forEach() metode:

students.forEach((student) => {
	console.log(student);
	student.courses.forEach((subject) => {
		console.log(subject);
	});
});

forEach() metoden hjælper os med at slippe af med de midlertidige tællervariabler, hvilket gør koden meget nemmere at læse og forstå. Denne metode bruger en callback funktion og anvender den på hvert element i arrayet, hvilket betyder, at vi ikke behøver at bruge en parentes for at få hvert element.

Bræk ud af en løkke

Indtil videre har vi stort set kun fremhævet eksempler til fordel for forEach() metode. Men en klar fordel ved for loop er dens evne til at forlade en loop tidligt hvis det er nødvendigt.

Antag for eksempel, at du kun vil returnere én elev ved navn Sarah fra students array. Du skal iterere over hver elev i arrayet, tjek om dens navn er Sarah , og bryd ud af løkken, hvis eleven bliver fundet.

Du tror måske, du kan bruge både for loop og forEach() metode til at iterere over students array. Men faktisk, hvis du prøver at bruge break inde i forEach() metode, vil den kaste en SyntaxError .

Derfor, hvis du har brug for at bryde ud af løkken, bør du sandsynligvis bruge en for sløjfe:

const students = ['Mark', 'Jane', 'Sarah', 'John', 'Sarah'];

for (let i = 0; i < students.length; i++) {
	if (students[i].name === 'Sarah') {
		console.log(`>> ${students[i].name} is the most brilliant lady in the class`);
		break;
	}
    console.log(`> Name of the current student is ${students[i]}`);
}

Dette resulterer i:

> Name of the current student is Mark
> Name of the current student is Jane
>> Sarah is the most brilliant lady in the class

Bemærk: Det samme gælder for return og continue . Der er ingen måde at bremse ud af en sløjfe i forEach() metode - ikke engang med return eller continue .

async/await

forEach() metoden er ikke kompatibel med async funktioner. Også selvom du erklærer en async funktion inde i forEach() blokere, vil den ikke opføre sig som forventet. Der er ingen måde at lave async/await på arbejde med forEach() metode. Derfor, hvis du skal lave din kode async kompatibel, skal du bruge for sløjfe i stedet for!

Brug af forEach() Med andre datastrukturer

Primært forEach() metode bruges til at sløjfe gennem en række elementer. Alternativt kan du gå gennem andre datastrukturer - sæt og kort. I dette afsnit vil vi se et par enkle eksempler, der illustrerer, hvordan man går gennem både et sæt og et kort.

Sådan går du gennem et Set Brug af forEach()

Du kan iterere gennem elementerne i et JavaScript-sæt ved hjælp af forEach() metode. For eksempel:

const nums = new Set([11, 25, 35, 47, 25, 47]);

nums.forEach(myFunction);

function myFunction(num) {
	console.log(num);
}

Dette resulterer i:

11
25
35
47

Bemærk: En Set er en samling af genstande, der er unikke, det vil sige, at intet element kan gentages.

Sådan går du gennem et kort Brug af forEach()

Du kan iterere gennem elementerne i et kort ved at bruge forEach() metode, adgang til key og value af hver post i stedet for selve posten:

// Declaring map
const map = new Map();

// Inserting key/value pairs
map.set('greeting', 'Hello');
map.set('firstName', 'John');
map.set('lastName', 'Doe');

// Loop through with forEach
map.forEach((value, key) => {
	console.log(`${key} - ${value}`);
});

Dette resulterer i:

greeting - Hello
firstName - John
lastName - John

Konklusion

I denne guide har vi taget et kig på, hvordan JavaScript er forEach() metoden fungerer, og hvordan vi kan bruge den til at sløjfe gennem elementer i et array. Vi har taget et kig på de ledsagende argumenter, såsom currentElement , index og array som giver dig mulighed for at hente bestemte elementer fra et array.

Til sidst har vi taget et kig på flere eksempler, der dækker forskellen mellem forEach() metoden og for loop, og illustrerede, hvordan man går gennem andre datastrukturer (sæt og kort) ved hjælp af forEach() metode.