Javascript forEach – smyčka přes položky pole js
Takže si představte, že jste šli nakoupit ovoce a vrátili jste se domů s košíkem ovoce. Toto ovoce musíte skladovat odděleně, tj. musíte dát dohromady všechna jablka, všechny banány také dát dohromady, všechny pomeranče dát dohromady a tak dále..
Pokud jste měli v košíku jen kolem 20 plodů, bude splnění tohoto úkolu poměrně snadné. Pokud se však počet zvýší na 50 - 60 plodů v tomto košíku, pak je to obtížné a obtížnost tohoto úkolu se postupně zvyšuje s počtem plodů.
Takže v případě, že máte k třídění velké množství ovoce, budete potřebovat něco nebo někoho, kdo tento proces trochu urychlí a bude méně obtížný.
Nyní, abych byl opravdu upřímný, nemám ponětí, jak vám pomoci třídit váš košík plný ovoce. Ale pokud si dokážeme představit ten koš jako řadu ovoce v javascriptu, pak mě napadá řešení pomocí metody forEach v javascriptu.
Metoda forEach je funkce vyššího řádu (funkce, která bere funkci jako argument). Mezi další typy funkcí vyššího řádu patří:řazení, zmenšení, filtrování a mapování.
Syntaxe metody forEach:
// Arrow function
forEach((element) => { /* ... */ } )
forEach((element, index) => { /* ... */ } )
forEach((element, index, array) => { /* ... */ } )
// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)
// Inline callback function
forEach(function(element) { /* ... */ })
forEach(function(element, index) { /* ... */ })
forEach(function(element, index, array){ /* ... */ })
forEach(function(element, index, array) { /* ... */ }, thisArg)
Výše uvedenou syntaxi lze nalézt na webu MDN Web Docs
Metoda forEach má jako svůj parametr funkci zpětného volání (funkce předaná jako argument do funkce vyššího řádu) a tato funkce zpětného volání přebírá tři parametry:currentElement, indexOfcurrentElement a samotné pole.
array.forEach(function(currentElement, indexOfcurrentElement, array), thisValue)
Návratová hodnota metody forEach není definována. Volá pouze funkci zpětného volání pro každý z prvků poskytnutých v poli.
Nyní zpět k našemu košíku ovoce..
Řekněme, že máme pole, které vypadá takto:
const basketOfFruits = [
"apple",
"orange",
"grape",
"banana",
"watermelon",
"grape",
"apple",
"banana",
"orange",
"watermelon"
];
a chceme seskupovat a vědět, kolik jablek, banánů, pomerančů, melounů a hroznů máme v košíku. Dobrým způsobem, jak toho dosáhnout, by bylo použít metodu ForEach.
Vytvořme si tedy jednotlivá pole, do kterých můžeme tyto plody seskupit.
const apples = [];
const bananas = [];
const watermelons = [];
const grapes = [];
const oranges = [];
Budeme třídit naše různé druhy ovoce do jejich polí. K tomu používáme metodu forEach.
basketOfFruits.forEach(sortFruit);
a tělo naší funkce sortFruit bude následující:
function sortFruit(fruit) {
switch (fruit) {
case "apple":
apples.push(fruit);
break;
case "orange":
oranges.push(fruit);
break;
case "banana":
bananas.push(fruit);
break;
case "grape":
grapes.push(fruit);
break;
case "watermelon":
watermelons.push(fruit);
break;
default:
console.log("Not a Fruit");
}
}
Výše uvedená funkce tedy udělá to, že vstoupíte do pole basketOfFruits, zkontrolujete každé ovoce a vložíte je do příslušných polí.
Takže pokud chceme znát počet různých druhů ovoce, které máme jednotlivě, můžeme jen zkontrolovat délku každého z jejich polí
console.log(
apples.length,
bananas.length,
oranges.length,
watermelons.length,
grapes.length
);