Javascript forEach

Ú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/