Πώς να χρησιμοποιήσετε βρόχους στο JavaScript

Το Looping σάς επιτρέπει να επαναλαμβάνετε κάθε στοιχείο σε έναν πίνακα, ώστε να μπορείτε να προσαρμόσετε και να εξάγετε καθένα από αυτά όπως θέλετε. Όπως σε κάθε γλώσσα προγραμματισμού, οι βρόχοι είναι ένα κρίσιμο εργαλείο για την απόδοση συστοιχιών και στο JavaScript.

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

Η επαυξητική και η υποχώρηση για βρόχο στο JavaScript

Η σταδιακή Για Ο βρόχος είναι η βάση της επανάληψης στο JavaScript.

Υποθέτει μια αρχική τιμή που έχει εκχωρηθεί σε μια μεταβλητή και εκτελεί έναν απλό έλεγχο μήκους υπό όρους. Στη συνέχεια, αυξάνει ή μειώνει την τιμή χρησιμοποιώντας το ++ ή -- χειριστές.

Δείτε πώς φαίνεται η γενική σύνταξή του:

για (var i = αρχική τιμή; i πίνακας [i]}

Τώρα ας επαναλάβουμε έναν πίνακα χρησιμοποιώντας την παραπάνω σύνταξη βάσης:

anArray = [1, 3, 5, 6];
για (ας i = 0; i console.log (anArray [i])
}
Παραγωγή:
1
3
5
6 

Τώρα θα λειτουργήσουμε σε κάθε στοιχείο στον παραπάνω πίνακα χρησιμοποιώντας το JavaScript Για βρόχος:

