Kuidas luua ja manipuleerida TypeScripti massiive
Staatiline tüüpimine võimaldab TypeScripti kompilaatoril jälgida massiivi elementide andmetüüpi. See funktsioon aitab TypeScripti massiividel vähendada vea tõenäosust koodis, võimaldades teil arendada turvalisemaid ja usaldusväärsemaid rakendusi.
Mis on TypeScripti massiivid?
TypeScriptis on massiivid järjestatud väärtuste loendid. Nagu JavaScriptis, saate ka TypeScriptis kasutada massiive elementide kogumi salvestamiseks. Elementideks võivad olla erinevad andmetüübid, sealhulgas numbrid, stringid, objektid või muud massiivid. TypeScripti eeliseks on staatilise tüüpimise toetamine, mis tähendab, et saate määrata massiivi elementide andmetüübi. See omakorda parandab vea tuvastamist arendamise käigus.
Massiivide oluline omadus on nende dünaamiline suurus, mis võimaldab lisada või eemaldada elemente ilma suurus eelnevalt kindlaks määramata. TypeScriptis on massiivid vaikimisi muutuvad. Siiski on võimalik luua muutumatuid massiive, kasutades massiivi meetodeid, nagu map ja filter. Muutumatuid massiive saab kasutada uute massiivide loomiseks olemasolevate massiivide põhjal. Massiivid pakuvad andmete organiseerimiseks ühtset struktuuri ja hõlbustavad elementide filtreerimist, sorteerimist ja iteratsiooni.
Lisaks võivad TypeScripti massiivid olla aluseks selliste andmestruktuuride rakendamisel nagu virnad (LIFO – Last-In-First-Out) ja järjekorrad (FIFO – First-In-First-Out). Need sobivad ka nimekirjade, tabelite ja kogumite esitamiseks mitmesugustes rakendustes. Kuna sama tüüpi elemente on lihtne hallata, on massiivid eriti kasulikud välistest allikatest, olgu need siis API-d või andmebaasid, pärit andmete töötlemisel.
Milline on TypeScripti massiivide süntaks?
TypeScriptis deklareeritakse massiivid märksõnadega let, const või var, millele järgneb muutuja nimi ja andmetüübi määratlus. Andmetüübi deklareerimisel määratakse, millist andmetüüpi massiivi elemendid peaksid olema. Selleks kasutatakse koolonit. Elemendid paigutatakse massiivi algataja plokis nurksulgudesse ja eraldatakse komadega.
TypeScripti massiivi deklareerimise üldine süntaks on järgmine:
const variableName: datatype[] = [element1, element2, ...];- variableName on massiivi jaoks valitud nimi.
- datatype määrab massiivi elementide andmetüübi.
- [element1, element2, …] on tegelikud elemendid või väärtused, mis massiivi salvestatakse. Nendel elementidel peab olema massiivi jaoks määratud andmetüüp.
Siin on mõned näited, mis aitavad süntaksit illustreerida:
// 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];Millised TypeScripti massiivi meetodid on olemas?
TypeScripti massiivi meetodid on äärmiselt kasulikud ja võimsad, kuna need võimaldavad andmeid tõhusalt töödelda, teisendada ja massiivideks organiseerida. Järgnev tabel annab ülevaate TypeScripti levinumatest massiivi meetoditest ja nende kasutusvõimalustest.
| Meetodid | Kirjeldus |
|---|---|
push()
|
Lisab massiivi lõppu ühe või mitu elementi ja tagastab massiivi uue pikkuse. |
pop()
|
Eemaldab massiivi viimase elemendi ja tagastab selle. |
unshift()
|
Lisab massiivi algusse ühe või mitu elementi ja tagastab massiivi uue pikkuse. |
shift()
|
Eemaldab massiivi esimese elemendi ja tagastab selle. |
concat()
|
Ühendab praeguse massiivi ühe või mitme teise massiiviga ja tagastab uue massiivi. Algne massiiv jääb muutumatuks. |
join(separator)
|
Muudab massiivi elemendid stringiks ja tagastab selle. Võite valida elementide eraldaja. |
slice(start, end)
|
Loob massiivi lame koopia, mis koosneb elementidest määratud indeksite „start” (kaasa arvatud) ja „end” (välja arvatud) vahel. Algne massiiv jääb muutumatuks. |
splice(start, deleteCount, element1, element2, ...)
|
Lisab massiivi määratud positsioonile uusi elemente ja/või eemaldab massiivist elemente. |
forEach(callback)
|
Käivitab antud funktsiooni massiivi iga elemendi jaoks. |
map(callback)
|
Loob uue massiivi, rakendades funktsiooni massiivi iga elemendi suhtes. |
filter(callback)
|
Loob uue massiivi, mis sisaldab kõiki elemente, mis läbivad määratud funktsiooni poolt rakendatud testi. |
TypeScripti massiivi näited
TypeScripti massiivid on rakendustes andmete organiseerimisel ja töötlemisel asendamatud vahendid. Allpool vaatame lähemalt mõningaid olulisemaid operatsioone.
Juurdepääs massiivi elementidele
TypeScriptis massiivi elementidele juurdepääs on põhioperatsioon, mis võimaldab teil massiivist konkreetseid elemente välja otsida. Massiivi elementidele pääsete juurde nende indeksite abil, mis näitavad nende asukohta massiivis. TypeScriptis on massiivi indeksid nullipõhised. See tähendab, et esimese elemendi indeks on 0 ja teise elemendi indeks on 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 = 99Massiivide destruktureerimine
Massiivi destruktureerimise abil saate kiiresti ja lihtsalt massiivist väärtusi välja võtta ja need muutujale omistada.
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 3TypeScripti massiivides elementide iteratsioon
Siin on näide, kuidas TypeScriptis for-tsükliga massiivi läbi käia:
let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}Selles näites on meil massiiv numbers, mis sisaldab numbreid. Kasutame for-tsüklit, et massiivi läbi käia. Tsükkel algab numbrist i = 0 ja iga tsükli läbimisel suurendame i. Numbriga numbers[i] saame juurdepääsu massiivi vastavale elemendile ja väljastame selle.
See on väljund:
1
2
3
4
5b063a9a0bb050c0cbf3a12ca06492bdb
367d32e6e3dca06fe225f3fb0920ab8d
7023faba66ebf53c94fb07a51ede46c2
787c9893abf7d98e9aa25d17a1eebedd