12 KiB

Raw Permalink Blame History Unescape Escape

Βασικά Στοιχεία JavaScript: Πίνακες και Βρόχοι

Σκίτσο από την Tomomi Imura

Κουίζ Πριν το Μάθημα

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

🎥 Κάντε κλικ στις παραπάνω εικόνες για βίντεο σχετικά με τους πίνακες και τους βρόχους.

Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο Microsoft Learn!

Πίνακες

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

✅ Οι πίνακες είναι παντού γύρω μας! Μπορείτε να σκεφτείτε ένα παράδειγμα από την καθημερινή ζωή, όπως μια σειρά από ηλιακούς συλλέκτες;

Η σύνταξη για έναν πίνακα είναι ένα ζεύγος αγκυλών.

let myArray = [];

Αυτός είναι ένας κενός πίνακας, αλλά οι πίνακες μπορούν να δηλωθούν ήδη γεμάτοι με δεδομένα. Πολλαπλές τιμές σε έναν πίνακα διαχωρίζονται με κόμμα.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Οι τιμές του πίνακα λαμβάνουν μια μοναδική τιμή που ονομάζεται δείκτης, ένας ακέραιος αριθμός που αποδίδεται με βάση την απόστασή του από την αρχή του πίνακα. Στο παραπάνω παράδειγμα, η συμβολοσειρά "Chocolate" έχει δείκτη 0, και ο δείκτης του "Rocky Road" είναι 4. Χρησιμοποιήστε τον δείκτη με αγκύλες για να ανακτήσετε, να αλλάξετε ή να εισαγάγετε τιμές στον πίνακα.

✅ Σας εκπλήσσει το γεγονός ότι οι πίνακες ξεκινούν από τον δείκτη μηδέν; Σε ορισμένες γλώσσες προγραμματισμού, οι δείκτες ξεκινούν από το 1. Υπάρχει μια ενδιαφέρουσα ιστορία γύρω από αυτό, την οποία μπορείτε να διαβάσετε στη Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

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

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

Και μπορείτε να εισαγάγετε μια νέα τιμή σε έναν συγκεκριμένο δείκτη όπως αυτό:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Ένας πιο συνηθισμένος τρόπος για να προσθέσετε τιμές σε έναν πίνακα είναι χρησιμοποιώντας τελεστές πινάκων, όπως το array.push().

Για να μάθετε πόσα στοιχεία υπάρχουν σε έναν πίνακα, χρησιμοποιήστε την ιδιότητα length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Δοκιμάστε το μόνοι σας! Χρησιμοποιήστε την κονσόλα του προγράμματος περιήγησης για να δημιουργήσετε και να διαχειριστείτε έναν πίνακα της δικής σας δημιουργίας.

Βρόχοι

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

Βρόχος For

Ο βρόχος for απαιτεί 3 μέρη για να επαναληφθεί:

counter Μια μεταβλητή που συνήθως αρχικοποιείται με έναν αριθμό που μετρά τις επαναλήψεις
condition Μια έκφραση που χρησιμοποιεί τελεστές σύγκρισης για να σταματήσει τον βρόχο όταν είναι false
iteration-expression Εκτελείται στο τέλος κάθε επανάληψης, συνήθως χρησιμοποιείται για να αλλάξει την τιμή του counter

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Εκτελέστε αυτόν τον κώδικα στην κονσόλα του προγράμματος περιήγησης. Τι συμβαίνει όταν κάνετε μικρές αλλαγές στον counter, τη συνθήκη ή την έκφραση επανάληψης; Μπορείτε να τον κάνετε να λειτουργεί αντίστροφα, δημιουργώντας μια αντίστροφη μέτρηση;

Βρόχος While

Σε αντίθεση με τη σύνταξη του βρόχου for, οι βρόχοι while απαιτούν μόνο μια συνθήκη που θα σταματήσει τον βρόχο όταν η συνθήκη γίνει false. Οι συνθήκες στους βρόχους συνήθως βασίζονται σε άλλες τιμές, όπως counters, και πρέπει να διαχειρίζονται κατά τη διάρκεια του βρόχου. Οι αρχικές τιμές για τους counters πρέπει να δημιουργούνται εκτός του βρόχου, και οποιεσδήποτε εκφράσεις για την εκπλήρωση μιας συνθήκης, συμπεριλαμβανομένης της αλλαγής του counter, πρέπει να διατηρούνται μέσα στον βρόχο.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Γιατί θα επιλέγατε έναν βρόχο for αντί για έναν βρόχο while; 17.000 χρήστες είχαν την ίδια ερώτηση στο StackOverflow, και ορισμένες από τις απόψεις μπορεί να σας ενδιαφέρουν.

Βρόχοι και Πίνακες

Οι πίνακες χρησιμοποιούνται συχνά με βρόχους, επειδή οι περισσότερες συνθήκες απαιτούν το μήκος του πίνακα για να σταματήσουν τον βρόχο, και ο δείκτης μπορεί επίσης να είναι η τιμή του counter.

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, for-of, και map. Ξαναγράψτε τον βρόχο του πίνακά σας χρησιμοποιώντας μία από αυτές τις τεχνικές.

Κουίζ Μετά το Μάθημα

Κουίζ μετά το μάθημα

Ανασκόπηση & Αυτομελέτη

Οι πίνακες στη JavaScript έχουν πολλές μεθόδους που είναι εξαιρετικά χρήσιμες για τη διαχείριση δεδομένων. Διαβάστε για αυτές τις μεθόδους και δοκιμάστε μερικές από αυτές (όπως push, pop, slice και splice) σε έναν πίνακα της δικής σας δημιουργίας.

Εργασία

Επανάληψη Πίνακα

Αποποίηση Ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

12 KiB Raw Permalink Blame History Unescape Escape