Úvod
Javascript obsahuje několik cyklických struktur, z nichž jedna je forEach. forEach se používá k procházení polem, což může být jednoduché pole nebo pole objektů.
Jednoduché pole
forEach funguje takto, z pole použijete forEach a v praxi to provede funkci pro každý prvek vašeho pole. Tato funkce se nazývá funkce zpětného volání. Podívejme se na příklad:
let array_de_pessoas = ['João', 'Maria', 'José']; array_de_pessoas.forEach((valorAtual, indice, array) => { console.log(`${valorAtual}, ${indice}, ${array}`); //irá imprimir o resultado no console: //João, 0, João,Maria //Maria, 1, João,Maria });
Pojďme lépe pochopit, co se děje v této funkci. V prvním řádku mám pole lidí, které bude procházet funkce foreach. Na řádku 2 přinutím pole lidí zavolat funkci forEach a po první závorce je to funkce, která běží pro každou hodnotu v poli, funkce zpětného volání.
Funkce zpětného volání může přijímat až 3 parametry a nejsou povinné, pokud chcete, můžete použít pouze první a další nepředávat.
Prvním parametrem je aktuální hodnota, tato hodnota bude každá položka v poli, v našem příkladu máme pole se 3 pozicemi, forEach provede funkci zpětného volání jednou pro každou pozici v poli, takže v The first když ji spustíme, naše aktuální hodnota bude obsahovat jméno João, podruhé Maria a potřetí José.
Druhým je index, každé pole má index, který se používá k označení každé pozice v poli a index vždy začíná na 0.
Třetím je pole samotné, pokud jej potřebujete, můžete tento třetí parametr použít k provedení nějakého zpracování s těmito daty, ale obvykle není obvyklé tento parametr potřebovat.
Takže tímto způsobem můžete procházet celým polem a manipulovat s požadovanými daty a s těmito parametry můžete lépe použít svou logiku k vyřešení určitého problému.
Pole objektů
Pole objektů jsou velmi běžné a jsou chvíle, kdy potřebujeme projít tato data, a funguje to stejným způsobem jako jednoduché pole, jediný rozdíl je v tom, že na každé pozici, která by byla CurrentValue, namísto pouhé když má řetězec, bude mít objektový literál, a tak můžete přistupovat ke každé pozici objektu, například:
let pessoas = [ { nome: 'Joao', idade: 30 }, { nome: 'Maria', idade: 20 } ]; pessoas.forEach((pessoa, index, array) => { console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`) //vai aparecer no console //O nome é: João e tem a idade 30 //O nome é: Maria e tem a idade 20 });
Přerušte foreach a zastavte smyčku
Jsou chvíle, kdy možná budete chtít zastavit běh smyčky, například hledáte hodnotu uvnitř pole, a když ji najdete, nechcete pokračovat ve smyčce, protože musíte, ale není to možné. Udělejte to pomocí foreach.
V případě, že to potřebujete udělat, musíte použít smyčku for, pomocí které můžete mít kontrolu zastavení s break.
Přechod na další pozici "pokračovat"
Ve forEach není možné pokračovat a skočit na další pozici v poli, ale co můžete udělat, je vložit do funkce return, v takovém případě, když se funkce provádí v určitém prvku a vy vložíte return, zastaví provádění na této pozici a přejde na další, například:
let pessoas = [ { nome: 'Joao', idade: 30 }, { nome: 'Maria', idade: 20 } ]; pessoas.forEach((pessoa, index, array) => { if(idade > 25){ return; } console.log(`O nome é: ${pessoa.nome} e tem a idade ${pessoa.idade}`) //vai aparecer no console //O nome é: Maria e tem a idade 20 });
V tomto případě forEach přeskočil Johna, protože je starší než 25 let, a pak forEach přeskočil tuto pozici v poli a šel provést další pozici.
Další informace
Pokud chcete vidět podrobné vysvětlení a praktický a reálný příklad využitelný v běžném životě, natočil jsem video, které zde nechám níže:
https://youtu.be/Q3tiAEvWhOE
Závěr
forEach je smyčková struktura, která, pokud je dobře používána, může být velmi užitečná. Pokud potřebujete projít pole, abyste provedli nějaké zpracování a neočekávali žádnou návratnost, je to ideální možnost, jak vyřešit váš problém. Doufám, že se vám bude líbit, do dalšího příspěvku :)
Odkazy:
https://developer.mozilla.org/en-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Zpravodaj
http://programandosolucoes.dev.br/assinar-a-newsletter/