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

Τι είναι το JavaScript .map();

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

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

Ποια είναι η σύνταξη για το JavaScript .map();

Η σύνταξη για το JS .map() αποτελείται από μια συνάρτηση callback σε έναν πίνακα:

const newArr = originalArr.map(function(element, index, array) {
    // Code
});
javascript
  • originalArr: Ο πίνακας στον οποίο θα εφαρμοστεί .map()
  • element: Το τρέχον στοιχείο που υποβάλλεται σε επεξεργασία
  • index (optional): Ο δείκτης του τρέχοντος στοιχείου στον πίνακα
  • array (optional): Ο αρχικός πίνακας

Ας δούμε ένα παράδειγμα.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
javascript

Η συνάρτηση callback που εισάγεται ως όρισμα στο .map() παίρνει κάθε στοιχείο από τον αρχικό πίνακα number και το τετραγωνίζει. Στη συνέχεια, λαμβάνουμε έναν νέο πίνακα με τα τετράγωνα κάθε στοιχείου από τον αρχικό πίνακα.

Παραδείγματα του JavaScript .map()

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

Φιλτράρισμα δεδομένων

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

const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0) .map(num => num * 2);
// Output: [4, 8]
javascript

Σε αυτό το παράδειγμα, ο πίνακας numbers περιέχει τις τιμές 1-5. Στη συνέχεια, εφαρμόζουμε τη μέθοδο .filter(). Η συνθήκη φιλτραρίσματος ορίζει ότι ο αριθμός modulo 2 πρέπει να είναι μηδέν, κάτι που ισχύει μόνο για τους ζυγούς αριθμούς. Αυτό έχει ως αποτέλεσμα έναν νέο πίνακα, ο οποίος περιέχει μόνο στοιχεία που διαιρούνται με το 2, δίνοντάς μας τον πίνακα [2,4]. Στη συνέχεια, χρησιμοποιούμε τη μέθοδο .map() για να διπλασιάσουμε κάθε στοιχείο του πίνακα. Ως αποτέλεσμα, [2,4] γίνεται [4,8].

Απόδοση λιστών σε βιβλιοθήκες JavaScript

Το React είναι ένα από τα πιο δημοφιλή frameworks και βιβλιοθήκες JavaScript, και .map()χρήσιμο για την απόδοση λιστών σε αυτό. Σημειώστε ότι το React χρησιμοποιεί σύνταξη JSX.

import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);
javascript

Πάνω, εισήγαμε τα μοντέλα React και ReactDOM και δημιουργήσαμε έναν πίνακα με το όνομα colors με διάφορα ονόματα χρωμάτων. Το λειτουργικό στοιχείο React ColorList χρησιμοποιεί .map() για να δημιουργήσει ένα στοιχείο <li> για κάθε χρώμα. Το χαρακτηριστικό key επιτρέπει αποτελεσματικές ενημερώσεις με το React. Στο τελικό βήμα, το ColorsListαποδίδεται στο DOM με ReactDOM.render και η έξοδος προστίθεται στο στοιχείο DOM με το ID root.

Στοιχεία μορφοποίησης ενός πίνακα

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

const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]
javascript

Σε αυτό το παράδειγμα, συνδυάζουμε .map() με τη μέθοδο toLowerCase() για να μετατρέψουμε κάθε όνομα σε πεζά. Το αποτέλεσμα είναι ένας νέος πίνακας που ονομάζεται formattedNames, ο οποίος περιέχει τα ονόματα σε πεζά. Ο αρχικός πίνακας names παραμένει αμετάβλητος.

Go to Main Menu