Οι διαφορές μεταξύ forEach () και χάρτη () που πρέπει να γνωρίζει κάθε προγραμματιστής

Το JavaScript έχει μερικές εύχρηστες μεθόδους που μας βοηθούν να επαναλάβουμε τις συστοιχίες μας. Οι δύο πιο συχνά χρησιμοποιούμενες για επανάληψη είναι Array.prototype.map()και Array.prototype.forEach().

Αλλά νομίζω ότι παραμένουν λίγο ασαφείς, ειδικά για αρχάριους. Επειδή και οι δύο κάνουν επανάληψη και παράγουν κάτι. Λοιπόν, ποια είναι η διαφορά;

Σε αυτό το άρθρο, θα δούμε τα εξής:

  • Ορισμοί
  • Η επιστρεφόμενη τιμή
  • Ικανότητα αλυσίδας άλλων μεθόδων
  • Ευμετάβλητο
  • Ταχύτητα απόδοσης
  • Τελικές σκέψεις

Ορισμοί

Η mapμέθοδος λαμβάνει μια συνάρτηση ως παράμετρος. Στη συνέχεια το εφαρμόζει σε κάθε στοιχείο και επιστρέφει έναν εντελώς νέο πίνακα που συμπληρώνεται με τα αποτελέσματα της κλήσης της παρεχόμενης συνάρτησης.

Αυτό σημαίνει ότι επιστρέφει έναν νέο πίνακα που περιέχει μια εικόνα κάθε στοιχείου του πίνακα. Θα επιστρέφει πάντα τον ίδιο αριθμό αντικειμένων.

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

Όπως map, η forEach()μέθοδος λαμβάνει μια συνάρτηση ως όρισμα και την εκτελεί μία φορά για κάθε στοιχείο πίνακα. Ωστόσο, αντί να επιστρέφει έναν νέο πίνακα όπως map, επιστρέφει undefined.

const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass

1. Η επιστρεφόμενη αξία

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

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 

2. Ικανότητα αλυσίδας άλλων μεθόδων

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

Αυτό είναι κάτι που δεν μπορείτε να κάνετε forEach()γιατί, όπως μπορείτε να μαντέψετε, επιστρέφει undefined.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined myAwesomeArray.map(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>>return value: 55 

3. Μεταβλητότητα

Σε γενικές γραμμές, η λέξη "μετάλλαξη" σημαίνει αλλαγή, εναλλαγή, τροποποίηση ή μεταμόρφωση. Και στον κόσμο της JavaScript έχει το ίδιο νόημα.

Ένα μεταβλητό αντικείμενο είναι ένα αντικείμενο του οποίου η κατάσταση μπορεί να τροποποιηθεί μετά τη δημιουργία του. Λοιπόν, τι γίνεται forEachκαι mapσχετικά με τη μεταβλητότητα;

Λοιπόν, σύμφωνα με την τεκμηρίωση MDN:

forEach()δεν μεταλλάσσει τον πίνακα στον οποίο καλείται. (Ωστόσο, callbackμπορεί να το κάνει).

map()δεν μεταλλάσσει τον πίνακα στον οποίο καλείται (αν και callback, αν γίνει επίκληση, μπορεί να το κάνει).

Το JavaScript είναι περίεργο .

Gif

Εδώ, βλέπουμε έναν πολύ παρόμοιο ορισμό και όλοι γνωρίζουμε ότι και οι δύο λαμβάνουν callbackως επιχείρημα. Λοιπόν, ποιο βασίζεται στο αμετάβλητο;

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

Η map()μέθοδος επιστρέφει έναν εντελώς νέο πίνακα με μετασχηματισμένα στοιχεία και την ίδια ποσότητα δεδομένων. Στην περίπτωση forEach(), ακόμη και αν επιστρέψει undefined, θα μεταλλάξει τον αρχικό πίνακα με το callback.

Επομένως, βλέπουμε ξεκάθαρα ότι map()βασίζεται στο αμετάβλητο και forEach()είναι μια μέθοδο μεταλλάκτη.

4. Ταχύτητα απόδοσης

Όσον αφορά την ταχύτητα απόδοσης, είναι λίγο διαφορετικά. Έχει σημασία; Λοιπόν, εξαρτάται από διάφορα πράγματα όπως ο υπολογιστής σας, ο όγκος των δεδομένων που αντιμετωπίζετε και ούτω καθεξής.

Μπορείτε να το ελέγξετε μόνοι σας με αυτό το παράδειγμα παρακάτω ή με το jsPerf για να δείτε ποια είναι ταχύτερη.

const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`) 

Τελικές σκέψεις

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

Αλλά, εάν δεν θα χρειαστείτε τον πίνακα που επιστρέφετε, μην το χρησιμοποιήσετε map()- αντί να χρησιμοποιήσετε forEach()ή ακόμα και έναν forβρόχο.

Ας ελπίσουμε ότι αυτή η ανάρτηση ξεκαθαρίζει τις διαφορές μεταξύ αυτών των δύο μεθόδων. Εάν υπάρχουν περισσότερες διαφορές, μοιραστείτε τις στην ενότητα σχολίων, διαφορετικά ευχαριστούμε που την διαβάσατε.

Διαβάστε περισσότερα από τα άρθρα μου στο ιστολόγιό μου

Φωτογραφία από τον Franck V. στο Unsplash