# Βασικά Στοιχεία JavaScript: Πίνακες και Βρόχοι  > Σκίτσο από την [Tomomi Imura](https://twitter.com/girlie_mac) ## Κουίζ Πριν το Μάθημα [Κουίζ πριν το μάθημα](https://ff-quizzes.netlify.app/web/quiz/13) Αυτό το μάθημα καλύπτει τα βασικά της JavaScript, της γλώσσας που προσφέρει διαδραστικότητα στον ιστό. Σε αυτό το μάθημα, θα μάθετε για τους πίνακες και τους βρόχους, που χρησιμοποιούνται για τη διαχείριση δεδομένων. [](https://youtube.com/watch?v=1U4qTyq02Xw "Πίνακες") [](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Βρόχοι") > 🎥 Κάντε κλικ στις παραπάνω εικόνες για βίντεο σχετικά με τους πίνακες και τους βρόχους. > Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)! ## Πίνακες Η εργασία με δεδομένα είναι μια συνηθισμένη εργασία για κάθε γλώσσα, και γίνεται πολύ πιο εύκολη όταν τα δεδομένα είναι οργανωμένα σε μια δομημένη μορφή, όπως οι πίνακες. Με τους πίνακες, τα δεδομένα αποθηκεύονται σε μια δομή παρόμοια με λίστα. Ένα μεγάλο πλεονέκτημα των πινάκων είναι ότι μπορείτε να αποθηκεύσετε διαφορετικούς τύπους δεδομένων σε έναν πίνακα. ✅ Οι πίνακες είναι παντού γύρω μας! Μπορείτε να σκεφτείτε ένα παράδειγμα από την καθημερινή ζωή, όπως μια σειρά από ηλιακούς συλλέκτες; Η σύνταξη για έναν πίνακα είναι ένα ζεύγος αγκυλών. ```javascript let myArray = []; ``` Αυτός είναι ένας κενός πίνακας, αλλά οι πίνακες μπορούν να δηλωθούν ήδη γεμάτοι με δεδομένα. Πολλαπλές τιμές σε έναν πίνακα διαχωρίζονται με κόμμα. ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; ``` Οι τιμές του πίνακα λαμβάνουν μια μοναδική τιμή που ονομάζεται **δείκτης**, ένας ακέραιος αριθμός που αποδίδεται με βάση την απόστασή του από την αρχή του πίνακα. Στο παραπάνω παράδειγμα, η συμβολοσειρά "Chocolate" έχει δείκτη 0, και ο δείκτης του "Rocky Road" είναι 4. Χρησιμοποιήστε τον δείκτη με αγκύλες για να ανακτήσετε, να αλλάξετε ή να εισαγάγετε τιμές στον πίνακα. ✅ Σας εκπλήσσει το γεγονός ότι οι πίνακες ξεκινούν από τον δείκτη μηδέν; Σε ορισμένες γλώσσες προγραμματισμού, οι δείκτες ξεκινούν από το 1. Υπάρχει μια ενδιαφέρουσα ιστορία γύρω από αυτό, την οποία μπορείτε να [διαβάσετε στη Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering). ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; iceCreamFlavors[2]; //"Vanilla" ``` Μπορείτε να χρησιμοποιήσετε τον δείκτη για να αλλάξετε μια τιμή, όπως αυτό: ```javascript iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan" ``` Και μπορείτε να εισαγάγετε μια νέα τιμή σε έναν συγκεκριμένο δείκτη όπως αυτό: ```javascript iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough" ``` ✅ Ένας πιο συνηθισμένος τρόπος για να προσθέσετε τιμές σε έναν πίνακα είναι χρησιμοποιώντας τελεστές πινάκων, όπως το array.push(). Για να μάθετε πόσα στοιχεία υπάρχουν σε έναν πίνακα, χρησιμοποιήστε την ιδιότητα `length`. ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; iceCreamFlavors.length; //5 ``` ✅ Δοκιμάστε το μόνοι σας! Χρησιμοποιήστε την κονσόλα του προγράμματος περιήγησης για να δημιουργήσετε και να διαχειριστείτε έναν πίνακα της δικής σας δημιουργίας. ## Βρόχοι Οι βρόχοι μας επιτρέπουν να εκτελούμε επαναλαμβανόμενες ή **επικαλυπτόμενες** εργασίες, και μπορούν να εξοικονομήσουν πολύ χρόνο και κώδικα. Κάθε επανάληψη μπορεί να διαφέρει στις μεταβλητές, τις τιμές και τις συνθήκες της. Υπάρχουν διαφορετικοί τύποι βρόχων στη JavaScript, και όλοι έχουν μικρές διαφορές, αλλά ουσιαστικά κάνουν το ίδιο πράγμα: επαναλαμβάνουν δεδομένα. ### Βρόχος For Ο βρόχος `for` απαιτεί 3 μέρη για να επαναληφθεί: - `counter` Μια μεταβλητή που συνήθως αρχικοποιείται με έναν αριθμό που μετρά τις επαναλήψεις - `condition` Μια έκφραση που χρησιμοποιεί τελεστές σύγκρισης για να σταματήσει τον βρόχο όταν είναι `false` - `iteration-expression` Εκτελείται στο τέλος κάθε επανάληψης, συνήθως χρησιμοποιείται για να αλλάξει την τιμή του counter ```javascript // Counting up to 10 for (let i = 0; i < 10; i++) { console.log(i); } ``` ✅ Εκτελέστε αυτόν τον κώδικα στην κονσόλα του προγράμματος περιήγησης. Τι συμβαίνει όταν κάνετε μικρές αλλαγές στον counter, τη συνθήκη ή την έκφραση επανάληψης; Μπορείτε να τον κάνετε να λειτουργεί αντίστροφα, δημιουργώντας μια αντίστροφη μέτρηση; ### Βρόχος While Σε αντίθεση με τη σύνταξη του βρόχου `for`, οι βρόχοι `while` απαιτούν μόνο μια συνθήκη που θα σταματήσει τον βρόχο όταν η συνθήκη γίνει `false`. Οι συνθήκες στους βρόχους συνήθως βασίζονται σε άλλες τιμές, όπως counters, και πρέπει να διαχειρίζονται κατά τη διάρκεια του βρόχου. Οι αρχικές τιμές για τους counters πρέπει να δημιουργούνται εκτός του βρόχου, και οποιεσδήποτε εκφράσεις για την εκπλήρωση μιας συνθήκης, συμπεριλαμβανομένης της αλλαγής του counter, πρέπει να διατηρούνται μέσα στον βρόχο. ```javascript //Counting up to 10 let i = 0; while (i < 10) { console.log(i); i++; } ``` ✅ Γιατί θα επιλέγατε έναν βρόχο for αντί για έναν βρόχο while; 17.000 χρήστες είχαν την ίδια ερώτηση στο StackOverflow, και ορισμένες από τις απόψεις [μπορεί να σας ενδιαφέρουν](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). ## Βρόχοι και Πίνακες Οι πίνακες χρησιμοποιούνται συχνά με βρόχους, επειδή οι περισσότερες συνθήκες απαιτούν το μήκος του πίνακα για να σταματήσουν τον βρόχο, και ο δείκτης μπορεί επίσης να είναι η τιμή του counter. ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; for (let i = 0; i < iceCreamFlavors.length; i++) { console.log(iceCreamFlavors[i]); } //Ends when all flavors are printed ``` ✅ Πειραματιστείτε με την επανάληψη ενός πίνακα της δικής σας δημιουργίας στην κονσόλα του προγράμματος περιήγησης. --- ## 🚀 Πρόκληση Υπάρχουν και άλλοι τρόποι επανάληψης πινάκων εκτός από τους βρόχους for και while. Υπάρχουν οι [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), και [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Ξαναγράψτε τον βρόχο του πίνακά σας χρησιμοποιώντας μία από αυτές τις τεχνικές. ## Κουίζ Μετά το Μάθημα [Κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/quiz/14) ## Ανασκόπηση & Αυτομελέτη Οι πίνακες στη JavaScript έχουν πολλές μεθόδους που είναι εξαιρετικά χρήσιμες για τη διαχείριση δεδομένων. [Διαβάστε για αυτές τις μεθόδους](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) και δοκιμάστε μερικές από αυτές (όπως push, pop, slice και splice) σε έναν πίνακα της δικής σας δημιουργίας. ## Εργασία [Επανάληψη Πίνακα](assignment.md) --- **Αποποίηση Ευθύνης**: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.