Στη JavaScript, η κλάση Array διαθέτει πολλές ισχυρές ενσωματωμένες μεθόδους για τον μετασχηματισμό πινάκων.
Αυτές οι μέθοδοι κάνουν πολύ πιο εύκολη τη μετατροπή ενός πίνακα σε έναν άλλον από ό,τι θα ήταν με έναν απλό βρόχο for ή με πιο άμεσο χειρισμό.
Μερικές μέθοδοι είναι καθαρές, που σημαίνει ότι δεν τροποποιούν τον αρχικό πίνακα.
Αντ' αυτού επιστρέφουν έναν νέο πίνακα.
Άλλες μέθοδοι όμως χειρίζονται τον πίνακα στον οποίο καλούνται και δεν επιστρέφουν τον τροποποιημένο πίνακα.
Παρακάτω παρουσιάζονται μερικές από τις πιο συχνά χρησιμοποιούμενες μεθόδους για τον μετασχηματισμό πινάκων.
Έναν πλήρη κατάλογο των διαθέσιμων μεθόδων θα βρεις στην τεκμηρίωση του MDN.
map (καθαρή)
Δημιούργησε έναν νέο πίνακα μετασχηματίζοντας κάθε στοιχείο σύμφωνα με μια συνάρτηση που περνάς ως όρισμα.
Αυτές οι συναρτήσεις callback γράφονται συχνά ως συναρτήσεις βέλους.
let arr = [1, 2, 3, 4];
const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]
Αξίζει να σημειώσεις ότι ο πίνακας που προκύπτει θα έχει πάντα το ίδιο μήκος με τον αρχικό.
filter (καθαρή)
Δημιουργεί έναν πίνακα φιλτράροντας τον τρέχοντα, με βάση μια συνάρτηση φιλτραρίσματος (που επιστρέφει αληθής αν το στοιχείο πρέπει να κρατηθεί και ψευδής αν πρέπει να αφαιρεθεί).
let arr = [1, 2, 3, 4];
arr.filter((value) => value % 2 === 0);
// => [2, 4]
reduce (καθαρή)
Μειώνει τον πίνακα σε μία μόνο τιμή χρησιμοποιώντας μια συνάρτηση που παίρνει ως παραμέτρους έναν συσσωρευτή και το τρέχον στοιχείο του πίνακα.
Αυτή η συνάρτηση υποδεικνύει πώς το τρέχον στοιχείο πρέπει να συγχωνευτεί στον συσσωρευτή και επιστρέφει τον συσσωρευτή που θα χρησιμοποιηθεί στην επόμενη επανάληψη.
let arr = [1, 2, 3, 4];
// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10
// Classify the numbers by whether they are odd or not
arr.reduce(
(accumulator, currentValue) => {
if (currentValue % 2 === 0) {
accumulator.even.push(currentValue);
} else {
accumulator.odd.push(currentValue);
}
return accumulator;
},
{ even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }
reverse
Αντιστρέφει τα στοιχεία ενός πίνακα.
const arr = [1, 2, 3, 4];
arr.reverse();
// => [4, 3, 2, 1]
Αυτή η μέθοδος τροποποιεί τον πίνακα στον οποίο καλείται.
slice (καθαρή)
Με βάση μια αρχική και μια τελική θέση, δημιουργεί έναν υποπίνακα από τον πίνακα που περνάς ως παράμετρο.
Το στοιχείο στη θέση τέλους δε θα συμπεριληφθεί.
Επίσης, όλες οι παράμετροι είναι προαιρετικές:
η αρχική θέση έχει ως προεπιλογή το 0 και η τελική θέση έχει ως προεπιλογή το μήκος του πίνακα.
const arr = [1, 2, 3, 4];
arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]
splice
Αφαιρεί ή αντικαθιστά ή/και προσθέτει νέα στοιχεία ενός πίνακα.
Δέχεται τις εξής παραμέτρους:
- τη θέση του στοιχείου από όπου θα αρχίσει η τροποποίηση του πίνακα
- τον αριθμό των στοιχείων που θα διαγραφούν
- τα στοιχεία που θα εισαχθούν στον πίνακα (προαιρετικά)
Το splice επιστρέφει τα στοιχεία που αφαιρέθηκαν.
const arr = ['1', '2', '5', '6'];
// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']
// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']
// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']
sort
Από προεπιλογή, το sort ταξινομεί τα στοιχεία ενός πίνακα μετατρέποντάς τα πρώτα σε συμβολοσειρές και εφαρμόζοντας στη συνέχεια σύγκριση συμβολοσειρών (δες τη Σύγκριση εννοιών).
Η ταξινόμηση γίνεται επί τόπου, που σημαίνει ότι ο αρχικός πίνακας τροποποιείται.
Το sort επιστρέφει επίσης τον τροποποιημένο πίνακα, κάτι που είναι βολικό αν θέλεις να αλυσιδώσεις άλλες μεθόδους πάνω του.
const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']
Για να προσαρμόσεις τη συμπεριφορά της ταξινόμησης, μπορείς να περάσεις μια συνάρτηση σύγκρισης ως όρισμα.
Η ίδια η συνάρτηση σύγκρισης καλείται με δύο ορίσματα, που είναι δύο στοιχεία του πίνακα.
Στη συνέχεια πρέπει να επιστρέψει τα εξής:
- έναν αρνητικό αριθμό αν το πρώτο όρισμα πρέπει να ταξινομηθεί πριν από το δεύτερο
- έναν θετικό αριθμό αν το πρώτο όρισμα πρέπει να ταξινομηθεί μετά από το δεύτερο
-
0 αν η σειρά των στοιχείων πρέπει να παραμείνει ίδια
Ακολουθεί ένα παράδειγμα του πώς μπορείς να χρησιμοποιήσεις μια προσαρμοσμένη συνάρτηση σύγκρισης για να ταξινομήσεις έναν πίνακα αντικειμένων.
const arr = [
{ name: 'Lydia', age: 7 },
{ name: 'Anne', age: 34 },
{ name: 'Holger', age: 59 },
];
arr.sort((item1, item2) => {
if (item1.name < item2.name) {
return -1;
}
if (item1.name > item2.name) {
return 1;
}
return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]
Άσκηση εκμάθησης
