Kuidas JavaScript sellega töötab?

Javascripti objektid on võimsad andmestruktuurid, mis võimaldavad teil organiseerida seotud andmeid ühte üksusesse. Objektid koosnevad võtmes-väärtuses paaridest, kus võti on sõne (string) ja väärtus võib olla mis tahes Javascripti andmetüüp (arv, sõne, massiiv, funktsioon jne). Objektid pakuvad suurepärast viisi andmete struktureerimiseks ja manipuleerimiseks. Igapäevaelus võime objekte kohata mitmel viisil. Siin on mõned näited, kus objekte võib leida:

1. E-kaubandus – Veebipoodides kasutatakse objekte toodete esindamiseks, millel on omadused nagu nimi, hind, laoseis, kirjeldus, kategooria jne.
2. 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.
3. Autod – Iga auto võib olla objekt, millel on erinevad atribuudid nagu mark, mudel, värv, mootori maht, registrinumber jne.
4. Õpilased – Iga õpilane võiks olla objekt, millel on omadused nagu nimi, vanus, klass, hinded, osalemised, tegevused jne.

Javascripti programmides on võimalik vajaduse korral luua ise kohandatud objekte, samuti kasutada sisseehitatud objekte, mis on Javascripti enda poolt pakutavad objektid. Mõned sisseehitatud on näiteks:

1. Math objekt sisaldab matemaatilisi funktsioone ja konstante. Seda kasutatakse sageli matemaatiliste arvutuste tegemiseks, nagu ümardamine, ruutjuur, trigonomeetria funktsioonid jne.
2. Date objekt võimaldab töötada kuupäevade ja kellaaegadega. Selle abil saab luua uusi kuupäevaobjekte, saada juurde kuupäeva komponente (nagu päev, kuu, aasta) ja teha erinevaid toiminguid kuupäevade vahel.
3. Array objekt on sisseehitatud objekt, mida kasutatakse massiivide loomiseks ja manipuleerimiseks. See sisaldab mitmeid meetodeid, mis võimaldavad massiividega töötada, nagu elemendi lisamine, eemaldamine, sorteerimine, filtreerimine jne.
4. String objekt sisaldab meetodeid, mis võimaldavad töötada sõnedega. Näiteks, saate kasutada meetodeid nagu length (pikkuse saamine), toUpperCase (suurte tähtede kasutamine), substring (alamstringi võtmine) jne.
5. Object objekt on JavaScripti alusobjekt, mida kasutatakse kõikide objektide baasina. Selle meetodeid saab kasutada objektide loomiseks, omaduste lisamiseks ja juurdepääsuks, objektide kopeerimiseks jne.

Objekti loomine

Objekti süntaks koosneb võtme-väärtuse paari paaridest, kus võti on sõne ja väärtus võib olla mis tahes Javascripti andmetüüp. Selles näites on loodud objekt nimega “auto”, millel on järgmised omadused (properties):

Objekti süntaks koosneb võtme-väärtuse paari paaridest, kus võti on sõne ja väärtus võib olla mis tahes Javascripti andmetüüp. Selles näites on loodud objekt nimega “auto”, millel on järgmised omadused (properties):

let auto = {
mark: "Toyota",
mudel: "Corolla",
aasta: 2022,
varv: "punane",
lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};
// calling
console.log(auto);

Väljastamiseks trüki välja kogu objekt:

console.log(auto.mark); // Output: "Toyota"
console.log(auto.mudel); // Output: "Corolla"
console.log(auto.aasta); // Output: 2022
console.log(auto.varv); // Output: "punane"
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. Tekitame eelmisele auto objektile meetodi, mis kuvab auto täispika nime. Selleks, et meetod saaks kasutada sama objekti omadusi, siis tuleb kasutada this võtmesõna.

let autoOM = {
    //omadused
    mark: "Toyota",
    mudel: "Corolla L",
    aasta: 2022,
    varv: "punane",
    omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],

    //meetodid
    taisnimi: function() {
        return this.mark + " " + this.mudel;
    }
};

