Επεξήγηση βρόχων JavaScript: Για Loop, While Loop, Do ... while Loop και άλλα

Οι βρόχοι χρησιμοποιούνται σε JavaScript για την εκτέλεση επαναλαμβανόμενων εργασιών με βάση μια συνθήκη. Οι συνθήκες συνήθως επιστρέφουν trueή falseόταν αναλύονται. Ένας βρόχος θα συνεχίσει να λειτουργεί μέχρι να επιστρέψει η καθορισμένη συνθήκη false.

Οι τρεις πιο συνηθισμένοι τύποι βρόχων είναι

  • Για
  • ενώ
  • κάνε λίγο

Μπορείτε να πληκτρολογήσετε js for, js whileή js do whileνα πάρετε περισσότερες πληροφορίες σχετικά με κάποιο από αυτά. Ας τα δούμε, και μερικές παραλλαγές, με περισσότερες λεπτομέρειες τώρα.

για βρόχο

Σύνταξη

for ([initialization]); [condition]; [final-expression]) { // statement }

Η forδήλωση javascript αποτελείται από τρεις εκφράσεις και μια δήλωση:

Περιγραφή

  • προετοιμασία - Εκτέλεση πριν από την πρώτη εκτέλεση στο βρόχο. Αυτή η έκφραση χρησιμοποιείται συνήθως για τη δημιουργία μετρητών. Οι μεταβλητές που δημιουργούνται εδώ καλύπτονται στο βρόχο. Μόλις ολοκληρωθεί η εκτέλεση του βρόχου, καταστρέφονται.
  • συνθήκη - Έκφραση που ελέγχεται πριν από την εκτέλεση κάθε επανάληψης. Εάν παραλειφθεί, αυτή η έκφραση αξιολογείται ως αληθής. Εάν αξιολογηθεί ως αληθής, εκτελείται η δήλωση του βρόχου. Εάν αξιολογηθεί ως ψευδής, ο βρόχος σταματά.
  • final-express - Έκφραση που εκτελείται μετά από κάθε επανάληψη. Συνήθως χρησιμοποιείται για την αύξηση ενός μετρητή. Αλλά μπορεί να χρησιμοποιηθεί και για τη μείωση ενός μετρητή.
  • statement - Κωδικός που θα επαναληφθεί στο βρόχο

οποιαδήποτε από αυτές τις τρεις εκφράσεις ή τη δήλωση μπορεί να παραλειφθεί. Για βρόχους χρησιμοποιούνται συνήθως για τη μέτρηση ενός ορισμένου αριθμού επαναλήψεων για την επανάληψη μιας δήλωσης. Χρησιμοποιήστε μια breakδήλωση για έξοδο από τον βρόχο πριν η έκφραση συνθήκης αξιολογηθεί ως ψευδής.

Κοινές παγίδες

Υπέρβαση των ορίων ενός πίνακα

Κατά την ευρετηρίαση ενός πίνακα πολλές φορές είναι εύκολο να ξεπεράσετε τα όρια του πίνακα (π.χ. προσπαθήστε να αναφέρετε το 4ο στοιχείο μιας συστοιχίας 3 στοιχείων).

 // This will cause an error. // The bounds of the array will be exceeded. var arr = [ 1, 2, 3 ]; for (var i = 0; i <= arr.length; i++) { console.log(arr[i]); } output: 1 2 3 undefined

Υπάρχουν δύο τρόποι για να διορθώσετε αυτόν τον κώδικα. Ρυθμίστε την κατάσταση είτε i < arr.lengthήi <= arr.length - 1

Παραδείγματα

Επανάληψη μέσω ακέραιων αριθμών από 0-8

for (var i = 0; i < 9; i++) { console.log(i); } output: 0 1 2 3 4 5 6 7 8

Ξεφύγετε από έναν βρόχο πριν από την ψευδή έκφραση της κατάστασης

for (var elephant = 1; elephant < 10; elephant+=2) { if (elephant === 7) { break; } console.info('elephant is ' + elephant); } output: elephant is 1 elephant is 3 elephant is 5

για ... σε βρόχο

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

for (variable in object) { ... }

Απαιτείται / ΠροαιρετικόParameterDescriptionRequiredVariableΈνα διαφορετικό όνομα ιδιότητας αντιστοιχίζεται σε μεταβλητή σε κάθε επανάληψη.

Παραδείγματα

// Initialize object. a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" } // Iterate over the properties. var s = "" for (var key in a) { s += key + ": " + a[key]; s += "

"; } document.write (s); // Output: // a: Athens // b: Belgrade // c: Cairo // Initialize the array. var arr = new Array("zero", "one", "two"); // Add a few expando properties to the array. arr["orange"] = "fruit"; arr["carrot"] = "vegetable"; // Iterate over the properties and elements. var s = ""; for (var key in arr) { s += key + ": " + arr[key]; s += "

"; } document.write (s); // Output: // 0: zero // 1: one // 2: two // orange: fruit // carrot: vegetable // Efficient way of getting an object's keys using an expression within the for-in loop's conditions var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0; for (myKeys[i++] in myObj); document.write(myKeys); //Output: // a // b // c

για ... του βρόχου

Η for...ofδήλωση δημιουργεί έναν επαναληπτικό βρόχο πάνω από επαναλαμβανόμενα αντικείμενα (συμπεριλαμβανομένων των Array, Map, Set, Arguments αντικείμενο και ούτω καθεξής), επικαλούμενο ένα προσαρμοσμένο γάντζο επανάληψης με δηλώσεις που θα εκτελεστούν για την αξία κάθε ξεχωριστής ιδιότητας.

 for (variable of object) { statement }

Περιγραφή μεταβλητή Σε κάθε επανάληψη μια τιμή μιας διαφορετικής ιδιότητας εκχωρείται στο variable.objectObject του οποίου οι αναρίθμητες ιδιότητες επαναλαμβάνονται.

Παραδείγματα

Πίνακας

 let arr = [ "fred", "tom", "bob" ]; for (let i of arr) { console.log(i); } // Output: // fred // tom // bob

Χάρτης

 var m = new Map(); m.set(1, "black"); m.set(2, "red"); for (var n of m) { console.log(n); } // Output: // 1,black // 2,red

Σειρά

 var s = new Set(); s.add(1); s.add("red"); for (var n of s) { console.log(n); } // Output: // 1 // red

Αντικείμενα επιχειρήματα

 // your browser must support for..of loop // and let-scoped variables in for loops function displayArgumentsObject() { for (let n of arguments) { console.log(n); } } displayArgumentsObject(1, 'red'); // Output: // 1 // red

ενώ βρόχος

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

Here is the syntax for while loop:

Syntax:

while (condition) { statement(s); }

statement(s): A statement that is executed as long as the condition evaluates to true.

condition: Here, condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When condition evaluates to false, execution continues with the statement after the while loop.

Example:

 var i = 1; while (i < 10) { console.log(i); i++; // i=i+1 same thing } Output: 1 2 3 4 5 6 7 8 9

How to Iterate with JavaScript While Loops

While loops will run as long as the condition inside the ( ) is true. Example:

while(condition){ code... }

Hint 1:

Use a iterator variable such as i in your condition

var i = 0; while(i <= 4){ }

Spoiler Alert Solution Ahead!

Solution:

// Setup var myArray = []; // Only change code below this line. var i = 0; while (i <= 4){ myArray.push(i); i++; }

Do...while loop

The do...while loop is closely related to while loop. In the do while loop, the condition is checked at the end of the loop.

Here is the syntax for do...while loop:

Syntax:

 do { *Statement(s);* } while (*condition*);

statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.

condition: Here, a condition is a Boolean expression. If Boolean expression evaluates to true, the statement is executed again. When Boolean expression evaluates to false, the loops ends.

Example:

var i = 0; do { i = i + 1; console.log(i); } while (i < 5); Output: 1 2 3 4 5

How to Iterate with JavaScript Do…While Loops

  • Do...WhileΟι βρόχοι διασφαλίζουν ότι ο κώδικας εκτελείται τουλάχιστον μία φορά και μετά την εκτέλεση, εάν η συνθήκη στο εσωτερικό while()είναι αληθής , συνεχίζεται με τον βρόχο, διαφορετικά σταματά.

Λύση:

var myArray = []; var i = 10; do { myArray.push(i); i++; } while(i <= 10);