Teooria
Javascripti objektid on võimsad andmestruktuurid, mis võimaldavad seotud andmeid ühtseks tervikuks organiseerida.
Neid kasutatakse igapäevaelus ja me võime neid kohata erineval viisil.
- E-kaubandus – Veebipoodides kasutatakse objekte toodete esindamiseks, millel on omadused nagu nimi, hind, laoseis, kirjeldus, kategooria jne.
- Hotelli broneeringud – Hotellid kasutavad objekte broneeringute esindamiseks, kus iga broneeringu objekt võib sisaldada andmeid nagu kliendi nimi, kuupäevad, toa tüüp, hinnaarvutused jne.
- Autod – Iga auto võib olla objekt, millel on erinevad atribuudid nagu mark, mudel, värv, mootori maht, registrinumber jne.
- Õpilased – Iga õpilane võiks olla objekt, millel on omadused nagu nimi, vanus, klass, hinded, osalemised, tegevused jne.
Objekti loomine
let auto = {
mark: "Dodge",
mudel: "Challenger",
aasta: 2013,
varv: "Sinine",
omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};
console.log(auto);
Iga objekti omadustele saab juurde pääseda, kasutades punktisüntaksit.Iga objekti omadustele saab juurde pääseda, kasutades punktisüntaksit.Iga objekti omadustele saab juurde pääseda, kasutades punktisüntaksit.
console.log(auto.mark); // Output: "Dodge"
console.log(auto.mudel); // Output: "Challenger"
console.log(auto.aasta); // Output: 2013
console.log(auto.varv); // Output: "Sinine"
console.log(auto.omadused); // Output: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
Objekti meetodid ja this kasutamine
Objektid Javascriptis võivad sisaldada mitte ainult omadusi, vaid ka meetodeid. Meetodid on objekti funktsioonid, mis võivad manipuleerida objekti omadustega või teostada muid toiminguid objekti kontekstis. this võtmesõna kasutatakse meetodite sees, et viidata objektile, mille sees meetod on kutsutud.
let auto = {
mark: "Dodge",
mudel: "Challenger",
aasta: 2013,
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 = {
mark: "Dodge",
mudel: "Challenger",
aasta: 2013,
varv: "Sinine",
omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],
//meetodid
taisnimi() {
return this.mark + " " + this.mudel;
},
kuvaOmadused() {
this.omadused.forEach(omadus => console.log(omadus));
}
};
Objektide massiivid
Objektide massiiv on JavaScriptis andmete struktuur, mis koosneb mitmest objektist, mis on järjestatud indeksi alusel.
- Iga objekt on võti-väärtuse paaride kogum, kus võti on unikaalne ja väärtus on võti-väärtuse paari andmed.
- Objektide massiiv võib sisaldada mitmesuguseid andmetüüpe, sealhulgas teksti (string), numbreid, tõeväärtusi (boolean), funktsioone, muid objekte jne.
Objektide massiivi loomine ja kuvamine
Iga auto on esindatud objektina, mis sisaldab teavet auto margi, mudeli ja tootmisaasta kohta.
let autod = [
{ mark: 'Dodge', mudel: 'Challenger', aasta: 2013},
{ mark: 'Fiat', mudel: '500e', aasta: 2015},
{ mark: 'KIA', mudel: 'EV9', aasta: 2024}
];
console.log(autod);
Kui vajate andmeid konkreetse auto kohta, tuleb kirjutada selle asukoht massiivis
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
let autod = [
{ mark: 'Dodge', mudel: 'Challenger', aasta: 2013},
{ mark: 'Fiat', mudel: '500e', aasta: 2015},
{ mark: 'KIA', mudel: 'EV9', aasta: 2024}
];
autod.forEach((auto) => {
console.log(`
Mark: ${auto.mark},
Mudel: ${auto.mudel},
Aasta: ${auto.aasta}`);
});
Objekti massiivi meetodid
JavaScripti massiivide meetodid on kasutatavad nii tavaliste massiivide kui ka objektide massiivide puhul. Sellised meetodid nagu push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter(), reduce(), sort(), jne
let autod = [
{ mark: 'Dodge', mudel: 'Challenger', aasta: 2013},
{ mark: 'Fiat', mudel: '500e', aasta: 2015},
{ mark: 'KIA', mudel: 'EV9', aasta: 2024}
];
//Lisab uue objekti massiivi lõppu
autod.push({ mark: 'Lexus', mudel: 'LC', aasta: 2016 });
autod.unshift({ mark: 'Mercedes-Benz', mudel: 'E Class', aasta: 1996 });
Meetod splice ühaegselt kustutab ja lisab.
massiiv.splice(
{start indeks},
{mitu eemaldada},
{mida lisada}
);Massiivist otsimine
Objektide massiivis otsinguks tuleb kasutada meetodit find, mis nõuab käivitamiseks funktsiooni. Kasutame funktsiooni nool, see on lühem.
//Otsimine
let otsing = autod.find(auto=>auto.aasta > 2019);
console.log(otsing);
See meetod otsib esimest kokkulangevust ja tagastab selle. Kui vastust ei leita, kuvatakse undefined. Mitme tingimuse seadmiseks kasutatakse “&&”
//Otsimine
let otsing = autod.find(auto=>auto.aasta > 2019 && auto.mark === "Fiat");
console.log(otsing);
Ei leitud, kuna ainus auto 2024 ei vasta parameetrile mark – Fiat
Massiivi filtreerimine
Selle asemel, et saada find abil ainult 1 tulemus, saab kasutada meetodit filter, et saada mitu vastust. Filter loob massiivi massiivist ja väljastab tingimustele vastavad elemendid.
Näide:
- Oletame, et meil on numbrid ja me peame neist saama paarisnumbrid.
let arvud = [1, 11, 3, 4, 16, 6, 7, 19, 9, 20];
const filtreeritud = arvud.filter(arv => arv % 2 === 0);
console.log(filtreeritud);
Kui kasutada näiteks autode puhul, võime pöörduda auto.aasta poole ja filtreerida need, mis on toodetud pärast 2019. aastat.
//Filtreerimine
let filter = autod.filter(auto=>auto.aasta > 2019);
console.log(filter);
Massiivi sorteerimine
Meetod sort, lihtne objektide massiivi sorteerimine ei tööta korrektselt. Seetõttu on parem kasutada võrdlemiseks funktsiooni.
autod.sort((a, b) => a.aasta - b.aasta);
console.log(autod);
Siin on (a, b) => a – b võrdlusfunktsioon, mis ütleb sort()-ile, et järjestada numbrid nende tegelike numbri väärtuste, mitte stringiväärtuste järgi. Funktsioon a – b tagastab negatiivse väärtuse, kui a on väiksem kui b, positiivse väärtuse, kui a on suurem kui b, ja 0, kui a ja b on võrdsed – just see, mida sort() vajab oma elementide õigesti järjestamiseks.
Ülesanne
Raamatu objekt
let raamat = {
pealkiri: "The Song of Achilles",
autor: "Madeline Miller",
aasta: 2021
};- Lisa meetod, mis kuvab raamatu kirjelduse.
vastus.innerHTML +="<h2>Ühe raamat</h2>";
vastus.innerHTML +="<p><strong>"+raamat.pealkiri + "</strong> – " + raamat.autor + " (" + raamat.aasta + ")</p>";
- Lisa meetod, mis muudab väljaandmise aastat ja prindi tulemused konsooli.
function muudaAasta() {
raamat.aasta = 2023;
console.log("Uus aasta", raamat.aasta);
return raamat.aasta;
}
muudaAasta();Raamatukogu
- Loo objekt raamatukogu, mille omaduseks on raamatud (massiiv raamatutest).
let raamatukogu =[
{
pealkiri: "Tõde ja õigus",
autor: "A. H. Tammsaare",
aasta: 1926
},
{
pealkiri: "Rehepapp",
autor: "Andrus Kivirähk",
aasta: 2000
},
{
pealkiri: "Minu Eesti",
autor: "Epp Petrone",
aasta: 2009
}
];
console.log(raamatukogu);- Lisa meetod, mis kuvab kõik raamatud kenasti konsoolis.
raamatukogu.forEach(function(r) {
vastus.innerHTML +="<p><strong>" + r.pealkiri + "</strong> – " + r.autor + " (" + r.aasta + ")</p>";
});- Lisa meetod, mis lisab uue raamatu.
function lisaRaamat() {
raamatukogu.push({ pealkiri: "Minu raamat", autor: "Timur Basirov", aasta: 2024 });
console.log("Lisatud minu raamat");
}
lisaRaamat();- Lisa meetod, mis kuvab raamatukogu raamatute koguarvu.
vastus.innerHTML +="<h2>Raamatukogus on "+raamatukogu.length+" raamatut</h2>";- Lisa meetod, mis arvutab, mitu raamatut on ilmunud pärast 2000. aastat.
function raamatudParast2000() {
let uus = raamatukogu.filter(function(r) {
return r.aasta > 2000;
});
return uus;
}
let filtritud = raamatudParast2000();
vastus.innerHTML += "<h2>Raamatud pärast 2000. aastat (" + filtritud.length + " tk)</h2>";- Koosta oma meetod ja kirjuta mida meetod tähendab
function otsiAutoriJargi(autorNimi){
let leitud = raamatukogu.filter(function(r) {
return r.autor === autorNimi;
});
console.log("Leitud autor:",autorNimi,leitud.length, "raamatut");
vastus.innerHTML +="<h2>Otsing autorilt:"+ autorNimi +" ("+ leitud.length + " raamatut)</h2>";
leitud.forEach(function(r) {
vastus.innerHTML +="<p><strong>" + r.pealkiri + "</strong> – " + r.autor + " (" + r.aasta + ")</p>";
});
}
otsiAutoriJargi("Timur Basirov");