Ο απόλυτος οδηγός για τις μεθόδους συστοιχίας 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
Δεδομένου ότι το initialValue
1 παρέχεται μετά τη συνάρτηση επανάκλησης, 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()
μέθοδο. Όπως ένα μαχαίρι Ελβετικού Στρατού, δεν είναι πάντα το καλύτερο εργαλείο για την εργασία. Αλλά θα χαρείτε να το έχετε στην πίσω τσέπη σας όταν το χρειάζεστε πραγματικά.