10 JavaScript-værktøjsfunktioner lavet med Reduce

Multiværktøjet rammer igen.

I min sidste artikel tilbød jeg dig en udfordring at genskabe kendte funktioner ved hjælp af reduce. Denne artikel viser dig, hvordan nogle af dem kan implementeres sammen med nogle ekstra!

I alt skal vi se på ti hjælpefunktioner. De er utroligt praktiske på dine projekter, og bedst af alt implementeres de ved hjælp af reduce! Jeg hentede masser af inspiration fra RamdaJS-biblioteket til denne, så tjek det!

1. nogle

Parametre

  1. predicate- Funktion, der vender tilbage trueeller false.
  2. array - Liste over emner, der skal testes.

Beskrivelse

Hvis predicatereturnerer truefor en vare, somereturnerer true. Ellers vender det tilbage false.

Implementering

const some = (predicate, array) => array.reduce((acc, value) => acc || predicate(value), false); 

Anvendelse

const equals3 = (x) => x === 3; some(equals3, [3]); // true some(equals3, [3, 3, 3]); // true some(equals3, [1, 2, 3]); // true some(equals3, [2]); // false 

2. alle

Parametre

  1. predicate- Funktion, der vender tilbage trueeller false.
  2. array - Liste over emner, der skal testes.

Beskrivelse

Hvis predicatereturnerer truefor hver vare, allreturnerer true. Ellers vender det tilbage false.

Implementering

const all = (predicate, array) => array.reduce((acc, value) => acc && predicate(value), true); 

Anvendelse

const equals3 = (x) => x === 3; all(equals3, [3]); // true all(equals3, [3, 3, 3]); // true all(equals3, [1, 2, 3]); // false all(equals3, [3, 2, 3]; // false 

3. ingen

Parametre

  1. predicate- Funktion, der vender tilbage trueeller false.
  2. array - Liste over emner, der skal testes.

Beskrivelse

Hvis predicatereturnerer falsefor hver vare, nonereturnerer true. Ellers vender det tilbage false.

Implementering

const none = (predicate, array) => array.reduce((acc, value) => !acc && !predicate(value), false); 

Anvendelse

const isEven = (x) => x % 2 === 0; none(isEven, [1, 3, 5]); // true none(isEven, [1, 3, 4]); // false none(equals3, [1, 2, 4]); // true none(equals3, [1, 2, 3]); // false 

4. kort

Parametre

  1. transformFunction - Funktion til at køre på hvert element.
  2. array - Liste over genstande, der skal transformeres.

Beskrivelse

Returnerer et nyt matrix af emner, hver transformeret i henhold til det givne transformFunction.

Implementering

const map = (transformFunction, array) => array.reduce((newArray, item) => { newArray.push(transformFunction(item)); return newArray; }, []); 

Anvendelse

const double = (x) => x * 2; const reverseString = (string) => string .split('') .reverse() .join(''); map(double, [100, 200, 300]); // [200, 400, 600] map(reverseString, ['Hello World', 'I love map']); // ['dlroW olleH', 'pam evol I'] 

5. filtrer

Parametre

  1. predicate- Funktion, der vender tilbage trueeller false.
  2. array - Liste over emner, der skal filtreres.

Beskrivelse

Returnerer et nyt array. Hvis det predicatereturneres true, føjes det element til det nye array. Ellers er dette element ekskluderet fra det nye array.

Implementering

const filter = (predicate, array) => array.reduce((newArray, item) => { if (predicate(item) === true) { newArray.push(item); } return newArray; }, []); 

Anvendelse

const isEven = (x) => x % 2 === 0; filter(isEven, [1, 2, 3]); // [2] filter(equals3, [1, 2, 3, 4, 3]); // [3, 3] 

6. afvis

Parametre

  1. predicate- Funktion, der vender tilbage trueeller false.
  2. array - Liste over emner, der skal filtreres.

Beskrivelse

Ligesom filter, men med den modsatte adfærd.

Hvis det predicatereturneres false, føjes det element til det nye array. Ellers er dette element ekskluderet fra det nye array.

Implementering

const reject = (predicate, array) => array.reduce((newArray, item) => { if (predicate(item) === false) { newArray.push(item); } return newArray; }, []); 

Anvendelse

const isEven = (x) => x % 2 === 0; reject(isEven, [1, 2, 3]); // [1, 3] reject(equals3, [1, 2, 3, 4, 3]); // [1, 2, 4] 

7. find

Parameters

  1. predicate - Function that returns true or false.
  2. array - List of items to search.

Description

Returns the first element that matches the given predicate. If no element matches then undefined is returned.

Implementation

const find = (predicate, array) => array.reduce((result, item) => { if (result !== undefined) { return result; } if (predicate(item) === true) { return item; } return undefined; }, undefined); 

Usage

const isEven = (x) => x % 2 === 0; find(isEven, []); // undefined find(isEven, [1, 2, 3]); // 2 find(isEven, [1, 3, 5]); // undefined find(equals3, [1, 2, 3, 4, 3]); // 3 find(equals3, [1, 2, 4]); // undefined 

8. partition

Parameters

  1. predicate - Function that returns true or false.
  2. array - List of items.

Description

"Partitions" or splits an array into two based on the predicate. If predicate returns true, the item goes into list 1. Otherwise the item goes into list 2.

Implementation

const partition = (predicate, array) => array.reduce( (result, item) => { const [list1, list2] = result; if (predicate(item) === true) { list1.push(item); } else { list2.push(item); } return result; }, [[], []] ); 

Usage

const isEven = (x) => x % 2 === 0; partition(isEven, [1, 2, 3]); // [[2], [1, 3]] partition(isEven, [1, 3, 5]); // [[], [1, 3, 5]] partition(equals3, [1, 2, 3, 4, 3]); // [[3, 3], [1, 2, 4]] partition(equals3, [1, 2, 4]); // [[], [1, 2, 4]] 

9. pluck

Parameters

  1. key - Key name to pluck from the object
  2. array - List of items.

Description

Plucks the given key off of each item in the array. Returns a new array of these values.

Implementation

const pluck = (key, array) => array.reduce((values, current) => { values.push(current[key]); return values; }, []); 

Usage

pluck('name', [{ name: 'Batman' }, { name: 'Robin' }, { name: 'Joker' }]); // ['Batman', 'Robin', 'Joker'] pluck(0, [[1, 2, 3], [4, 5, 6], [7, 8, 9]]); // [1, 4, 7] 

10. scan

Parameters

  1. reducer - Standard reducer function that receives two parameters - the accumulator and current element from the array.
  2. initialValue - The initial value for the accumulator.
  3. array - List of items.

Description

Fungerer ligesom, reducemen i stedet bare det enkelte resultat, returnerer det en liste over alle reducerede værdier på vej til det enkelte resultat.

Implementering

const scan = (reducer, initialValue, array) => { const reducedValues = []; array.reduce((acc, current) => { const newAcc = reducer(acc, current); reducedValues.push(newAcc); return newAcc; }, initialValue); return reducedValues; }; 

Anvendelse

const add = (x, y) => x + y; const multiply = (x, y) => x * y; scan(add, 0, [1, 2, 3, 4, 5, 6]); // [1, 3, 6, 10, 15, 21] - Every number added from 1-6 scan(multiply, 1, [1, 2, 3, 4, 5, 6]); // [1, 2, 6, 24, 120, 720] - Every number multiplied from 1-6 

Vil du have gratis coaching?

Hvis du vil planlægge et gratis opkald for at diskutere Front-End-udviklingsspørgsmål vedrørende kode, interviews, karriere eller andet, følg mig på Twitter og DM mig.

Derefter, hvis du nyder vores første møde, kan vi diskutere en løbende coaching for at hjælpe dig med at nå dine Front-End-udviklingsmål!

Tak for læsningen

For mere indhold som dette, se //yazeedb.com!

Indtil næste gang!