Javascript forEach - smyčka přes položky pole js

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
);