10 funciones de utilidad de JavaScript realizadas con Reducir

La multiherramienta ataca de nuevo.

En mi último artículo les ofrecí el desafío de recrear funciones conocidas usando reduce. ¡Este artículo le mostrará cómo se pueden implementar algunos de ellos, junto con algunos extras!

En total, veremos diez funciones de utilidad. Son increíblemente útiles en sus proyectos y, lo mejor de todo, ¡se implementan usando reduce! Me inspiré mucho en la biblioteca RamdaJS para este, ¡así que échale un vistazo!

1. algunos

Parámetros

  1. predicate- Función que devuelve trueo false.
  2. array - Lista de elementos para probar.

Descripción

Si predicatedevuelve truepor cualquier artículo, somedevuelve true. De lo contrario, vuelve false.

Implementación

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

Uso

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

Parámetros

  1. predicate- Función que devuelve trueo false.
  2. array - Lista de elementos para probar.

Descripción

Si predicatedevuelve truepor cada artículo, alldevuelve true. De lo contrario, vuelve false.

Implementación

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

Uso

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

Parámetros

  1. predicate- Función que devuelve trueo false.
  2. array - Lista de elementos para probar.

Descripción

Si predicatedevuelve falsepor cada artículo, nonedevuelve true. De lo contrario, vuelve false.

Implementación

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

Uso

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

Parámetros

  1. transformFunction - Función para ejecutar en cada elemento.
  2. array - Lista de elementos a transformar.

Descripción

Devuelve una nueva matriz de elementos, cada uno transformado según lo dado transformFunction.

Implementación

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

Uso

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

Parámetros

  1. predicate- Función que devuelve trueo false.
  2. array - Lista de elementos para filtrar.

Descripción

Devuelve una nueva matriz. Si predicateregresa true, ese elemento se agrega a la nueva matriz. De lo contrario, ese elemento se excluye de la nueva matriz.

Implementación

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

Uso

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

6. rechazar

Parámetros

  1. predicate- Función que devuelve trueo false.
  2. array - Lista de elementos para filtrar.

Descripción

Igual filter, pero con el comportamiento contrario.

Si predicateregresa false, ese elemento se agrega a la nueva matriz. De lo contrario, ese elemento se excluye de la nueva matriz.

Implementación

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

Uso

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!