JavaScripti objektid on andmestruktuurid, mis hoiavad seotud andmeid võtme- väärtuse paaridena. Võtmed on sõned, väärtused võivad olla mis tahes andmetüüpi.
Näited kasutusest:
- E-kaubandus: toodete andmed (nimi, hind, laoseis)
- Hotellid: broneeringud (klient, kuupäevad, tuba)
- Autod: omadused (mark, mudel, värv)
- Õpilased: info (nimi, vanus, hinded)
Levinud sisseehitatud objektid:
- Math – matemaatilised funktsioonid ja konstandid.
- Date – kuupäevad ja ajad.
- Array – massiivid ja nende meetodid String – sõned ja nendega töötamine.
- Object – kõikide objektide alus, objektide loomine ja haldamine.
Objekti loomine
Objekt koosneb võtme-väärtuse paaridest, kus võti on sõne ja väärtus võib olla mis tahes andmetüüp.
Näide:
let auto = {
mark: "Mercedes",
mudel: "S-klass",
aasta: 2024,
varv: "must",
lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};
Väljastamiseks trüki välja kogu objekt:
console.log(auto);
Iga objekti omadustele saab juurde pääseda, kasutades punktisüntaksit.
console.log(auto.mark); // Output: "Mercedes"
console.log(auto.mudel); // Output: "S-klass"
console.log(auto.aasta); // Output: 2024
console.log(auto.varv); // Output: "must"
console.log(auto.omadused); // Output: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
Objekti meetodid ja this kasutamine
JavaScripti objektid võivad sisaldada omadusi ja meetodeid.
Meetod on objekti funktsioon, mis saab kasutada objekti omadusi võtmesõna this abil.
Näiteks saab autole lisada meetodi, mis kuvab auto täisnime, viidates omadustele läbi this.
let auto = {
//omadused
mark: "Mercedes",
mudel: "S-klass",
aasta: 2025,
varv: "sinine",
omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],
//meetodid
taisnimi: function() {
return this.mark + " " + this.mudel;
}
};
console.log(auto.taisnimi());
Meetodi lühendamine
Uus Javascript ES6 lubab nüüd meetodi panna kirja ka lühemalt.
//meetodid
taisnimi() {
return this.mark + " " + this.mudel;
}
Kui omadused on massiivis, siis kasuta for või forEach tsüklit.
let auto = {
//omadused
mark: "Mercedes",
mudel: "S-klass",
aasta: 2025,
varv: "sinine",
omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],
//meetodid
taisnimi() {
return this.mark + " " + this.mudel;
},
kuvaOmadused() {
this.omadused.forEach(omadus => console.log(omadus));
}
};
auto.kuvaOmadused();
Objektide massiivid
Objektide massiiv JavaScriptis on indeksipõhine andmestruktuur, mis sisaldab mitut objekti.
Iga objekt koosneb võti-väärtuse paaridest ning võib sisaldada erinevat tüüpi andmeid (stringid, numbrid, tõeväärtused, funktsioonid jms).
Objektide massiivi loomine ja kuvamine
Objektide massiivi loomine on suhteliselt lihtne.
Alustame näiteks autode andmete salvestamisega. Iga auto on esindatud objektina, mis sisaldab teavet auto margi, mudeli ja tootmisaasta kohta.
let autod = [
{ mark: 'Mercedes', mudel: 'S-klass', aasta: 2025 },
{ mark: 'Honda', mudel: 'Civic', aasta: 2021 },
{ mark: 'Tesla', mudel: 'Model 3', aasta: 2019 }
];
console.log(autod);
Kui soovime näha konkreetse auto andmeid, saame viidata auto positsioonile massiivis (pidage meeles, et massiivide indekseerimine algab 0-st)
console.log(autod[0]);
Ja selles objektis saan elemendid kätte “punkti-süntaksiga”, nagu eespool
console.log(autod[0].mark);
Kõikide mudelite nägemiseks kasutame jällegi forEach tsüklit
autod.forEach((auto) => {
console.log(`
Mark: ${auto.mark},
Mudel: ${auto.mudel},
Aasta: ${auto.aasta}
`);
});
Objekti massiivi meetodid
JavaScripti massiivide meetodid, nagu push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter(), reduce(), sort() jne, töötavad nii tavaliste kui ka objektide massiividega.
Seda seetõttu, et massiivid on JavaScriptis objektid, ning nende meetodid toimivad ühtemoodi sõltumata sellest, kas massiiv sisaldab stringe, numbreid, objekte või teisi massiive.
Näiteks uute objektide lisamine objektide massiivi push ja unshift abil.
//Lisab uue objekti massiivi lõppu
autod.push({ mark: 'BMW', mudel: '666i', aasta: 2016 });
autod.unshift({ mark: 'Ford', mudel: 'Mustang', aasta: 2023 });
Meetod splice ühaegselt kustutab ja lisab.
massiiv.splice(
{start indeks},
{mitu eemaldada},
{mida lisada}
);
Näiteks:
//Eemaldab esimese objekti
autod.splice(0,1);
//Lisab objekti alates teisest indeksist, ei kustutata midagi
autod.splice(1,0,{ mark: 'Toyota', mudel: 'Prius', aasta: 2025 });
Massiivist otsimine
Objektide massiivist otsimiseks kasutame find meetodit, mis tahab käivitamiseks funktsiooni. Kasutame noolfunktsiooni, kuna see lühem.
//Otsimine
let otsing = autod.find(auto => auto.aasta > 2020);
console.log(otsing);
Antud meetod leiab esimese vaste ja tagastab selle. Kui vastust ei leita, siis tuleb undefined. Mitme tingimuse seadmiseks kasuta && märke.
//Otsimine
let otsing = autod.find(auto => auto.aasta > 2020 && auto.mark === "Toyota");
console.log(otsing);
Massiivi filtreerimine
Kui otsing annab vaid ühe tulemuse, kasuta mitme tulemuse saamiseks filter-meetodit. See loob uue massiivi, kuhu jäävad vaid tingimusele vastavad elemendid.
Näiteks kõik paarisarvud.
let arvud = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filtreeritud = arvud.filter(arv => arv % 2 === 0);
console.log(filtreeritud);
Autode puhul saame pöörduda näiteks auto.aasta poole ja filtreerida need, mis on vanemad kui 2020
//Filtreerimine
let filter = autod.filter(auto => auto.aasta < 2020);
console.log(filter);
Massiivi sorteerimine
Viimasena vaatleme sorteerimist meetodiga sort().
Tavaline sorteerimine objektide massiivi puhul ei tööta korrektselt, seetõttu tuleb kasutada võrdlusfunktsiooni.
autod.sort((a, b) => a.aasta - b.aasta);
console.log(autod);
Siin on (a, b) => a – b võrdlusfunktsioon, mis juhendab sort() meetodit järjestama numbreid nende tegelike arvväärtuste, mitte sõnerepresentatsioonide alusel.
Funktsioon a – b tagastab negatiivse väärtuse, kui a on väiksem kui b, positiivse, kui a on suurem, ja 0, kui need on võrdsed — just nii saabki sort() elemendid õigesse järjekorda panna.
Ülesanne
POLE VALMIS