console.log(autoOM.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: "Toyota",
  mudel: "Corolla L",
  aasta: 2022,
  varv: "punane",
  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 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

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: 'Toyota', mudel: 'Corolla', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { 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

let autod = [
  { mark: 'Toyota', mudel: 'Corolla', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Model 3', aasta: 2019 }
];


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. on kõik kasutatavad sõltumata sellest, kas massiiv sisaldab lihtsaid andmetüüpe (näiteks stringid või numbrid) või keerukamaid andmeid (näiteks objekte või isegi teisi massiive).

Seda seetõttu, et JavaScriptis on massiivid objektid ning nii lihtsate andmetüüpide kui ka objektide hoiustamine massiivides toimub ühtemoodi. Andmete tüüp, mida massiiv sisaldab, ei mõjuta massiivide meetodeid. Näiteks uute objektide lisamine objektide massiivi push ja unshift abil.

let autod = [
    { mark: 'Toyota', mudel: 'Corolla', aasta: 2007 },
    { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
    { mark: 'Tesla', mudel: 'Model 3', aasta: 2019 },
    { mark: 'BMW', mudel: '320i', aasta: 2015 },
    { mark: 'Ford', mudel: 'Focus', aasta: 2020 }
];

//Lisab uue objekti massiivi lõppu
autod.push({ mark: 'BMW', mudel: '320i', aasta: 2015 });
autod.unshift({ mark: 'Ford', mudel: 'Focus', aasta: 2020 });

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: 'Audi', mudel: 'A4', aasta: 2018 });

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 > 2018);
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 > 2018 && auto.mark === "Tesla");
console.log(otsing);

Kuna find leiab vaid ühe tulemuse, siis mitme vastuse saamiseks kasuta filter meetodit. Filter loob massiivist uue massiivi ja väljastab tingimustele vastavad elemendid.

Näiteks meil on arvud ja soovime sealt saada paarisarve

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 uuemad kui 2018

//Filtreerimine
let filter = autod.filter(auto=>auto.aasta > 2018);
console.log(filter);

Massiivi sorteerimine

Viimase meetodina vaatame sorteerimist sort. Lihtsalt sorteerimine objektide massivii puhul õigesti ei tööta. Seepärast peame kasutama võrdlusfunktsiooni.

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

1. Loo objekt raamat, millel on vähemalt kolm omadust: pealkiri, autor, aasta.

let raamat = { 
  pealkiri: 'kuritegu ja karistus', 
  autor: 'Fyodor Dostoevsky', 
  aasta: 1866
};

2. Lisa meetod, mis kuvab esimese raamatu kirjelduse.

console.log(raamat.pealkiri);

Vastus:

3. Lisa meetod, mis muudab väljaandmise aastat ja prindi tulemused konsooli.

kuritegu ja karistus muudetud aasta 2020

let raamat = { 
  pealkiri: 'Kuritegu ja karistus', 
  autor: 'Fyodor Dostoevsky', 
  aasta: 1866
};

raamat.muudaAasta = function() {
  this.aasta = 2020;
  console.log(this.aasta);
};

raamat.muudaAasta();

Raamatukogu

1. Loo objekt raamatukogu, mille omaduseks on raamatud (massiiv raamatutest).

let raamatukogu = [
  { pealkiri: 'läänerindel on kõik vaikne', autor: 'Erih Remark', aasta: 1928},
  { pealkiri: 'Sipsik', autor: 'Eno Raud', aasta: 1962},
  { pealkiri: 'Jevgeni Onegin', autor: 'Aleksandr Pushkin', aasta: 1833}
];

2. Lisa meetod, mis kuvab kõik raamatud kenasti konsoolis.

raamatukogu.forEach((raamatud) => {
  console.log(`
    Pealkiri: ${raamatud.pealkiri},
    Autor: ${raamatud.autor},
    Aasta: ${raamatud.aasta}
    `);
});

3. Lisa meetod, mis lisab uue raamatu.

raamatukogu.push({ pealkiri: 'midagi', autor: 'keegi', aasta: 2025 });

4. Lisa meetod, mis kuvab raamatukogu raamatute koguarvu.

console.log(raamatukogu.length)

5. Lisa meetod, mis arvutab, mitu raamatut on ilmunud pärast 2000. aastat.

let filter = raamatukogu.filter(raamatukogu=>raamatukogu.aasta > 2000);
console.log(filter.length);

6. Koosta oma meetod ja kirjuta mida meetod tähendab

raamatukogu.forEach((raamatud) => {
  console.log(`
    Pealkiri: ${raamatud.pealkiri + " - " + raamatud.autor},
    Aasta: ${raamatud.aasta}
    `);
});

Raamatute andmed

Ja see on töö leht link:

https://khusseintakhmazov24.thkit.ee/HTMLtood/ramatukogu/ramatukogu.html