Javascript forEach - loop gennem js-array-elementer

Javascript forEach - loop gennem js-array-elementer

Så forestil dig, at du gik på indkøb af frugt, og du kom hjem med en kurv med frugter. Du skal opbevare disse frugter separat, dvs. at alle æbler skal sættes sammen, alle bananer skal også sættes sammen, alle appelsiner skal sættes sammen og så videre.

Hvis du kun havde omkring 20 frugter i kurven, vil det være relativt nemt at gennemføre denne opgave. Men hvis antallet blev øget til omkring 50 - 60 frugter i denne kurv, så bliver det vanskeligt, og sværhedsgraden af ​​denne opgave stiger gradvist, efterhånden som antallet af frugter gør det.

Så i et tilfælde, hvor du har et stort antal frugter, der skal sorteres, får du brug for noget eller nogen, der kan gøre denne proces lidt hurtigere og mindre besværlig.

For at være helt ærlig har jeg ingen idé om, hvordan jeg kan hjælpe dig med at sortere din kurv fuld af frugter. Men hvis vi kan forestille os, at kurven er en række frugter i javascript, så kan jeg tænke på en løsning ved hjælp af forHver metoden i javascript.

ForEach-metoden er en højere ordensfunktion (en funktion, der tager en funktion som et argument). Andre typer af højere ordensfunktioner omfatter:sorter, reducer, filtrer og kort.

Syntaks for forEach-metoden:

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

Ovenstående syntaks kan findes på MDN Web Docs

ForEach-metoden tager en tilbagekaldsfunktion (en funktion, der overføres som et argument til en funktion af højere orden) som sin parameter, og denne tilbagekaldsfunktion tager tre parametre:currentElement, indexOfcurrentElement og selve arrayet.

array.forEach(function(currentElement, indexOfcurrentElement, array), thisValue)

Returværdien for forEach-metoden er udefineret. Den kalder kun en tilbagekaldsfunktion for hvert af elementerne i et array.

Nu tilbage til vores kurv med frugter..

Lad os sige, at vi har et array, der ser sådan ud:

const basketOfFruits = [
  "apple",
  "orange",
  "grape",
  "banana",
  "watermelon",
  "grape",
  "apple",
  "banana",
  "orange",
  "watermelon"
];

og vi vil gerne gruppere og vide, hvor mange æbler, bananer, appelsiner, vandmeloner og vindruer der er i vores kurv. En god måde at gøre dette på ville være at bruge ForEach-metoden.

Så lad os skabe individuelle arrays, hvor vi kan gruppere disse frugter i.

const apples = [];
const bananas = [];
const watermelons = [];
const grapes = [];
const oranges = [];

Vi kommer til at sortere vores forskellige frugter i deres arrays. Til dette bruger vi forEach-metoden.

basketOfFruits.forEach(sortFruit);

og kroppen af ​​vores sortFruit-funktion vil være som følger:

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

Så hvad ovenstående funktion vil gøre er at gå ind i basketOfFruits-arrayet, kontrollere hver frugt og placere dem i deres respektive arrays.

Så hvis vi vil vide antallet af de forskellige frugter, vi har individuelt, kan vi bare tjekke længden af ​​hver af deres arrays

console.log(
  apples.length,
  bananas.length,
  oranges.length,
  watermelons.length,
  grapes.length
);