Χάρτης JavaScript, μείωση και φίλτρο - Λειτουργίες JS Array που εξηγούνται με παραδείγματα κώδικα

Ο χάρτης, η μείωση και το φίλτρο είναι όλες οι μέθοδοι πίνακα σε JavaScript. Κάθε ένας θα επαναλάβει έναν πίνακα και θα πραγματοποιήσει έναν μετασχηματισμό ή έναν υπολογισμό. Κάθε ένας θα επιστρέψει έναν νέο πίνακα με βάση το αποτέλεσμα της συνάρτησης. Σε αυτό το άρθρο, θα μάθετε γιατί και πώς να χρησιμοποιείτε το καθένα.

Εδώ είναι μια διασκεδαστική περίληψη του Steven Luscher:

Χάρτης / φίλτρο / μείωση σε ένα tweet:

χάρτης ([?,?,?], μάγειρας)

=> [?,?,?]

φίλτρο ([?,?,?], isVegetarian)

=> [?,?]

μείωση ([?,?], φαγητό)

=>;

- Steven Luscher (@steveluscher) 10 Ιουνίου 2016

Χάρτης

Η map()μέθοδος χρησιμοποιείται για τη δημιουργία ενός νέου πίνακα από έναν υπάρχοντα, εφαρμόζοντας μια συνάρτηση σε καθένα από τα στοιχεία του πρώτου πίνακα.

Σύνταξη

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

Στην επιστροφή κλήσης, απαιτείται μόνο ο πίνακας element. Συνήθως πραγματοποιείται κάποια ενέργεια στην τιμή και στη συνέχεια επιστρέφεται μια νέα τιμή.

Παράδειγμα

Στο ακόλουθο παράδειγμα, κάθε αριθμός σε έναν πίνακα διπλασιάζεται.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

Φίλτρο

Η filter()μέθοδος παίρνει κάθε στοιχείο σε έναν πίνακα και εφαρμόζει μια δήλωση υπό όρους εναντίον του. Εάν αυτός ο όρος επιστρέψει αληθινός, το στοιχείο ωθείται στον πίνακα εξόδου. Εάν η συνθήκη επιστρέψει ψευδής, το στοιχείο δεν ωθείται στον πίνακα εξόδου.

Σύνταξη

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

Η σύνταξη για filterείναι παρόμοια με map, εκτός από τη συνάρτηση επανάκλησης που πρέπει να επιστρέψει trueγια να διατηρήσει το στοιχείο, ή falseαλλιώς. Στην επιστροφή κλήσης, απαιτείται μόνο το element.

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

Στο ακόλουθο παράδειγμα, οι περίεργοι αριθμοί "φιλτράρονται" έξω, αφήνοντας μόνο ζυγούς αριθμούς.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

Στο επόμενο παράδειγμα, filter()χρησιμοποιείται για να πάρει όλους τους μαθητές των οποίων οι βαθμοί είναι μεγαλύτεροι ή ίσοι με 90.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Περιορίζω

Η reduce()μέθοδος μειώνει έναν πίνακα τιμών σε μία μόνο τιμή. Για να πάρει την τιμή εξόδου, εκτελεί μια λειτουργία μειωτή σε κάθε στοιχείο του πίνακα.

Σύνταξη

arr.reduce(callback[, initialValue])

Το callbackόρισμα είναι μια συνάρτηση που θα καλείται μία φορά για κάθε στοιχείο του πίνακα. Αυτή η συνάρτηση απαιτεί τέσσερα ορίσματα, αλλά συχνά χρησιμοποιούνται μόνο τα δύο πρώτα.

  • συσσωρευτής - η επιστρεφόμενη τιμή της προηγούμενης επανάληψης
  • currentValue - το τρέχον στοιχείο του πίνακα
  • index - το ευρετήριο του τρέχοντος στοιχείου
  • array - ο αρχικός πίνακας στον οποίο κλήθηκε η μείωση
  • Το initialValueεπιχείρημα είναι προαιρετικό. Εάν παρέχεται, θα χρησιμοποιηθεί ως αρχική τιμή συσσωρευτή στην πρώτη κλήση στη συνάρτηση επανάκλησης.

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

Το ακόλουθο παράδειγμα προσθέτει κάθε αριθμό μαζί σε μια σειρά αριθμών.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

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

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Επεξήγηση βίντεο

Δείτε το βίντεο παρακάτω από το κανάλι YouTube του freeCodeCamp.org. Καλύπτει τις μεθόδους συστοιχίας που συζητήθηκαν, καθώς και μερικές ακόμη.