Sådan skriver du dit eget kort, filtrerer og reducerer funktioner i JavaScript

En sneak peek til funktionel programmering og højere ordre funktioner i Javascript.

Foto af Christopher Robin Ebbinghaus på Unsplash

Hver gang jeg hører om funktionel programmering, er den første ting, der kommer ind i mine sind, højere ordensfunktioner. Til de mennesker, der ikke ved om funktioner med højere orden, er det, hvad Wikipedia siger:

En funktion med højere orden er en funktion, der udfører mindst et af følgende:

  • Tager en eller flere funktioner som argumenter,
  • Returnerer en funktion som dens resultat.

Funktioner med højere orden kan bedst beskrives af kortet, filtrere og reducere funktioner. Javascript har som standard sin egen implementering af disse funktioner. I dag skriver vi vores eget kort, filtrerer og reducerer funktioner.

Bemærk: Husk, at disse implementeringer af kortet, filtrerer og reducerer metoder muligvis ikke afspejler de oprindelige implementeringer af deres Javascript-modstykker.

Kort

Fra MDN:

Kortet () -metoden opretter en ny matrix med resultaterne af at ringe til en leveret funktion på hvert element i opkaldsgruppen.

Virker ret ligetil. Lad os nu se Javascript-kortet () i aktion!

lad arr = [1, 2, 3, 4, 5];
// videregive en funktion til kort
const squareArr = arr.map (num => num ** 2);
console.log (squareArr);
// udskrifter [1, 4, 9, 16, 25]

Så hvad er der lige sket? Vi skrev en funktion, der returnerer kvadratet med et tal og sendte denne funktion som et argument til vores kort (). Lad os se trinvise instruktioner om, hvordan man opretter vores egen kortfunktion.

  1. Opret et tomt array mapArr.
  2. Slyng igennem matrixelementer.
  3. Opkaldsfunktion mapFunc med det aktuelle element som argument.
  4. Skub resultatet af mapFunc-funktionen til arrayet mapArr.
  5. Returner arrayet mapArr, når du har gennemgået alle elementerne.

Lad os nu skrive vores implementering af kortet ()

// kort tager en matrix og fungerer som argument
funktionskort (arr, mapFunc) {
    const mapArr = []; // tom matrix
    
    // loop dog med matrix
    for (lad i = 0; i 

Hvis du nu kalder det nye kort () i den forrige eksempelkode,

const squareArr2 = kort (arr, num => num ** 2);
console.log (squareArr2);
// udskrifter [1, 4, 9, 16, 25]

Temmelig sej hej? Lad os hoppe ind i filteret () næste.

Filter

Fra MDN:

Metoden filter () opretter en ny matrix med alle elementer, der består testen implementeret af den medfølgende funktion.

Lad os se et eksempel:

lad arr = [1, 2, 3, 4, 5];
// videregive en funktion til at filtrere
const oddArr = arr.filter (num => num% 2 === 0);
console.log (oddArr);
// udskrifter [2, 4]

Filterfunktionen tog en funktion, der vil vende tilbage, hvis et tal er jævnt. Filtret () “filtrerer” inputgruppen baseret på, om elementet er sandt eller falsk. Lad os gennemgå trin for trin om, hvordan filteret () fungerer.

  1. Opret et tomt matrixfilterArr.
  2. Slyng gennem arrayelementerne.
  3. Kaldte filterFunks funktion med det aktuelle element som argument.
  4. Hvis resultatet er sandt, skal du skubbe elementet til filterArr-arrayet.
  5. Returner filterArr array efter at have gennemgået alle elementerne.

Tid til at skrive vores eget filter ()

// filter tager en matrix og fungerer som argument
funktionsfilter (arr, filterFunc) {
    const filterArr = []; // tom matrix
    
    // loop dog med matrix
    for (lad i = 0; i 

Lad os se, om vores nye filter () fungerer med det forrige eksempel:

const oddArr2 = filter (arr, num => num% 2 === 0);
console.log (oddArr2); // udskrifter [2, 4]

Neat! Jeg har gemt den bedste og sværeste til sidst. Lad os gå til at reducere () næste.

Reducere

Fra MDN:

Metoden reducer () udfører en reduktionsfunktion (som du leverer) på hvert medlem af arrayet, hvilket resulterer i en enkelt outputværdi.

Giver mening? Ingen? Her er et eksempel til at vikle dit hoved rundt:

lad arr = [1, 2, 3, 4];
const sumReducer = (akkumulator, strømValue) => akkumulator + strømValue;
// 1 + 2 + 3 + 4
const sum = arr.reduce (sumReducer);
console.log (sum);
// udskrifter 10
// 5 + 1 + 2 + 3 + 4
const sum2 = arr.reduce (sumReducer);
console.log (SUM2);
// udskrifter 15

Begynder at få et billede? Lad os gøre det klart. Inden du graver for dybt ned i reduktionsmetoden (), skal du muligvis blive bekendt med reduktionsfunktionen.

Hvis du tidligere har brugt redux, har du muligvis en idé om, hvad en reduktionsfunktion er. I eksemplet ovenfor skrives reduceringsfunktionen som summen mellem akkumulatoren og den aktuelle værdi. Når du overfører reduceringsfunktionen til reduktion () -metoden, løber den gennem hvert tal i matrixen og tilføjer den til akkumulatoren (0 i begyndelsen), som i sig selv bliver den nye akkumulator til den næste iteration. Dette fortsætter indtil slutningen af ​​arrayet og returnerer akkumulatoren som et resultat.

Hvis jeg skulle sende værdien af ​​akkumulatoren i hvert trin til ovenstående eksempel, ville det være sådan:

  • Før starten af ​​iterationen, akkumulator = 0
  • 1. iteration, akkumulator + = 1; // akkumulator = 1
  • 2. iteration, akkumulator + = 2; // akkumulator = 3
  • 3. iteration, akkumulator + = 3; // akkumulator = 6
  • 4. iteration, akkumulator + = 4; // akkumulator = 10

Din returnerende funktions returnerede værdi tildeles akkumulatoren, hvis værdi huskes på tværs af hver iteration i hele matrixen. Det bliver i sidste ende den endelige, eneste resulterende værdi.

Hvis du stadig sidder fast på et tidspunkt, kan du prøve at skrive nogle handlinger med den indbyggede reducere () -metode. Hver gang du føler, at du er klar, skal du gennemgå de næste trin til, hvordan du implementerer din brugerdefinerede reduktion ():

  1. Initialiser akkumuleringsvariabel med 0 eller initalValue-argument fra reduceringen ().
  2. Slyng gennem arrayelementerne.
  3. Kald reduceringsfunktionen med akkumulatoren og det aktuelle element som argumenter.
  4. Returner akkumulator efter at have gennemgået alle elementerne.

Okay, tid til kode.

// reducer tager en matrix, reducer () og initialValue som argument
funktion reducere (arr, reducer, initialValue) {
    lad akkumulator = initialværdi === undefined? 0: initialValue
    
    // loop dog med matrix
    for (lad i = 0; i 

Nå, det var lettere end forventet. Lad os se, om det fungerer.

const sum = reducere (arr, sumReducer);
console.log (sum);
// udskrifter 10
const sum2 = reducere (arr, sumReducer, 5);
console.log (SUM2);
// udskrifter 15

Fungerer som en charme!

Det er det :)

Kommenter nedenunder, hvis du har spørgsmål.