Σε αυτό το σεμινάριο, θα μάθετε για το JavaScript για… of loop με τη βοήθεια παραδειγμάτων.
Στο JavaScript, υπάρχουν τρεις τρόποι με τους οποίους μπορούμε να χρησιμοποιήσουμε έναν forβρόχο.
- JavaScript για βρόχο
- JavaScript για… σε βρόχο
- JavaScript για… of loop
Ο for… ofβρόχος εισήχθη στις νεότερες εκδόσεις του JavaScript ES6 .
Ο for… ofβρόχος στο JavaScript σας επιτρέπει να κάνετε επανάληψη αντικειμένων με δυνατότητα επαναληψιμότητας (πίνακες, σύνολα, χάρτες, συμβολοσειρές κ.λπ.).
JavaScript για… of loop
Η σύνταξη του for… ofβρόχου είναι:
for (element of iterable) ( // body of for… of )
Εδώ,
- iterable - ένα επαναλαμβανόμενο αντικείμενο (πίνακας, σύνολο, συμβολοσειρές κ.λπ.).
- στοιχείο - στοιχεία στο επαναλαμβανόμενο
Στην απλή αγγλική γλώσσα, μπορείτε να διαβάσετε τον παραπάνω κώδικα ως: για κάθε στοιχείο της επανάληψης, εκτελέστε το σώμα του βρόχου.
για… από με συστοιχίες
Ο for… ofβρόχος μπορεί να χρησιμοποιηθεί για επανάληψη ενός πίνακα. Για παράδειγμα,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Παραγωγή
Τζον Σάρα Τζακ
Στο παραπάνω πρόγραμμα, ο for… ofβρόχος χρησιμοποιείται για να επαναλάβει το αντικείμενο πίνακα μαθητών και να εμφανίσει όλες τις τιμές του.
για… από με Strings
Μπορείτε να χρησιμοποιήσετε for… ofβρόχο για να επαναλάβετε τις τιμές συμβολοσειρών. Για παράδειγμα,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Παραγωγή
κώδικας
για… από με σύνολα
Μπορείτε να επαναλάβετε τα στοιχεία Set χρησιμοποιώντας τον for… ofβρόχο. Για παράδειγμα,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Παραγωγή
1 2 3
για… από με τους Χάρτες
Μπορείτε να επαναλάβετε τα στοιχεία του χάρτη χρησιμοποιώντας το for… ofβρόχο. Για παράδειγμα,
// define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let (key, value) of map) ( console.log(key + '- ' + value); )
Παραγωγή
όνομα - Jack ηλικίας - 27
Επαναληπτές που καθορίζονται από τον χρήστη
Μπορείτε να δημιουργήσετε έναν επαναλήπτη χειροκίνητα και να χρησιμοποιήσετε τον for… ofβρόχο για να επαναλάβετε τις επαναλήψεις. Για παράδειγμα,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) // iterating using for… of for (const i of iterableObj) ( console.log(i); )
Παραγωγή
1 2 3
για… με γεννήτριες
Δεδομένου ότι οι γεννήτριες είναι επαναλαμβανόμενες, μπορείτε να εφαρμόσετε έναν επαναληπτικό με ευκολότερο τρόπο. Στη συνέχεια, μπορείτε να επαναλάβετε τις γεννήτριες χρησιμοποιώντας το for… ofβρόχο. Για παράδειγμα,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Παραγωγή
10 20 30
για… από Vs για… in
| για… από | για μεσα |
|---|---|
Ο for… ofβρόχος χρησιμοποιείται για επανάληψη μέσω των τιμών ενός επαναληπτικού. | Ο for… inβρόχος χρησιμοποιείται για επανάληψη μέσω των πλήκτρων ενός αντικειμένου. |
Ο for… ofβρόχος δεν μπορεί να χρησιμοποιηθεί για επανάληψη ενός αντικειμένου. | Μπορείτε να χρησιμοποιήσετε for… inγια να επαναλάβετε τέτοιες συστοιχίες και συμβολοσειρές, αλλά θα πρέπει να αποφύγετε τη χρήση for… inγια επαναλήψεις. |
Ο for… ofβρόχος παρουσιάστηκε στο ES6 . Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τη χρήση του. Για να μάθετε περισσότερα, επισκεφθείτε το JavaScript για… της Υποστήριξης.
