34. JavaScript βρόχος For (For Loop)

JS Loop For


Οι βρόχοι μπορούν να εκτελέσουν ένα μπλοκ κώδικα αρκετές φορές.


JavaScript Βρόχοι (Loops)

Οι βρόχοι είναι χρήσιμοι, αν θέλετε να εκτελείτε τον ίδιο κωδικό ξανά και ξανά, κάθε φορά με διαφορετική τιμή.

Συχνά αυτό συμβαίνει όταν εργάζεστε με πίνακες:

Αντί της γραφής:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Μπορεί να γράφτεί:

var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Δοκιμάστε το »


Διαφορετικά είδη βρόχων

Το JavaScript υποστηρίζει διαφορετικά είδη βρόχων:

  • for – βρόχους μέσω ενός μπλοκ κώδικα για έναν αριθμό επαναλήψεων
  • for/in – βρόχους μέσα από τις ιδιότητες ενός αντικειμένου
  • for/of – βρόχους μέσω των τιμών ενός επαναλαμβανόμενου αντικειμένου
  • while – βρόχους μέσω ενός μπλοκ κώδικα αν μια καθορισμένη προϋπόθεση είναι αληθής
  • do/while – επίσης βρόχους μέσω ενός μπλοκ κώδικα, αν μια συγκεκριμένη προϋπόθεση είναι αληθής

Ο βρόχος For

Ο forβρόχος έχει την ακόλουθη σύνταξη:

for (statement 1; statement 2; statement 3) {
  // μπλοκ κώδικα προς εκτέλεση

Η δήλωση 1 εκτελείται (μία φορά) πριν από την εκτέλεση του μπλοκ κώδικα.

Η δήλωση 2 ορίζει την προϋπόθεση για την εκτέλεση του μπλοκ κώδικα.

Η δήλωση 3 εκτελείται (κάθε φορά) μετά την εκτέλεση του μπλοκ κώδικα.

Παράδειγμα

for (i = 0; i < 5; i++) {
  text += "Ο αριθμός είναι " + i + "<br>";
}

Δοκιμάστε το »

Από το παραπάνω παράδειγμα, μπορείτε να διαβάσετε:

Η δήλωση 1 ορίζει μια μεταβλητή πριν ξεκινήσει ο βρόχος (var i = 0).

Η δήλωση 2 ορίζει την προϋπόθεση για την εκτέλεση του βρόχου (πρέπει να είναι μικρότερη από 5).

Η δήλωση 3 αυξάνει μια τιμή (i ++) κάθε φορά που έχει εκτελεστεί το μπλοκ κώδικα στον βρόχο.


Δήλωση 1

Κανονικά θα χρησιμοποιήσετε την δήλωση 1 για να αρχικοποιήσετε τη μεταβλητή που χρησιμοποιείται στον βρόχο (i = 0).

Αυτό δεν συμβαίνει πάντοτε, η JavaScript δεν ενδιαφέρεται. Η δήλωση 1 είναι προαιρετική.

Μπορείτε να εισάγετε πολλές τιμές εκκίνησης (initiate) στην δήλωση 1 (διαχωρισμένες με κόμμα):

Παράδειγμα

for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

Δοκιμάστε το »

Και μπορείτε να παραλείψετε τη δήλωση 1 (όπως όταν οι τιμές σας έχουν οριστεί πριν ξεκινήσει ο βρόχος):

Παράδειγμα

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Δοκιμάστε το »

Δήλωση 2

Συχνά η δήλωση 2 χρησιμοποιείται για την αξιολόγηση της κατάστασης της αρχικής μεταβλητής.

Αυτό δεν συμβαίνει πάντοτε, δεν ενδιαφέρει την JavaScript. Η Δήλωση 2 είναι επίσης προαιρετική.

Αν η δήλωση 2 επιστρέψει αληθής, ο βρόχος θα ξεκινήσει εκ νέου, αν επιστρέψει ψευδής, ο βρόχος θα τελειώσει.

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


Δήλωση 3

Συχνά η δήλωση 3 αυξάνει την τιμή της αρχικής μεταβλητής.

Αυτό δεν συμβαίνει πάντοτε, δεν απασχολεί την JavaScript και η δήλωση 3 είναι προαιρετική.

Η Δήλωση 3 μπορεί να κάνει αρνητική προσαύξηση (i -), θετική προσαύξηση (i = i + 15) ή οτιδήποτε άλλο σχετικό.

Η δήλωση 3 μπορεί επίσης να παραλειφθεί (όπως όταν αυξάνετε τις τιμές σας μέσα στον βρόχο):

Παράδειγμα

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Δοκιμάστε το »


Ο βρόχος For/In (For/In Loop)

Η JavaScript δήλωση for/in διατρέχει τις ιδιότητες ενός αντικειμένου:

Παράδειγμα

var person = {fname:"Γιάννης", lname:"Ιωάννου", age:25}; 
var text = "";
var x;
for (x in person) {
  text += person[x];
}

Δοκιμάστε το »


Ο βρόχος For/Of (For/Of Loop)

Η JavaScript δήλωση for/of διατρέχει τις τιμές ενός επαναληπτικού αντικειμένου ( iterable object)

Η for/of σας επιτρέπει να δημιουργήσετε βρόχους πάνω σε δομές δεδομένων που είναι επαναληπτικές όπως Arrays, Strings, Maps, NodeLists και πολλά άλλα.

Ο for/of βρόχος έχει την ακόλουθη σύνταξη:

for (μεταβλητή of επαναληπτικούΑντικειμένου) {
  // κώδικας που θα εκτελεστεί
}

μεταβλητή – Για κάθε επανάληψη η τιμή της επόμενης ιδιότητας αντιστοιχεί στη μεταβλητή. Η μεταβλητή μπορεί να δηλωθεί με constletή var.

επαναληπτικόΑντικείμενο (iterable) – Ένα αντικείμενο που έχει επαναληπτικές ιδιότητες.

Διατρέχοντας έναν βρόχο σε έναν πίνακα (Looping over an Array)

Παράδειγμα

var cars = ['BMW', 'Volvo', 'Mini'];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

Δοκιμάστε το »

Διατρέχοντας έναν βρόχο σε μια συμβολοσειρά (Looping over a String)

Παράδειγμα

var txt = 'JavaScript';
var x;

for (x of txt) {
  document.write(x + "<br >");
}

Δοκιμάστε το »


Ο βρόχος While (While Loop)

Ο βρόχος while και ο βρόχος do/while εξηγούνται στο επόμενο κεφάλαιο.


Δοκιμάστε τον εαυτό σας με τις ασκήσεις

Ασκηση:

Δημιουργήστε ένα βρόχο που εκτείνεται από 0 έως 9.

var i;
 ( = .  < . ) {
  console.log (i);
}}

Υποβολή απάντησης “

Ξεκινήστε την Άσκηση


Days
Hours
Minutes

34. JavaScript βρόχος For (For Loop)

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: