10 JavaScript-funkció a Reduce használatával

A többszerszám ismét lecsap.

Legutóbbi cikkemben kihívást kínáltam a jól ismert funkciók újbóli létrehozására reduce. Ez a cikk megmutatja, hogyan lehet néhányukat megvalósítani, néhány extrával együtt!

Összesen tíz segédfunkciót fogunk megvizsgálni. Hihetetlenül hasznosak a projektjeiben, és a legjobb az egészben, hogy felhasználják őket reduce! Sok inspirációt merítettem a RamdaJS könyvtárából ehhez a könyvtárhoz, ezért nézze meg!

1. néhány

Paraméterek

  1. predicate- Funkció, amely visszaadja truevagy false.
  2. array - A tesztelendő elemek listája.

Leírás

Ha predicatevisszatér trueaz olyan elemet, somevisszatér true. Ellenkező esetben visszatér false.

Végrehajtás

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

Használat

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. mind

Paraméterek

  1. predicate- Funkció, amely visszaadja truevagy false.
  2. array - A tesztelendő elemek listája.

Leírás

Ha predicatevisszatér truea minden elemet, allvisszatér true. Ellenkező esetben visszatér false.

Végrehajtás

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

Használat

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. nincs

Paraméterek

  1. predicate- Funkció, amely visszaadja truevagy false.
  2. array - A tesztelendő elemek listája.

Leírás

Ha predicatevisszatér falsea minden elemet, nonevisszatér true. Ellenkező esetben visszatér false.

Végrehajtás

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

Használat

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. térkép

Paraméterek

  1. transformFunction - Minden elemen futó funkció.
  2. array - Az átalakítandó elemek listája.

Leírás

Új elemtömböt ad vissza, mindegyiket a megadottak szerint átalakítva transformFunction.

Végrehajtás

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

Használat

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. szűrő

Paraméterek

  1. predicate- Funkció, amely visszaadja truevagy false.
  2. array - A szűrendő elemek listája.

Leírás

Új tömböt ad vissza. Ha predicatevisszatér true, akkor az elem hozzáadódik az új tömbhöz. Ellenkező esetben az elem kizárásra kerül az új tömbből.

Végrehajtás

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

Használat

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

6. elutasítja

Paraméterek

  1. predicate- Funkció, amely visszaadja truevagy false.
  2. array - A szűrendő elemek listája.

Leírás

Akárcsak filter, de ellenkező magatartással.

Ha predicatevisszatér false, akkor az elem hozzáadódik az új tömbhöz. Ellenkező esetben az elem kizárásra kerül az új tömbből.

Végrehajtás

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

Használat

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

Works just like reduce but instead just the single result, it returns a list of every reduced value on the way to the single result.

Implementation

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

Usage

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 

Want Free Coaching?

If you'd like to schedule a free call to discuss Front-End development questions regarding code, interviews, career, or anything else follow me on Twitter and DM me.

After that if you enjoy our first meeting, we can discuss an ongoing coaching to help you reach your Front-End development goals!

Thanks for reading

For more content like this, check out //yazeedb.com!

Until next time!