Průvodce JavaScriptovou metodou forEach()

Úvod

forEach() metoda je jednou z mnoha, které lze použít k procházení obsahu pole a zobrazení každého prvku postupně. Má odlišné vlastnosti, které jej odlišují od ostatních technik iterace přes pole, což znamená, že je jen na vás, kterou metodu použijete, na základě toho, co děláte.

Syntaxe a parametry

forEach() metoda má velmi přímou syntaxi:

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

Jako parametr přijímá callback a spustí ji pro každou položku v poli. Toto callback funkce má tři argumenty - currentElement (povinné), jeho index (index z currentElement ) a pole (arr ), ke kterému prvek patří. Nakonec thisValue (nepovinný) parametr bude použit jako hodnota this v callback .

Poznámka: Jediný povinný parametr je currentElement , což představuje hodnotu prvků pole. index a currentElement argumenty budou ty, které budete používat nejčastěji.

Jak používat JavaScript forEach() Metoda

Pojďme se podívat na forEach() metoda v akci. Jak jsme uvedli dříve, můžete jej použít k iteraci pole a aplikovat funkci zpětného volání na každý prvek tohoto pole. V této části vysvětlíme, jak deklarovat vhodnou funkci zpětného volání a jak využít každý z jejích parametrů.

V dřívějších verzích JavaScriptu před ES6 , měli byste deklarovat funkci zpětného volání následovně:

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

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

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

Alternativně můžete definovat funkci zpětného volání někde mimo forEach() metodu a zavolejte ji pomocí následující syntaxe:

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]

Oba jsou docela čitelné a elegantní způsoby použití forEach() metodu, ale můžeme dále zjednodušit syntaxi. Od ES6 můžeme funkci zpětného volání definovat jako funkci šipky :

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

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

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

Nebo můžete funkci sbalit na:

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

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

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

index Parametr

index je volitelný parametr, který lze použít k posouzení pozice prvku v původním poli. Například bychom mohli zobrazit pozici i hodnotu prvku:

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

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

Výsledkem je:

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

pole Parametr

array parametr odkazuje na samotné původní pole. Je to volitelný parametr, který budete obecně používat relativně zřídka, protože již máte přístup ke každému jednotlivému prvku a můžete s ním provádět operace. Pokud jej předáme jako parametr console.log() , celé pole se vytiskne jednou pro každý prvek v poli:

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

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

Výsledkem je:

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

Běžný JavaScript forEach() Příklady

S úvodem z cesty – pojďme se ponořit do několika běžných případů použití forEach() metoda. V této části si ukážeme, jak procházet polem objektů a jak vypočítat součet všech prvků v poli – můžete však definovat libovolnou funkci zpětného volání.

Jak procházet polem objektů podle hodnoty

Ruce dolů – nejčastější případ použití forEach() metoda je vytisknout každý prvek (nebo některá z jejich polí) pole:

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

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

Výsledkem je:

John Doe
Stephen Matt
Abigail Susu

Jak sečíst prvky pole nebo jejich pole

Pokračujme vysvětlením, jak bychom mohli přidat všechny položky v poli a zobrazit 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() metoda vs pro smyčku

JavaScript nám poskytuje několik způsobů, jak iterovat prvky pole – nejpozoruhodnější je for smyčka a forEach() metoda. Oba fungují podobně a na konci dne jsou z hlediska výkonu docela rovnocenné. Je mezi nimi jen několik rozdílů, takže abychom vám pomohli vybrat, který z nich použít, probereme tyto rozdíly v této části.

Rozsah názvů proměnných

forEach() metoda má rozsah funkce - uchovává všechny názvy proměnných v rozsahu své funkce zpětného volání. Pokud přiřadíte proměnnou mimo forEach() a použijte ji v rámci smyčky, pokud dojde ke konfliktu (stejný název proměnné) - použije se ta z funkce zpětného volání. Předpokládejme například, že vytvoříme student proměnnou a přiřadit Joy k tomu. Pokud bychom procházeli studenty, každý znamenal student , měli bychom konflikt názvů proměnných:

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"

Není dobrým zvykem používat stejný název proměnné vícekrát a to jen přispívá ke zmatku – ale stojí za zmínku, že forEach() má rozsah funkcí.

Zpracování chybějících prvků

A for smyčka a forEach() metoda zachází s chybějícími prvky jinak. Předpokládejme, že máme pole, ve kterém některé prvky chybí:

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

Když se podíváte na pole výše, všimnete si, že některé prvky chybí (výskyt v students pole). Nejprve se podívejme na students pole s for smyčka, abyste viděli, jak zpracovává chybějící hodnoty:

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

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"]

