Πώς να δημιουργήσετε και να χειριστείτε πίνακες TypeScript
Η στατική τυποποίηση επιτρέπει στον μεταγλωττιστή TypeScript να παρακολουθεί τον τύπο δεδομένων των στοιχείων του πίνακα. Αυτή η λειτουργία βοηθά τους πίνακες TypeScript να μειώσουν την πιθανότητα σφαλμάτων στον κώδικά σας, επιτρέποντάς σας να αναπτύξετε ασφαλέστερες και πιο αξιόπιστες εφαρμογές.
Τι είναι οι πίνακες TypeScript;
Στο TypeScript, οι πίνακες είναι ταξινομημένες λίστες τιμών. Ακριβώς όπως στο JavaScript, μπορείτε να χρησιμοποιήσετε πίνακες στο TypeScript για να αποθηκεύσετε μια συλλογή στοιχείων. Τα στοιχεία μπορούν να ανήκουν σε διαφορετικούς τύπους δεδομένων, όπως αριθμούς, συμβολοσειρές, αντικείμενα ή άλλους πίνακες. Το TypeScript έχει το πλεονέκτημα ότι υποστηρίζει στατική τυποποίηση, πράγμα που σημαίνει ότι μπορείτε να καθορίσετε τον τύπο δεδομένων των στοιχείων σε έναν πίνακα. Αυτό, με τη σειρά του, βελτιώνει την ανίχνευση σφαλμάτων κατά την ανάπτυξη.
Ένα βασικό χαρακτηριστικό των πινάκων είναι το δυναμικό τους μέγεθος, το οποίο σας επιτρέπει να προσθέτετε ή να αφαιρείτε στοιχεία χωρίς να χρειάζεται να καθορίσετε εκ των προτέρων το μέγεθος. Στο TypeScript, οι πίνακες είναι μεταβλητοί από προεπιλογή. Ωστόσο, μπορείτε να δημιουργήσετε αμετάβλητους πίνακες χρησιμοποιώντας μεθόδους πινάκων όπως οι map και filter. Οι αμετάβλητοι πίνακες μπορούν να χρησιμοποιηθούν για τη δημιουργία νέων πινάκων με βάση υπάρχοντες πίνακες. Οι πίνακες παρέχουν μια συνεπή δομή για την οργάνωση των δεδομένων και διευκολύνουν το φιλτράρισμα, την ταξινόμηση και την επανάληψη των στοιχείων.
Επιπλέον, οι πίνακες TypeScript μπορούν να αποτελέσουν τη βάση για την υλοποίηση δομών δεδομένων όπως στοίβες (LIFO - Last-In-First-Out) και ουρές (FIFO - First-In-First-Out). Είναι επίσης κατάλληλοι για την αναπαράσταση λιστών, πινάκων και συλλογών σε μια ποικιλία εφαρμογών. Επειδή τα στοιχεία που ανήκουν στον ίδιο τύπο μπορούν να διαχειριστούν εύκολα, οι πίνακες είναι ιδιαίτερα χρήσιμοι κατά την επεξεργασία δεδομένων από εξωτερικές πηγές, είτε πρόκειται για API είτε για βάσεις δεδομένων.
Ποια είναι η σύνταξη για τους πίνακες TypeScript;
Στο TypeScript, οι πίνακες δηλώνονται με τις λέξεις-κλειδιά let, const ή var, ακολουθούμενες από ένα όνομα μεταβλητής και μια προδιαγραφή τύπου δεδομένων. Όταν δηλώνετε έναν τύπο δεδομένων, καθορίζετε τον τύπο δεδομένων που πρέπει να έχουν τα στοιχεία του πίνακα. Αυτό γίνεται με τη χρήση κόμμα. Τα στοιχεία τοποθετούνται σε αγκύλες και διαχωρίζονται με κόμματα σε ένα μπλοκ αρχικοποίησης πίνακα.
Η γενική σύνταξη για τη δήλωση ενός πίνακα TypeScript έχει ως εξής:
const variableName: datatype[] = [element1, element2, ...];typescript- variableName είναι το όνομα που επιλέγετε για τον πίνακα.
- Ο τύπος δεδομένων καθορίζει τον τύπο δεδομένων των στοιχείων του πίνακα.
- [element1, element2, …] είναι τα πραγματικά στοιχεία ή τιμές που θα αποθηκευτούν στον πίνακα. Αυτά τα στοιχεία πρέπει να έχουν τον τύπο δεδομένων που έχει καθοριστεί για τον πίνακα.
Ακολουθούν μερικά παραδείγματα που βοηθούν στην επεξήγηση της σύνταξης:
// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];typescriptΠοιες μέθοδοι πίνακα υπάρχουν στο TypeScript;
Οι μέθοδοι πινάκων του TypeScript είναι εξαιρετικά χρήσιμες και ισχυρές, καθώς σας επιτρέπουν να επεξεργάζεστε, να μετασχηματίζετε και να οργανώνετε αποτελεσματικά τα δεδομένα σε πίνακες. Ο παρακάτω πίνακας σας παρέχει μια επισκόπηση των κοινών μεθόδων πινάκων στο TypeScript και του τρόπου με τον οποίο μπορούν να χρησιμοποιηθούν.
| Μέθοδοι | Περιγραφή |
|---|---|
push()
|
Προσθέτει ένα ή περισσότερα στοιχεία στο τέλος του πίνακα και επιστρέφει το νέο μήκος του πίνακα. |
pop()
|
Αφαιρεί το τελευταίο στοιχείο από τον πίνακα και το επιστρέφει. |
unshift()
|
Προσθέτει ένα ή περισσότερα στοιχεία στην αρχή του πίνακα και επιστρέφει το νέο μήκος του πίνακα. |
shift()
|
Αφαιρεί το πρώτο στοιχείο από τον πίνακα και το επιστρέφει. |
concat()
|
Συνδυάζει τον τρέχοντα πίνακα με έναν ή περισσότερους άλλους πίνακες και επιστρέφει έναν νέο πίνακα. Ο αρχικός πίνακας παραμένει αμετάβλητος. |
join(separator)
|
Μετατρέπει τα στοιχεία του πίνακα σε συμβολοσειρά και την επιστρέφει. Μπορείτε να επιλέξετε ένα διαχωριστικό για τα στοιχεία. |
slice(start, end)
|
Δημιουργεί ένα επίπεδο αντίγραφο του πίνακα που αποτελείται από τα στοιχεία μεταξύ των καθορισμένων δεικτών «start» (συμπεριλαμβανομένου) και «end» (εξαιρουμένου). Ο αρχικός πίνακας παραμένει αμετάβλητος. |
splice(start, deleteCount, element1, element2, ...)
|
Εισάγει νέα στοιχεία στη συγκεκριμένη θέση και/ή αφαιρεί στοιχεία από τον πίνακα. |
forEach(callback)
|
Εκτελεί μια παρεχόμενη συνάρτηση για κάθε στοιχείο του πίνακα. |
map(callback)
|
Δημιουργεί έναν νέο πίνακα εφαρμόζοντας μια συνάρτηση σε κάθε στοιχείο του πίνακα. |
filter(callback)
|
Δημιουργεί έναν νέο πίνακα με όλα τα στοιχεία που περνούν τον έλεγχο που υλοποιείται από την καθορισμένη συνάρτηση. |
Παραδείγματα πινάκων TypeScript
Οι πίνακες TypeScript είναι απαραίτητα εργαλεία για την οργάνωση και την επεξεργασία δεδομένων σε εφαρμογές. Παρακάτω θα εξετάσουμε μερικές από τις βασικές λειτουργίες τους.
Πρόσβαση σε στοιχεία πίνακα
Η πρόσβαση σε στοιχεία πίνακα στο TypeScript είναι μια βασική λειτουργία που σας επιτρέπει να ανακτήσετε συγκεκριμένα στοιχεία μέσα σε έναν πίνακα. Μπορείτε να αποκτήσετε πρόσβαση σε στοιχεία πίνακα χρησιμοποιώντας τον δείκτη τους, ο οποίος αντιπροσωπεύει τη θέση τους στον πίνακα. Στο TypeScript, οι δείκτες πίνακα έχουν βάση το μηδέν. Αυτό σημαίνει ότι το πρώτο στοιχείο έχει δείκτη 0 και το δεύτερο στοιχείο έχει δείκτη 1.
let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99typescriptΑποδόμηση πινάκων
Με την αποδόμηση πινάκων, μπορείτε να εξαγάγετε γρήγορα και εύκολα τιμές από έναν πίνακα και να τις εκχωρήσετε σε μια μεταβλητή.
let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3typescriptΕπανάληψη στοιχείων σε πίνακες TypeScript
Ακολουθεί ένα παράδειγμα για τον τρόπο επανάληψης ενός πίνακα στο TypeScript χρησιμοποιώντας έναν βρόχο for:
let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}typescriptΣε αυτό το παράδειγμα, έχουμε τον πίνακα numbers, ο οποίος περιέχει αριθμούς. Χρησιμοποιούμε έναν βρόχο for για να επαναλάβουμε τον πίνακα. Ο βρόχος ξεκινά από i = 0 και αυξάνουμε i σε κάθε πέρασμα του βρόχου. Με numbers[i] μπορούμε να έχουμε πρόσβαση στο αντίστοιχο στοιχείο του πίνακα και να το εμφανίσουμε.
Αυτό είναι το αποτέλεσμα:
1
2
3
4
5typescriptb063a9a0bb050c0cbf3a12ca06492bdb
367d32e6e3dca06fe225f3fb0920ab8d
7023faba66ebf53c94fb07a51ede46c2
5557952e608aad19ab6e2966f72ede4b
c0e49ef42450e0f3d10d0a2f3fbaa6c5