anArray = [1, 3, 5, 6];
για (ας i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Παραγωγή:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Ο βρόχος επαναλαμβάνεται στον πίνακα σταδιακά με το ++ χειριστή, παράγοντας μια διατεταγμένη έξοδο.

Αλλά χρησιμοποιώντας το αρνητικό (--) χειριστή, μπορείτε να αντιστρέψετε την έξοδο.

Οι συντακτικές είναι οι ίδιες, αλλά η λογική είναι λίγο διαφορετική από τον παραπάνω βρόχο αύξησης.

Δείτε πώς λειτουργεί η μειωτική μέθοδος:

anArray = [1, 3, 5, 6];
για (ας i = anArray.length-1; i> = 0; Εγώ--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Παραγωγή:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Η λογική πίσω από τον παραπάνω κώδικα δεν είναι υπερβολική. Η ευρετηρίαση πίνακα ξεκινά από το μηδέν. Καλώντας λοιπόν anArray [i] κανονικά επαναλαμβάνεται από το δείκτη μηδέν στο τρία καθώς ο παραπάνω πίνακας περιέχει τέσσερα στοιχεία.

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

Διατηρεί τον δείκτη πίνακα σε ένα μικρότερο από το μήκος του. Ο όρος i> = 0 τότε αναγκάζει την καταμέτρηση να σταματήσει στο τελευταίο στοιχείο του πίνακα.

Σχετίζεται με: Μέθοδοι πίνακα JavaScript που πρέπει να κατακτήσετε σήμερα

JavaScript forEach

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

Εδώ είναι η γενική σύνταξη της JavaScript για κάθε:

array.forEach (στοιχείο => {
δράση
})

Ρίξτε μια ματιά στο πώς λειτουργεί στην πράξη:

ας anArray = [1, 3, 5, 6]?
anArray.forEach (x => {
console.log (x)
});
Παραγωγή:
1
3
5
6 

Τώρα χρησιμοποιήστε αυτό για να εκτελέσετε μια απλή μαθηματική πράξη σε κάθε στοιχείο όπως κάνατε στην προηγούμενη ενότητα:

ας anArray = [1, 3, 5, 6]?
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Παραγωγή:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Πώς να χρησιμοποιήσετε το for... in Loop της JavaScript

ο για μεσα βρόχος στο JavaScript επαναλαμβάνεται μέσω ενός πίνακα και επιστρέφει το ευρετήριό του.

Θα το βρείτε εύκολο στη χρήση για μεσα αν είστε εξοικειωμένοι με Βρόχος Python's for loop καθώς μοιάζουν όσον αφορά την απλότητα και τη λογική.

Ρίξτε μια ματιά στη γενική σύνταξή του:

για (αφήστε το στοιχείο στον πίνακα) {
δράση 
}

Ετσι το για μεσα Ο βρόχος εκχωρεί κάθε στοιχείο σε έναν πίνακα στη μεταβλητή (στοιχείο) που δηλώνεται μέσα στην παρένθεση.

Έτσι, η καταγραφή του στοιχείου απευθείας εντός του βρόχου επιστρέφει ένα ευρετήριο πίνακα και όχι τα ίδια τα στοιχεία:

ας anArray = [1, 3, 5, 6]?
για (ας μπω σε anArray) {
console.log (i)
}
Παραγωγή:
0
1
2
3 

Αντ 'αυτού, εξάγετε κάθε στοιχείο:

ας anArray = [1, 3, 5, 6]?
για (ας μπω σε anArray) {
console.log (anArray [i])
}
Παραγωγή:
1
3
5
6 

Όπως κάνατε όταν χρησιμοποιούσατε τον μειωτικό βρόχο, είναι επίσης εύκολο να αντιστρέψετε την έξοδο χρησιμοποιώντας για μεσα:

ας anArray = [1, 3, 5, 6]?
// Αφαιρέστε ένα από το μήκος του πίνακα και εκχωρήστε το σε μια μεταβλητή:
ας v = anArray.length - 1; 
// Χρησιμοποιήστε την παραπάνω μεταβλητή ως βάση δείκτη ενώ επαναλαμβάνετε τον πίνακα:
για (ας μπω σε anArray) {
console.log (anArray [v])
v -= 1;
}
Παραγωγή:
6
5
3
1 

Ο παραπάνω κώδικας είναι λογικά παρόμοιος με αυτό που κάνατε ενώ χρησιμοποιούσατε τον βρόχο μείωσης. Είναι πιο ευανάγνωστο και περιγράφεται ρητά, όμως.

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

ο για... του ο βρόχος είναι παρόμοιος με τον για μεσα βρόχος.

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

Η γενική σύνταξή του μοιάζει με αυτό:

για (επιτρέψτε μου του πίνακα) {
δράση 
}

Ας χρησιμοποιήσουμε αυτήν τη μέθοδο βρόχου για να επαναλάβουμε έναν πίνακα σταδιακά για να δούμε πώς λειτουργεί:

ας anArray = [1, 3, 5, 6]?
για (επιτρέψτε μου του anArray) {
console.log (i)
}
Παραγωγή:
1
3
5
6 

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

ας anArray = [1, 3, 5, 6]?
ας v = anArray.length - 1;
για (ας x του anArray) {
console.log (anArray [v])
v -= 1;
}
Παραγωγή:
6
5
3
1

Για να λειτουργήσετε εντός του βρόχου:

ας anArray = [1, 3, 5, 6]?
ας v = anArray.length - 1;
για (ας x του anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Παραγωγή:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Ο βρόχος Ενώ

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

Για παράδειγμα, δεδομένου ότι το μηδέν είναι πάντα μικρότερο από δέκα, ο παρακάτω κώδικας εκτελείται συνεχώς:

ας i = 0?
ενώ (i <10) {
console.log (4)
}

Ο παραπάνω κώδικας καταγράφει άπειρα "4".

Ας επαναλάβουμε έναν πίνακα χρησιμοποιώντας το ενώ βρόχος:

ας i = 0?
ενώ (i console.log (anArray [i])
i += 1
}
Παραγωγή:
1
3
5
6 

JavaScript do... while Loop

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

Δείτε πώς φαίνεται:

κάνω{
Ενέργειες
}
ενώ (
συνείδηση
)

Τώρα ας επαναλάβουμε έναν πίνακα χρησιμοποιώντας αυτήν τη μέθοδο βρόχου:

κάνω{
console.log (anArray [i])
i += 1
}
ενώ (
i )
Παραγωγή:
1
3
5
6 

Εξοικειωθείτε με τους βρόχους JavaScript

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

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

Πώς να χρησιμοποιήσετε τη δήλωση JavaScript if-else

Η δήλωση if-else είναι το πρώτο σας βήμα προς τον προγραμματισμό της λογικής στις εφαρμογές σας.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα