Η JavaScript είναι από τις πιο χρησιμοποιούμενες γλώσσες προγραμματισμού. Οι προγραμματιστές που σκοπεύουν να γίνουν μηχανικοί JavaScript πρέπει να μάθουν τα βασικά των βρόχων, τους τύπους τους και τον τρόπο λειτουργίας τους.
Ένας βρόχος JavaScript είναι ένα εργαλείο που χρησιμοποιείται για την εκτέλεση επαναλαμβανόμενων εργασιών με βάση μια συγκεκριμένη συνθήκη. Από την άλλη πλευρά, το ‘iterate’ είναι ένας γενικός όρος, που σημαίνει επανάληψη στο πλαίσιο του βρόχου. Ένας βρόχος θα συνεχίσει να επαναλαμβάνεται μέχρι να εκπληρωθεί μια συνθήκη διακοπής.
Για να το καταλάβετε καλύτερα, μπορείτε να το σκεφτείτε ως ένα ηλεκτρονικό παιχνίδι όπου σας δίνουν οδηγίες να κάνετε X βήματα προς τα βόρεια και μετά Y βήματα προς τα αριστερά.
Μπορείτε να αναπαραστήσετε να κάνετε 7 βήματα προς τα βόρεια ως:
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
Όταν εκτελεστεί το παραπάνω μπλοκ κώδικα, θα έχετε αυτό.
Πίνακας περιεχομένων
Γιατί χρησιμοποιούνται συνήθως βρόχοι;
- Εκτέλεση επαναλαμβανόμενων εργασιών: Μπορείτε να χρησιμοποιήσετε βρόχους για να εκτελέσετε εντολές μέχρι να πληρούνται ορισμένες προϋποθέσεις.
- Επανάληψη σε αντικείμενα ή πίνακες: Με τους βρόχους, μπορείτε να επαναλάβετε τις ιδιότητες ενός αντικειμένου ή στοιχείων ενός πίνακα, επιτρέποντάς σας να εκτελέσετε ορισμένες ενέργειες για κάθε ιδιότητα ή στοιχείο.
- Φιλτράρισμα δεδομένων: Μπορείτε να χρησιμοποιήσετε έναν βρόχο για να φιλτράρετε δεδομένα με βάση συγκεκριμένες συνθήκες.
Οι βρόχοι JavaScript έρχονται σε διάφορες μορφές. Για, Ενώ, Κάνετε… Ενώ, Για…από, και Για…σε. Ας τα εξερευνήσουμε λεπτομερώς και ας δείξουμε πώς λειτουργεί το καθένα.
Για βρόχο
Ένας βρόχος for θα επαναληφθεί έως ότου μια καθορισμένη συνθήκη αξιολογηθεί ως true. Ένας βρόχος for έχει τρεις προαιρετικές εκφράσεις, ακολουθούμενες από ένα μπλοκ κώδικα.
for (initialization; condition; finalExpression) {
// code
}
- Η έκφραση αρχικοποίησης έρχεται πριν από την εκτέλεση του πρώτου βρόχου. Αυτή η έκφραση συνήθως προετοιμάζει έναν ή περισσότερους μετρητές.
- Μια έκφραση συνθήκης ελέγχεται κάθε φορά πριν από την εκτέλεση του βρόχου for. Ο κώδικας στον βρόχο ή στην πρόταση εκτελείται κάθε φορά που η παράσταση αξιολογείται ως true. Από την άλλη πλευρά, ο βρόχος σταματά όταν η έκφραση αξιολογηθεί ως ψευδής. Ωστόσο, εάν η έκφραση παραλειφθεί, η έκφραση θα αξιολογηθεί αυτόματα ως true.
- Η finalExpression εκτελείται μετά από κάθε επανάληψη βρόχου. Η έκφραση χρησιμοποιείται κυρίως για την αύξηση ενός μετρητή.
Μπορείτε να χρησιμοποιήσετε το {}, δήλωση αποκλεισμού, για να ομαδοποιήσετε και να εκτελέσετε πολλές δηλώσεις. Εάν θέλετε να βγείτε από τον βρόχο νωρίς πριν η έκφραση συνθήκης αξιολογηθεί ως ψευδής, χρησιμοποιήστε τη δήλωση break.
Παραδείγματα βρόχων for με κώδικα
for (let i = 0; i < 7; i++) {
console.log(i);
}
Σε αυτό το μπλοκ κώδικα.
- Η μεταβλητή i αρχικοποιείται στο μηδέν (έστω i=0).
- Η συνθήκη είναι το i πρέπει να είναι μικρότερο από 7 (i=7).
- Ο βρόχος θα επαναλαμβάνεται επανειλημμένα εάν η τιμή του i είναι μικρότερη από 7 (i<7>.
- Η επανάληψη θα προσθέτει 1 στην τιμή του i μετά από κάθε επανάληψη (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Το μπλοκ κώδικα επαναλαμβάνεται από το 1 έως το 10 (i<11).
- Ο βρόχος αρχικοποιεί μια μεταβλητή i με τιμή 1 (έστω i = 1).
- Η συνθήκη βρόχου θα συνεχίσει να εκτελείται εάν η τιμή του i είναι μικρότερη από 11 (i < 11).
- Η τιμή του i αυξάνεται κατά 2 μετά από κάθε επανάληψη (i += 2).
Η εντολή if αξιολογεί εάν η τιμή του i=9. Εάν η συνθήκη είναι αληθής, η εντολή break εκτελείται και ο βρόχος τερματίζεται.
(εικόνα)
Για… του βρόχου
Ο βρόχος for…of επαναλαμβάνεται πάνω από επαναλαμβανόμενα αντικείμενα όπως Map, Array, Arguments και Set. Αυτός ο βρόχος καλεί ένα προσαρμοσμένο άγκιστρο επανάληψης με εντολές που εκτελούνται για την τιμή κάθε ξεχωριστής ιδιότητας.
Η βασική δομή ενός βρόχου for… είναι:
for (variable of object) statement
Παραδείγματα for…of loop in action
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
Σε αυτόν τον κωδικό?
- Ορίζουμε έναν πίνακα με το όνομα frontendLanguages
- Ο πίνακας έχει τρία στοιχεία. “HTML”, “CSS”, “JavaScript” και “React”.
- Ο βρόχος for…of επαναλαμβάνεται πάνω από κάθε στοιχείο στο frontendLanguages.
- Το i στο μπλοκ κώδικα καταλαμβάνει την τιμή κάθε στοιχείου κατά τη διάρκεια κάθε επανάληψης και τις τιμές που εκτυπώνονται στην κονσόλα.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
Σε αυτό το μπλοκ κώδικα.
- Δηλώνουμε μια μεταβλητή s, την οποία εκχωρούμε σε ένα νέο σύνολο χρησιμοποιώντας τον κατασκευαστή Set().
- Δύο στοιχεία προστίθενται στον κώδικα χρησιμοποιώντας τη μέθοδο add().
- Το για….των επαναλήψεων πάνω από τα στοιχεία αντικείμενο.
- Ο βρόχος εκχωρεί το τρέχον στοιχείο στο n πριν από την εκτέλεση της εντολής console.log(n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
Σε αυτό το μπλοκ κώδικα.
- Χρησιμοποιούμε τον κατασκευαστή Map() για να δημιουργήσουμε ένα νέο αντικείμενο χάρτη.
- Δηλώνεται μια μεταβλητή m.
- Χρησιμοποιώντας τη μέθοδο .set(), προσθέτουμε πέντε ζεύγη κλειδιού-τιμής.
- Ο βρόχος for…of επαναλαμβάνεται πάνω από στοιχεία του αντικειμένου χάρτη m.
Για… σε βρόχο
Ένας βρόχος for…in χρησιμοποιείται για την επανάληψη των ιδιοτήτων ενός αντικειμένου. Η βασική δομή ενός βρόχου for…in είναι:
for (property in object) {
// code
}
Μπορείτε να χρησιμοποιήσετε το for…in loop για επανάληψη σε πίνακες και αντικείμενα που μοιάζουν με πίνακα.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
Σε αυτό το μπλοκ κώδικα.
- Εισάγουμε ένα αντικείμενο JavaScript και το ονομάζουμε shoppingList.
- Χρησιμοποιούμε βρόχο for για επανάληψη σε κάθε ιδιότητα στη shoppingList χρησιμοποιώντας τον τελεστή in.
- Σε κάθε επανάληψη, ο βρόχος εκχωρεί το τρέχον όνομα ιδιότητας στο shoppingList.
Ενώ
Ο βρόχος while αξιολογεί μια συνθήκη, αν τη βρει αληθή, εκτελείται το μπλοκ κώδικα. Ωστόσο, εάν η συνθήκη είναι ψευδής, ο βρόχος τελειώνει και το μπλοκ κώδικα δεν θα εκτελεστεί.
Αυτή είναι η βασική δομή ενός βρόχου while.
while (condition) Statement
Η συνθήκη δοκιμής πρέπει να προκύψει πριν από την εκτέλεση της εντολής στον βρόχο. Μπορείτε να εκτελέσετε πολλές εντολές χρησιμοποιώντας το {} ή δηλώσεις αποκλεισμού.
Παράδειγμα βρόχου while σε δράση
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
Σε αυτόν τον κωδικό?
- Μια μεταβλητή n αρχικοποιείται με μηδενική τιμή (έστω n=0).
- Ο βρόχος θα εκτελείται εφόσον η τιμή του n είναι μικρότερη από 9 (n<9)
- Η τιμή του n εμφανίζεται στην κονσόλα και αυξάνεται κατά 1 μετά από κάθε επανάληψη (n++)
- Ο κώδικας θα σταματήσει να εκτελείται στο 8.
Κάνετε … Ενώ βρόχος
Ένας βρόχος do…while επαναλαμβάνεται έως ότου μια συγκεκριμένη συνθήκη αξιολογηθεί ως false.
Η γενική δομή μιας δήλωσης do…while είναι:
do statement while (condition);
Η εντολή εκτελείται μία φορά αλλά πριν από τον έλεγχο της συνθήκης. Η πρόταση θα εκτελεστεί εάν η συνθήκη είναι αληθής. Ωστόσο, εάν η συνθήκη που αξιολογήθηκε είναι ψευδής, η εκτέλεση θα σταματήσει και το στοιχείο ελέγχου περνά στη δήλωση μετά το do..while. Ο κώδικας σε έναν βρόχο do…while είναι εγγυημένο ότι θα εκτελεστεί τουλάχιστον μία φορά, ακόμα κι αν η συνθήκη αξιολογηθεί ως true.
Παράδειγμα do…while
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
Σε αυτόν τον κωδικό?
- Εισάγουμε μια μεταβλητή n και ορίζουμε την αρχική της τιμή ως 0 (έστω n=0).
- Η μεταβλητή μας n εισάγει έναν βρόχο do…while όπου η τιμή της αυξάνεται κατά 1 μετά από κάθε επανάληψη (n+=1)
- Καταγράφεται η τιμή του n.
- Ο βρόχος θα συνεχίσει να εκτελείται όσο η τιμή του n είναι μικρότερη από 7 (n<7).
Όταν εκτελείτε αυτόν τον κώδικα, η κονσόλα θα εμφανίζει τιμές n ξεκινώντας από το 1 έως το 7 καθώς ο βρόχος εκτελείται 7 φορές.
Ένθετος βρόχος
Ένας ένθετος βρόχος είναι μια κατάσταση κατά την οποία έχουμε έναν βρόχο μέσα σε έναν βρόχο. Για παράδειγμα, μπορούμε να έχουμε έναν βρόχο for ένθετο μέσα σε έναν άλλο βρόχο for.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Υπάρχουν δύο μεταβλητές. εξωτερικό και εσωτερικό και αρχικοποιούνται και τα δύο με την τιμή μηδέν.
- Και οι δύο μεταβλητές αυξάνονται κατά 2 μετά από κάθε επανάληψη
- Ο εξωτερικός και ο εσωτερικός βρόχος επαναλαμβάνονται τρεις φορές ο καθένας.
Δηλώσεις ελέγχου βρόχου
Οι δηλώσεις ελέγχου βρόχου, μερικές φορές γνωστές ως “εντολές άλματος”, διακόπτουν την κανονική ροή ενός προγράμματος. Το Break and continue είναι παραδείγματα εντολών ελέγχου βρόχου.
Διακοπή δηλώσεων
Οι εντολές διακοπής τερματίζουν αμέσως έναν βρόχο, ακόμα κι αν η συνθήκη δεν έχει εκπληρωθεί.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
Ο κωδικός που αποδίδεται θα εμφανίζεται ως:
Συνεχίστε τις δηλώσεις
Οι δηλώσεις Continue χρησιμοποιούνται για να παραλείψουμε ένα συγκεκριμένο μπλοκ κώδικα και να πραγματοποιήσουμε επανάληψη για τον νέο βρόχο.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Ο κωδικός που αποδίδεται θα εμφανίζεται ως:
συμπέρασμα
Παραπάνω είναι οι συνήθεις βρόχοι που θα συναντήσετε στο vanilla JavaScript και τα πλαίσια/βιβλιοθήκες του. Όπως τονίστηκε, κάθε τύπος βρόχου έχει την περίπτωση χρήσης του και διαφορετικές συμπεριφορές. Εάν επιλέξετε λάθος τύπο βρόχου, πιθανότατα θα έχετε σφάλματα και ο κώδικάς σας πιθανότατα θα εμφανίζει απροσδόκητη συμπεριφορά.
Εάν έχετε να κάνετε με πλαίσιο ή βιβλιοθήκη JavaScript, ελέγχετε πάντα την τεκμηρίωσή του και χρησιμοποιείτε τους ενσωματωμένους βρόχους.