Original link: yazeedb.com/posts/10-js… Translated by Yazeed Bzadough

In the last article, I presented you with the idea of using Reduce to create some well-known functions. This article will show you how to implement some of these functions, as well as others.

In summary, we will examine 10 useful functions. They are very convenient on your project, and most importantly, they are implemented with Reduce! I get a lot of inspiration from the RamdaJS library, check it out!

1. some

parameter

  1. predicate– returntrue 或 falseThe function of
  2. array– List of tests to be performed

describe

Predicate returns true if either item, some returns true, and false otherwise.

implementation

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

Use cases

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
Copy the code

2. all

parameter

  1. predicate– returntrue 或 falseThe function of
  2. array– List of tests to be performed

describe

Predicate returns true if each term, all returns true, and false otherwise.

implementation

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

Use cases

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
Copy the code

3. none

parameter

  1. predicate– returntrue 或 falseThe function of
  2. array– List of tests to be performed

describe

If each predicate returns false, None returns true, and otherwise false.

implementation

const none = (predicate, array) = > array.reduce((acc, value) = >acc && ! predicate(value),true);
Copy the code

Use cases

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
Copy the code

4. map

parameter

  1. transformFunction– Functions that run on each element
  2. array– List to convert

describe

Returns a new array, each of which has been converted to transformFunction

implementation

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

    returnnewArray; } []);Copy the code

Use cases

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']
Copy the code

5. filter

parameter

  1. predicate– returntrue 或 falseThe function of
  2. array– List of items to filter

describe

Returns a new array. If the predicate returns true, the element is added to the new array, otherwise it is excluded from the new array.

implementation

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

    returnnewArray; } []);Copy the code

Use cases

const isEven = (x) = > x % 2= = =0;

filter(isEven, [1.2.3]);
/ / [2]

filter(equals3, [1.2.3.4.3]);
/ / [3, 3]
Copy the code

6. reject

parameter

  1. predicate– returntrue 或 falseThe function of
  2. array– List of items to filter

describe

Like a filter, but in reverse.

If the predicate returns false, the element is added to the new array, otherwise it is excluded from the new array.

implementation

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

    returnnewArray; } []);Copy the code

Use cases

const isEven = (x) = > x % 2= = =0;

reject(isEven, [1.2.3]);
/ / [1, 3]

reject(equals3, [1.2.3.4.3]);
/ / [1, 2, 4]
Copy the code

7. find

parameter

  1. predicate– returntrue 或 falseThe function of
  2. array– List of things to look up

describe

Returns the first element matched by the predicate, or undefined if none matches

implementation

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

    if (predicate(item) === true) {
      return item;
    }

    return undefined;
  }, undefined);
Copy the code

Use cases

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
Copy the code

8. partition

parameter

  1. predicate– returntrue 或 falseThe function of
  2. arrayList –

describe

Splits an array into two parts based on the predicate. If the predicate returns true, the element goes to listing 1, otherwise it goes to Listing 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);
      }

      returnresult; }, [[], []]);Copy the code

Use cases

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]]
/ / [1, 2, 4]
Copy the code

9. pluck

parameter

  1. key– The name of the key selected from the object
  2. arrayList –

describe

Extracts the value of the given key from each item in the array. Return these values to form a new array.

implementation

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

    returnvalues; } []);Copy the code

Use cases

pluck('name'[{name: 'Batman' }, { name: 'Robin' }, { name: 'Joker' }]);
// ['Batman', 'Robin', 'Joker']

pluck(0The [[1.2.3], [4.5.6], [7.8.9]]);
/ / [1, 4, 7)
Copy the code

10. scan

parameter

  1. reducer– the standardrducerFunction that takes two arguments – the array accumulator and the current value.
  2. initialValue– Initial value of the accumulator
  3. arrayList –

describe

It works in a similar way to Reduce, except that Reduce returns only the last result, whereas SCAN returns an array of each accumulator 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;
};
Copy the code

Use cases

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
Copy the code

portal

Learn reduce in 10 minutes

10 more JavaScript utility functions that use Reduce

There are also 10 JavaScript utility functions that use Reduce