Ο τελικός οδηγός για τις μεθόδους συστοιχίας JavaScript - Χάρτης

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

Σύνταξη:

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

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

ES5

var arr = [1, 2, 3, 4]; var newArray = arr.map(function(element) { return element * 2 }); console.log(arr); // [1, 2, 3, 4] console.log(newArray); // [2, 4, 6, 8]

ES6

const arr = [1, 2, 3, 4]; const newArray = arr.map(element => { return element * 2; }); const newArrayOneLiner = arr.map(element => element * 2); console.log(arr); // [1, 2, 3, 4] console.log(newArray); // [2, 4, 6, 8] console.log(newArrayOneLiner); // [2, 4, 6, 8]

map εναντίον forEach

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

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

const letters = ['a', 'b', 'c', 'd']; letters.forEach(letter => { console.log(letter); });

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

Πώς να χρησιμοποιήσετε mapμε άλλες μεθόδους συστοιχίας

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

Χρησιμοποιώντας mapμεfilter

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

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.map(num => { if (num > 10) { return num * 2; } }); console.log(doublesOverTen); // [undefined, undefined, 30, 40]

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

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.filter(num => { return num > 10; }).map(num => { return num * 2; }); console.log(doublesOverTen); // [30, 40]

Αυτός ο κωδικός μπορεί να απλοποιηθεί ακόμη περισσότερο:

const nums = [5, 10, 15, 20]; const doublesOverTen = nums.filter(num => num > 10).map(num => num * 2); console.log(doublesOverTen); // [30, 40]

Χρησιμοποιώντας mapμεreverse

Μπορεί να υπάρχουν στιγμές που πρέπει να αντιστρέψετε έναν πίνακα ενώ χαρτογραφείτε μέσω αυτού. Η reverse()μέθοδος το καθιστά εύκολο, αλλά είναι σημαντικό να θυμόμαστε ότι, ενώ map()είναι αμετάβλητο, reverse()δεν είναι. Με άλλα λόγια, η reverse()μέθοδος θα αλλάξει τον αρχικό πίνακα:

const nums = [1, 2, 3, 4, 5]; const reversedDoubles = nums.reverse().map(num => num * 2); console.log(nums); // [5, 4, 3, 2, 1] console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Ένα από τα κύρια πλεονεκτήματα map()είναι ότι δεν αλλάζει την αρχική συστοιχία και η χρήση reverse()αυτού του είδους χάνει τον σκοπό. Ωστόσο, αυτή είναι μια απλή επιδιόρθωση - απλώς θυμηθείτε να χρησιμοποιήσετε map()πρώτα και μετά reverse()τη νέα σειρά που επιστρέφει:

const nums = [1, 2, 3, 4, 5]; const reversedDoubles = nums.map(num => num * 2).reverse(); console.log(nums); // [1, 2, 3, 4, 5] console.log(reversedDoubles); // [10, 8, 6, 4, 2]

Χρήση mapσε αντικείμενο

Ενώ map()προορίζεται για λειτουργία σε συστοιχίες, με λίγη επιπλέον δουλειά μπορείτε επίσης να επαναλάβετε τα αντικείμενα. Object.keys(), Object.values()και Object.entries()όλοι επιστρέφουν έναν πίνακα, που σημαίνει ότι map()μπορεί εύκολα να αλυσοποιηθεί σε κάθε μέθοδο:

const obj = { a: 1, b: 2, c: 3 } const doubles = Object.values(obj).map(num => num * 2); console.log(doubles); // [2, 4, 6]

Τώρα προχωρήστε και map()όλα τα πράγματα!