Cheat Sheet Μεθόδων Πινάκων JavaScript

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

Δημιουργία Πινάκων

Η JavaScript παρέχει διάφορους τρόπους για τη δημιουργία πινάκων:

Χρήση Πινάκων (Array Literals)

let arr = [1, 2, 3];

Χρήση του Constructor

let arr = new Array(1, 2, 3);

Χρήση της μεθόδου Array.of

let arr = Array.of(1, 2, 3);

Χρήση της μεθόδου Array.from

let arr = Array.from('123'); // ['1', '2', '3']

Λειτουργίες Πινάκων

Οι πίνακες παρέχουν πληθώρα μεθόδων για την προσθήκη, διαγραφή, τροποποίηση και αναζήτηση δεδομένων:

Προσθήκη στοιχείων

• push: Προσθήκη ενός ή περισσότερων στοιχείων στο τέλος του πίνακα
• unshift: Προσθήκη ενός ή περισσότερων στοιχείων στην αρχή του πίνακα

Διαγραφή στοιχείων

• pop: Διαγραφή του τελευταίου στοιχείου του πίνακα
• shift: Διαγραφή του πρώτου στοιχείου του πίνακα
• splice: Διαγραφή οποιουδήποτε αριθμού στοιχείων με βάση το ευρετήριο

Εύρεση στοιχείων

• indexOf: Εύρεση του ευρετηρίου ενός στοιχείου στον πίνακα
• includes: Προσδιορισμός εάν ο πίνακας περιέχει ένα συγκεκριμένο στοιχείο

Επανάληψη μέσω πινάκων

• forEach: Εκτέλεση μιας συνάρτησης επανάκλησης μία φορά για κάθε στοιχείο του πίνακα
• map: Δημιουργία ενός νέου πίνακα με τα αποτελέσματα της κλήσης μιας παρεχόμενης συνάρτησης σε κάθε στοιχείο του καλούμενου πίνακα
• filter: Δημιουργία ενός νέου πίνακα με όλα τα στοιχεία που περνούν τον έλεγχο που υλοποιείται από την παρεχόμενη συνάρτηση

Μετασχηματισμός πίνακα

• join: Συνένωση όλων των στοιχείων ενός πίνακα σε ένα αλφαριθμητικό
• slice: Επιστροφή ενός ρηχού αντιγράφου ενός τμήματος ενός πίνακα
• concat: Συγχώνευση δύο ή περισσότερων πινάκων

Νέες Δυνατότητες ES6

Η ES6 επέφερε πολλές βελτιώσεις στις λειτουργίες των πινάκων:

Τελεστής Spread (Διασποράς)

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill

arr.fill(0); // [0, 0, 0]

Array.prototype.includes

arr.includes(2); // true

Βελτιστοποίηση Απόδοσης

Όταν εργάζεστε με μεγάλους πίνακες, η βελτιστοποίηση της απόδοσης είναι ιδιαίτερα σημαντική:

• Προσπαθήστε να χρησιμοποιείτε εγγενείς μεθόδους όπως η map και η filter, οι οποίες συνήθως υλοποιούνται σε C++ και είναι ταχύτερες από τους βρόχους JavaScript.
• Για πίνακες που υφίστανται συχνούς χειρισμούς, εξετάστε τη χρήση των Typed Arrays.
• Αποφύγετε τις λειτουργίες DOM μέσα σε βρόχους. Αντ’ αυτού, συλλέξτε τους κόμβους DOM που πρόκειται να επεξεργαστείτε και εκτελέστε τη λειτουργία όλες μαζί.

Συμπέρασμα

Μέσα από αυτόν τον οδηγό, θα πρέπει να έχετε μια βαθύτερη κατανόηση των λειτουργιών των πινάκων JavaScript. Για περισσότερες πληροφορίες, ανατρέξτε στα MDN Web Docs.