24 KiB

Raw Permalink Blame History Unescape Escape

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

Σημειώσεις από Tomomi Imura

Ερωτηματολόγιο πριν το μάθημα

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

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

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

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

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

Πίνακες

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

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

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

Δημιουργία Πινάκων

Η δημιουργία ενός πίνακα είναι πολύ απλή - απλά χρησιμοποιήστε αγκύλες!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Τι συμβαίνει εδώ; Μόλις δημιουργήσατε ένα κενό δοχείο χρησιμοποιώντας αυτές τις αγκύλες []. Σκεφτείτε το σαν ένα άδειο ράφι βιβλιοθήκης - είναι έτοιμο να κρατήσει ό,τι βιβλία θέλετε να οργανώσετε εκεί.

Μπορείτε επίσης να γεμίσετε τον πίνακά σας με αρχικές τιμές από την αρχή:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Πράγματα που αξίζει να παρατηρήσετε:

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

Δείκτες Πινάκων

Εδώ είναι κάτι που μπορεί να φαίνεται ασυνήθιστο στην αρχή: οι πίνακες αριθμούν τα αντικείμενά τους ξεκινώντας από το 0, όχι το 1. Αυτή η αρίθμηση με βάση το μηδέν έχει τις ρίζες της στον τρόπο που λειτουργεί η μνήμη των υπολογιστών - είναι μια συμβατική πρακτική προγραμματισμού από τις πρώτες μέρες γλωσσών όπως η C. Κάθε θέση στον πίνακα παίρνει τον δικό της αριθμό διεύθυνσης που ονομάζεται δείκτης.

Δείκτης	Τιμή	Περιγραφή
0	"Σοκολάτα"	Πρώτο στοιχείο
1	"Φράουλα"	Δεύτερο στοιχείο
2	"Βανίλια"	Τρίτο στοιχείο
3	"Φιστίκι"	Τέταρτο στοιχείο
4	"Rocky Road"	Πέμπτο στοιχείο

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

Πρόσβαση σε Στοιχεία Πινάκων:

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

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Ανάλυση του τι συμβαίνει εδώ:

Χρησιμοποιεί σημειογραφία αγκύλων με τον αριθμό δείκτη για πρόσβαση σε στοιχεία
Επιστρέφει την τιμή που είναι αποθηκευμένη στη συγκεκριμένη θέση του πίνακα
Ξεκινά την αρίθμηση από το 0, κάνοντας το πρώτο στοιχείο δείκτη 0

Τροποποίηση Στοιχείων Πινάκων:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

Στο παραπάνω, έχουμε:

Τροποποιήσει το στοιχείο στον δείκτη 4 από "Rocky Road" σε "Butter Pecan"
Προσθέσει ένα νέο στοιχείο "Cookie Dough" στον δείκτη 5
Επεκτείνει το μήκος του πίνακα αυτόματα όταν προσθέτουμε πέρα από τα τρέχοντα όρια

Μήκος Πινάκων και Κοινές Μέθοδοι

Οι πίνακες διαθέτουν ενσωματωμένες ιδιότητες και μεθόδους που κάνουν τη δουλειά με δεδομένα πολύ πιο εύκολη.

Εύρεση Μήκους Πίνακα:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Σημαντικά σημεία για να θυμάστε:

Επιστρέφει τον συνολικό αριθμό στοιχείων στον πίνακα
Ενημερώνεται αυτόματα όταν προστίθενται ή αφαιρούνται στοιχεία
Παρέχει έναν δυναμικό αριθμό χρήσιμο για βρόχους και επαλήθευση

Βασικές Μέθοδοι Πινάκων:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Κατανόηση αυτών των μεθόδων:

Προσθέτει στοιχεία με push() (τέλος) και unshift() (αρχή)
Αφαιρεί στοιχεία με pop() (τέλος) και shift() (αρχή)
Εντοπίζει στοιχεία με indexOf() και ελέγχει την ύπαρξη με includes()
Επιστρέφει χρήσιμες τιμές όπως αφαιρεθέντα στοιχεία ή θέσεις δεικτών

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

Βρόχοι

Σκεφτείτε την περίφημη τιμωρία από τα μυθιστορήματα του Charles Dickens όπου οι μαθητές έπρεπε να γράψουν γραμμές επανειλημμένα σε μια πλάκα. Φανταστείτε αν μπορούσατε απλά να πείτε σε κάποιον "γράψε αυτήν την πρόταση 100 φορές" και να γίνει αυτόματα. Αυτό ακριβώς κάνουν οι βρόχοι για τον κώδικά σας.

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

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

Βρόχος For

Ο βρόχος for είναι σαν να ρυθμίζετε ένα χρονόμετρο - ξέρετε ακριβώς πόσες φορές θέλετε να συμβεί κάτι. Είναι πολύ οργανωμένος και προβλέψιμος, κάτι που τον καθιστά ιδανικό όταν δουλεύετε με πίνακες ή χρειάζεται να μετρήσετε πράγματα.