Ve výše uvedeném úryvku kódu si všimnete, že dostáváme undefined hodnota na prvním a čtvrtém indexu - students[1] a students[4] . for smyčka považuje chybějící prvky za undefined hodnoty.

Nyní se podívejme na to, jak forEach() metoda zpracovává chybějící hodnoty v students pole:

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

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

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

forEach() přeskočí mezeru chybějících hodnot a přejde dál!

Čistý a čitelný kód

Je zcela na vás, abyste se rozhodli, který způsob procházení polem poskytuje čistší a čitelnější kód. forEach() metoda má jistě stručnější syntaxi, proto je obecně považována za vhodnější, pokud je čitelnost kódu na seznamu priorit.

V této části vám poskytneme příklady úryvků kódu a umožníme vám rozhodnout se, která metoda cyklování polí je snazší číst a pochopit.

Předpokládejme, že máme řadu studentů. Každý student má své jméno a řadu kurzů, které navštěvuje:

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

Předpokládejme, že chceme zobrazit jméno každého studenta a každý kurz, který jednotlivý student navštěvuje.

Toho můžeme dosáhnout použitím dvou for smyčky. První smyčka iteruje přes všechny studenty a zaznamenává jméno studenta. Druhý iteruje všechny kurzy, které aktuální student navštěvuje, a zaznamenává je jeden po druhém:

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 smyčka vyžaduje přístup k poli pomocí dočasného i a k proměnné a poté ke každému prvku přistupujte pomocí závorky . To se může zdát chaotické a může to vašemu kódu přinést spoustu zmatku, protože ve srovnání s forEach() to není snadné pochopit. metoda:

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

forEach() metoda nám pomáhá zbavit se dočasných proměnných čítače, takže kód je mnohem snazší číst a pochopit. Tato metoda používá callback funkce a aplikuje ji na každý prvek v poli, což znamená, že k získání každého prvku nepotřebujeme používat závorku.

Vytrhnout ze smyčky

Dosud jsme v podstatě zvýrazňovali pouze příklady ve prospěch forEach() metoda. Ale jedna výrazná výhoda for smyčka je její schopnost předčasně ukončit smyčku v případě potřeby.

Předpokládejme například, že chcete vrátit pouze jednoho studenta jménem Sára z students pole. Musíte iterovat přes každého studenta v poli a zkontrolovat, zda se jmenuje Sarah a pokud je student nalezen, opustí smyčku.

Možná si myslíte, že můžete použít obě for smyčka a forEach() metoda pro iteraci přes students pole. Ale ve skutečnosti, pokud se pokusíte použít break uvnitř forEach() způsob, vyvolá to SyntaxError .

Pokud se tedy potřebujete vymanit ze smyčky, pravděpodobně byste měli použít for smyčka:

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]}`);
}

Výsledkem je:

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

Poznámka: Totéž platí pro return a continue . V forEach() není žádný způsob, jak vybrzdit ze smyčky metoda - ani s return nebo continue .

async/await

forEach() metoda není kompatibilní s async funkcí. I když deklarujete async funkce uvnitř forEach() blokovat, nebude se chovat podle očekávání. Neexistuje způsob, jak vytvořit async/await pracovat s forEach() metoda. Pokud tedy potřebujete vytvořit kód async kompatibilní, použijte for místo toho smyčka!

Použití forEach() S dalšími datovými strukturami

Primárně forEach() metoda se používá k procházení polem prvků. Případně můžete procházet dalšími datovými strukturami – sadami a mapami. V této části uvidíme několik jednoduchých příkladů ilustrujících, jak procházet sadou i mapou.

Jak procházet sadou Pomocí forEach()

Pomocí forEach() můžete iterovat prvky sady JavaScriptu metoda. Například:

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

nums.forEach(myFunction);

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

Výsledkem je:

11
25
35
47

Poznámka: A Set je kolekce položek, které jsou jedinečné, to znamená, že žádný prvek se nemůže opakovat.

Jak procházet mapou Pomocí forEach()

Pomocí forEach() můžete iterovat prvky mapy metodou key a value každého záznamu, nikoli samotného záznamu:

// 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}`);
});

Výsledkem je:

greeting - Hello
firstName - John
lastName - John

Závěr

V této příručce jsme se podívali na to, jak JavaScript je forEach() metoda funguje a jak ji můžeme použít k procházení prvků pole. Podívali jsme se na doprovodné argumenty, jako je currentElement , index a array které vám umožňují získat určité prvky z pole.

Nakonec jsme se podívali na několik příkladů a pokryli rozdíl mezi forEach() metoda a for smyčky a ilustroval, jak procházet další datové struktury (množiny a mapy) pomocí forEach() metoda.