Ο απόλυτος οδηγός για τις μεθόδους συστοιχίας JavaScript - Μείωση

Η reduce()μέθοδος μειώνει έναν πίνακα τιμών σε μία μόνο τιμή. Η μεμονωμένη τιμή που επιστρέφεται μπορεί να είναι οποιουδήποτε τύπου.

reduce()είναι σαν το μαχαίρι Ελβετικού Στρατού με μεθόδους συστοιχίας. Ενώ άλλοι συμπαθούν map()και filter()παρέχουν συγκεκριμένη λειτουργικότητα, reduce()μπορούν να χρησιμοποιηθούν για να μετατρέψουν έναν πίνακα εισόδου σε οποιαδήποτε έξοδο που επιθυμείτε, διατηρώντας παράλληλα τον αρχικό πίνακα.

Σύνταξη

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - ο νέος αριθμός, πίνακας, συμβολοσειρά ή αντικείμενο που επιστρέφεται
  • arr - ο πίνακας που λειτουργεί
  • accumulator - η επιστρεφόμενη τιμή της προηγούμενης επανάληψης
  • currentValue - το τρέχον στοιχείο στον πίνακα
  • index - το ευρετήριο του τρέχοντος στοιχείου
  • array- τον αρχικό πίνακα στον οποίο reduce()κλήθηκε
  • initialValue - έναν αριθμό, πίνακα, συμβολοσειρά ή αντικείμενο που χρησιμεύει ως αρχική τιμή για την τελική έξοδο

Παραδείγματα

ES5

var numbers = [1, 2, 3]; var sum = numbers.reduce(function(total, current) { return total + current; }, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6

ES6

const numbers = [1, 2, 3]; const sum = numbers.reduce((total, current) => { return total + current; }, 0); const sumOneLiner = numbers.reduce((total, current) => total + current, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6 console.log(sumOneLiner); // 6

Ολα για initialValue

initialValue Υπό την προϋπόθεση

Το initialValueεπιχείρημα είναι προαιρετικό. Εάν παρέχεται, θα χρησιμοποιηθεί ως η αρχική τιμή συσσωρευτή ( total) στην πρώτη κλήση στη συνάρτηση επανάκλησης:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }, 1); console.log(product); // 24

Δεδομένου ότι το initialValue1 παρέχεται μετά τη συνάρτηση επανάκλησης, reduce()ξεκινά στην αρχή του πίνακα και ορίζει το πρώτο στοιχείο (2) ως την τρέχουσα τιμή ( current) Στη συνέχεια επαναλαμβάνεται μέσω του υπόλοιπου πίνακα, ενημερώνοντας την τιμή συσσωρευτή και την τρέχουσα τιμή.

initialValue Παραλείφθηκε

Εάν initialValueδεν παρέχεται, η επανάληψη θα ξεκινήσει στο δεύτερο στοιχείο του πίνακα (στο ευρετήριο 1), με accumulatorίσο με το πρώτο στοιχείο του πίνακα και currentValueίσο με το δεύτερο στοιχείο:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }); console.log(product);

Σε αυτό το παράδειγμα, δεν initialValueπαρέχεται, reduce()ορίζει έτσι το πρώτο στοιχείο του πίνακα ως την τιμή συσσωρευτή ( totalισούται με 2) και ορίζει το δεύτερο στοιχείο του πίνακα ως την τρέχουσα τιμή ( currentValueισούται με 3). Στη συνέχεια επαναλαμβάνεται μέσω του υπόλοιπου πίνακα.

Κατά τη μείωση μιας σειράς συμβολοσειρών:

const strings = ['one', 'two', 'three']; const numberString = strings.reduce((acc, curr) => { return acc + ', ' + curr; }); console.log(numberString); // "one, two, three"

Ενώ είναι εύκολο να παραλείψετε το initialValueεπιχείρημα εάν η reduce()μέθοδος σας θα επιστρέψει έναν αριθμό ή μια απλή συμβολοσειρά, θα πρέπει να συμπεριλάβετε ένα εάν θα επιστρέψει έναν πίνακα ή ένα αντικείμενο.

Επιστροφή αντικειμένου

Η μετατροπή ενός πίνακα συμβολοσειρών σε ένα αντικείμενο που δείχνει πόσες φορές κάθε συμβολοσειρά εμφανίζεται στον πίνακα είναι απλή. Απλώς περάστε ένα κενό αντικείμενο ( {}) ως initialValue:

const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"]; const petCounts = pets.reduce(function(obj, pet) { if (!obj[pet]) { // if the pet doesn't yet exist as a property of the accumulator object, // add it as a property and set its count to 1 obj[pet] = 1; } else { // pet exists, so increment its count obj[pet]++; } return obj; // return the modified object to be used as accumulator in the next iteration }, {}); // initialize the accumulator as an empty object console.log(petCounts); /* { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Επιστροφή και συστοιχία

Γενικά, εάν σκοπεύετε να επιστρέψετε έναν πίνακα, map()είναι συχνά μια καλύτερη επιλογή. Λέει στον μεταγλωττιστή (και σε άλλους που διαβάζουν τον κωδικό σας) ότι κάθε στοιχείο στον αρχικό πίνακα θα μετατραπεί και θα επιστραφεί ως ένας νέος πίνακας ίσου μήκους.

Από την άλλη πλευρά, reduce()δείχνει ότι όλα τα στοιχεία του αρχικού πίνακα θα μετατραπούν σε νέα τιμή. Αυτή η νέα τιμή θα μπορούσε να είναι ένας πίνακας, το μήκος του οποίου μπορεί να είναι διαφορετικό από το αρχικό.

Ας υποθέσουμε ότι έχετε μια λίστα αγορών ως μια σειρά από χορδές, αλλά θέλετε να καταργήσετε όλα τα τρόφιμα που δεν σας αρέσουν από τη λίστα. Θα μπορούσατε να χρησιμοποιήσετε filter()για να φιλτράρετε όλα όσα δεν σας αρέσουν και map()να επιστρέψετε μια νέα σειρά συμβολοσειρών ή απλά θα μπορούσατε να χρησιμοποιήσετε reduce():

const shoppingList = ['apples', 'mangoes', 'onions', 'cereal', 'carrots', 'eggplants']; const foodsIDontLike = ['onions', 'eggplants']; const newShoppingList = shoppingList.reduce((arr, curr) => { if (!foodsIDontLike.includes(curr)) { arr.push(curr); } return arr; }, []); console.log(newShoppingList); // ["apples", "mangoes", "cereal", "carrots"]

Αυτό είναι το μόνο που πρέπει να γνωρίζετε για τη reduce()μέθοδο. Όπως ένα μαχαίρι Ελβετικού Στρατού, δεν είναι πάντα το καλύτερο εργαλείο για την εργασία. Αλλά θα χαρείτε να το έχετε στην πίσω τσέπη σας όταν το χρειάζεστε πραγματικά.