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

Λειτουργεί ακριβώς όπως reduceαλλά αντί για το μοναδικό αποτέλεσμα, επιστρέφει μια λίστα με κάθε μειωμένη τιμή στο δρόμο προς το μοναδικό αποτέλεσμα.

Εκτέλεση

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

Χρήση

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 

Θέλετε δωρεάν καθοδήγηση;

Αν θέλετε να προγραμματίσετε μια δωρεάν κλήση για να συζητήσετε ερωτήσεις ανάπτυξης Front-End σχετικά με κώδικα, συνεντεύξεις, καριέρα ή οτιδήποτε άλλο ακολουθήστε με στο Twitter και DM μου.

Μετά από αυτό, αν απολαμβάνετε την πρώτη μας συνάντηση, μπορούμε να συζητήσουμε μια συνεχή καθοδήγηση για να σας βοηθήσουμε να επιτύχετε τους αναπτυξιακούς σας στόχους!

Ευχαριστώ για την ανάγνωση

Για περισσότερο περιεχόμενο όπως αυτό, δείτε το //yazeedb.com!

Μέχρι την επόμενη φορά!