Δομή Βρόχου For:

Συστατικό	Σκοπός	Παράδειγμα
Αρχικοποίηση	Ορίζει το σημείο εκκίνησης	`let i = 0`
Συνθήκη	Πότε να συνεχίσει	`i < 10`
Αύξηση	Πώς να ενημερώσει	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Βήμα προς βήμα, τι συμβαίνει:

Αρχικοποιεί τη μεταβλητή μετρητή i στο 0 στην αρχή
Ελέγχει τη συνθήκη i < 10 πριν από κάθε επανάληψη
Εκτελεί το μπλοκ κώδικα όταν η συνθήκη είναι αληθής
Αυξάνει το i κατά 1 μετά από κάθε επανάληψη με i++
Σταματά όταν η συνθήκη γίνεται ψευδής (όταν το i φτάσει στο 10)

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

Βρόχος While

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

Χαρακτηριστικά Βρόχου While:

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

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Κατανόηση αυτών των παραδειγμάτων:

Διαχειρίζεται τη μεταβλητή μετρητή i χειροκίνητα μέσα στο σώμα του βρόχου
Αυξάνει τον μετρητή για να αποτρέψει άπειρους βρόχους
Δείχνει πρακτική χρήση με εισαγωγή χρήστη και περιορισμό προσπαθειών
Περιλαμβάνει μηχανισμούς ασφαλείας για να αποτρέψει ατελείωτη εκτέλεση

Σύγχρονες Εναλλακτικές Βρόχων

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

Βρόχος For...of (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Κύρια πλεονεκτήματα του for...of:

Εξαλείφει τη διαχείριση δεικτών και πιθανά λάθη εκτός ορίων
Παρέχει άμεση πρόσβαση στα στοιχεία του πίνακα
Βελτιώνει την αναγνωσιμότητα του κώδικα και μειώνει την πολυπλοκότητα της σημειογραφίας

Μέθοδος forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Τι πρέπει να γνωρίζετε για το forEach:

Εκτελεί μια συνάρτηση για κάθε στοιχείο του πίνακα
Παρέχει τόσο την τιμή του στοιχείου όσο και τον δείκτη ως παραμέτρους
Δεν μπορεί να σταματήσει νωρίς (σε αντίθεση με τους παραδοσιακούς βρόχους)
Επιστρέφει undefined (δεν δημιουργεί νέο πίνακα)

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

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

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

Παραδοσιακή Επεξεργασία Πινάκων:

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

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Ας κατανοήσουμε κάθε προσέγγιση:

Χρησιμοποιεί την ιδιότητα μήκους του πίνακα για να καθορίσει το όριο του βρόχου
Προσπελάζει στοιχεία μέσω δεικτών σε παραδοσιακούς βρόχους for
Παρέχει άμεση πρόσβαση στα στοιχεία σε βρόχους for...of
Επεξεργάζεται κάθε στοιχείο του πίνακα ακριβώς μία φορά

Πρακτικό Παράδειγμα Επεξεργασίας Δεδομένων:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Πώς λειτουργεί αυτός ο κώδικας:

Αρχικοποιεί μεταβλητές παρακολούθησης για το άθροισμα και τα άκρα
Επεξεργάζεται κάθε βαθμολογία με έναν μόνο αποτελεσματικό βρόχο
Συσσωρεύει το σύνολο για τον υπολογισμό του μέσου όρου
Παρακολουθεί τις υψηλότερες και χαμηλότερες τιμές κατά την επανάληψη
Υπολογίζει τα τελικά στατιστικά μετά την ολοκλήρωση του βρόχου

✅ Πειραματιστείτε με την επανάληψη ενός πίνακα της δικής σας δημιουργίας στην κονσόλα του προγράμματος περιήγησης.

Πρόκληση GitHub Copilot Agent 🚀

Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση:

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

Προτροπή: Δημιουργήστε μια συνάρτηση με όνομα analyzeGrades που λαμβάνει έναν πίνακα αντικειμένων βαθμολογίας μαθητών (κάθε αντικείμενο περιέχει ιδιότητες name και score) και επιστρέφει ένα αντικείμενο με στατιστικά, συμπεριλαμβανομένων της υψηλότερης βαθμολογίας, της χαμηλότερης βαθμολογίας, του μέσου όρου, του αριθμού των μαθητών που πέρασαν (score >= 70) και ενός πίνακα με τα ονόματα των μαθητών που σημείωσαν πάνω από τον μέσο όρο. Χρησιμοποιήστε τουλάχιστον δύο διαφορετικούς τύπους βρόχων στη λύση σας.

Μάθετε

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

24 KiB Raw Permalink Blame History Unescape Escape