Βρόχοι Πίνακα σε

Σχετικά με την έννοια Βρόχοι Πίνακα

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

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

Ο βρόχος for

Ο πιο βασικός και συνήθως πολύ αποδοτικός τρόπος να κάνεις επανάληψη πάνω σε έναν πίνακα είναι να χρησιμοποιήσεις έναν βρόχο for, δες τους βρόχους for.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

Ο for...of βρόχος

Όταν θέλεις να δουλέψεις απευθείας με την τιμή σε κάθε επανάληψη και δεν χρειάζεσαι καθόλου τη θέση, μπορείς να χρησιμοποιήσεις έναν βρόχο for...of.

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

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Όπως ακριβώς στους κανονικούς βρόχους for, μπορείς να χρησιμοποιήσεις το continue για να σταματήσεις την τρέχουσα επανάληψη και το break για να σταματήσεις εντελώς την εκτέλεση του βρόχου.

Η JavaScript έχει επίσης έναν βρόχο for...in για να κάνεις επανάληψη πάνω στα κλειδιά ενός αντικειμένου. Είναι σημαντικό να σημειώσεις ότι τα for...of και for...in δεν είναι εναλλάξιμα, δες την τεκμηρίωση του MDN για λεπτομέρειες.

Η μέθοδος forEach

Κάθε πίνακας περιλαμβάνει μια μέθοδο forEach που μπορεί επίσης να χρησιμοποιηθεί για να κάνεις επανάληψη πάνω στα στοιχεία του πίνακα.

Το forEach δέχεται ένα callback ως παράμετρο. Η συνάρτηση callback καλείται μία φορά για κάθε στοιχείο του πίνακα.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

Στο παραπάνω παράδειγμα το callback χρησιμοποιεί ως παράμετρο μόνο το τρέχον στοιχείο. Αν χρειαστεί, το callback μπορεί να χρησιμοποιήσει έως και τρεις παραμέτρους.

• την τιμή της τρέχουσας επανάληψης
• τη θέση της τρέχουσας επανάληψης
• ολόκληρο τον πίνακα

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

Εκτός από το callback, το forEach δέχεται ως προαιρετική δεύτερη παράμετρο το context του this που θα χρησιμοποιηθεί για την επανάληψη. Μπορείς να δεις ένα παράδειγμα στην ενότητα "Using thisArg" στην τεκμηρίωση του MDN.

Υπάρχουν μερικά πράγματα που καλό είναι να έχεις κατά νου όταν δουλεύεις με το forEach.

• Δεν υπάρχει τρόπος να σταματήσεις την επανάληψη μόλις ξεκινήσει ο βρόχος forEach. Οι εντολές break και continue δεν υπάρχουν σε αυτή την περίπτωση.
• Το forEach συμπεριφέρεται περίεργα αν τροποποιήσεις τον πίνακα αφού ξεκινήσει ο βρόχος. Τα στοιχεία που προσθέτεις στο τέλος θα αγνοηθούν, η αφαίρεση στοιχείων μπορεί να κάνει άλλα να παραλειφθούν κ.λπ. Για να αποφύγεις τέτοιου είδους προβλήματα, μην τροποποιείς ποτέ τον υποκείμενο πίνακα μέσα στο callback.
• Η τιμή επιστροφής της ίδιας της μεθόδου forEach είναι undefined. Για τον λόγο αυτό, δεν μπορείς να αλυσιδώσεις άλλες μεθόδους πίνακα στο τέλος.
• Αν θέλεις να βελτιστοποιήσεις τον κώδικά σου ως προς την απόδοση, καλό είναι να προτιμήσεις το for ή το for...of, καθώς και οι δύο είναι περίπου τρεις φορές πιο γρήγοροι.