10 Помощни функции на JavaScript, направени с Намаляване

Мулти-инструментът удря отново.

В последната си статия ви предложих предизвикателство да пресъздадете добре познати функции, използвайки reduce. Тази статия ще ви покаже как някои от тях могат да бъдат внедрени, заедно с някои екстри!

Общо ще разгледаме десет полезни функции. Те са изключително удобни за вашите проекти и най-доброто от всичко е, че са приложени с помощта reduce! Черпих много вдъхновение от библиотеката на RamdaJS за тази, така че проверете това!

1. някои

Параметри

  1. predicate- Функция, която връща trueили false.
  2. array - Списък на елементи за тестване.

Описание

Ако predicateвръща trueза всеки елемент, someвръща true. В противен случай се връща false.

Изпълнение

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

Употреба

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. всички

Параметри

  1. predicate- Функция, която връща trueили false.
  2. array - Списък на елементи за тестване.

Описание

Ако predicateвръща trueза всеки елемент, allвръща true. В противен случай се връща false.

Изпълнение

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

Употреба

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. няма

Параметри

  1. predicate- Функция, която връща trueили false.
  2. array - Списък на елементи за тестване.

Описание

Ако predicateвръща falseза всеки елемент, noneвръща true. В противен случай се връща false.

Изпълнение

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

Употреба

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. карта

Параметри

  1. transformFunction - Функция за изпълнение на всеки елемент.
  2. array - Списък на елементи за трансформиране.

Описание

Връща нов масив от елементи, всеки един трансформиран според даденото transformFunction.

Изпълнение

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

Употреба

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. филтър

Параметри

  1. predicate- Функция, която връща trueили false.
  2. array - Списък на елементи за филтриране.

Описание

Връща нов масив. Ако се predicateвърне true, този елемент се добавя към новия масив. В противен случай този елемент се изключва от новия масив.

Изпълнение

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

Употреба

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

6. отхвърляне

Параметри

  1. predicate- Функция, която връща trueили false.
  2. array - Списък на елементи за филтриране.

Описание

Точно като filter, но с обратното поведение.

Ако се predicateвърне false, този елемент се добавя към новия масив. В противен случай този елемент се изключва от новия масив.

Изпълнение

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

Употреба

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!