Portfoolio

JS: Objektide süntaks ja struktuur

Mis on objekt?

Objekt on JavaScriptis viis hoida seotud andmeid ühes kohas. Objekt koosneb võtme-väärtuse paaridest. Võti on nimi (näiteks mark) ja väärtus võib olla arv, tekst, massiiv või isegi funktsioon. Näiteks auto, õpilane või toode poes on kõik objektid, sest neil on palju omadusi.

JavaScriptis on ka valmis objekte: Math (arvutused), Date (kuupäev ja kellaaeg), Array (massiivid), String (tekst) ja Object.

Kus objekte kasutatakse?

Objekte võib kohata igapäevaelus väga tihti. Mõned näited:

  • e-pood: toode on objekt, millel on nimi, hind, laoseis, kirjeldus ja kategooria
  • hotelli broneering: broneering on objekt, kus on kliendi nimi, kuupäevad, toa tüüp ja hind
  • auto: objektil on mark, mudel, värv, mootori maht ja registrinumber
  • õpilane: objektil on nimi, vanus, klass, hinded ja osalemised

Sisseehitatud objektid

Objekte saab ise teha, aga JavaScriptis on ka valmis objekte:

  • Math on matemaatika jaoks: ümardamine, ruutjuur, trigonomeetria
  • Date on kuupäeva ja kellaaja jaoks: saab kätte päeva, kuu ja aasta ning arvutada kuupäevade vahet
  • Array on massiivide jaoks: elementi saab lisada, eemaldada, sorteerida ja filtreerida
  • String on teksti jaoks: näiteks length annab pikkuse, toUpperCase teeb suured tähed ja substring võtab tekstist osa
  • Object on kõikide objektide alus: sellega saab objekte luua, omadusi lisada ja objekte kopeerida

Objekti loomine

let auto = {
  mark: "Toyota",
  mudel: "Corolla",
  aasta: 2022,
  varv: "punane",
  lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};

console.log(auto);

Siin tegin objekti auto, millel on viis omadust. Käsk console.log(auto) näitab kogu objekti konsoolis.

Omadustele ligipääs

console.log(auto.mark);
console.log(auto.mudel);
console.log(auto.aasta);

Ühe omaduse saab kätte punktiga: objekti nimi, punkt ja omaduse nimi. Konsooli tuleb Toyota, Corolla ja 2022.

Meetodid ja this

Meetod on funktsioon, mis asub objekti sees. Võtmesõna this tähendab seda objekti, mille sees meetod töötab. Nii saab meetod kasutada sama objekti omadusi.

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

  taisnimi() {
    return this.mark + " " + this.mudel;
  }
};

console.log(auto.taisnimi());

Meetod taisnimi() võtab margi ja mudeli ning paneb need kokku. Tulemus on Toyota Corolla L.

Kui omadused on massiivis, saab need välja trükkida forEach tsükliga:

kuvaOmadused() {
  this.omadused.forEach(omadus => console.log(omadus));
}

auto.kuvaOmadused();

forEach käib massiivi kõik elemendid ükshaaval läbi ja trükib iga omaduse eraldi reale.

Objektide massiiv

Massiivi sisse saab panna mitu objekti. Esimese elemendi indeks on 0.

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

console.log(autod);
console.log(autod[0]);
console.log(autod[0].mark);

autod[0] on esimene auto ja autod[0].mark on esimese auto mark ehk Toyota.

Massiivi meetodid

push lisab objekti massiivi lõppu ja unshift algusse:

autod.push({ mark: 'BMW', mudel: '320i', aasta: 2015 });
autod.unshift({ mark: 'Ford', mudel: 'Focus', aasta: 2020 });

splice kustutab ja lisab. Esimene number on algusindeks, teine on see, mitu elementi eemaldada, ja kolmas on see, mida lisada:

autod.splice(0,1);
autod.splice(1,0,{ mark: 'Audi', mudel: 'A4', aasta: 2018 });

Esimene rida eemaldab esimese auto. Teine lisab Audi teisele kohale ega kustuta midagi.

find leiab esimese objekti, mis sobib tingimusega. Kui midagi ei sobi, tuleb undefined:

let otsing = autod.find(auto=>auto.aasta > 2018);
console.log(otsing);

filter leiab kõik sobivad objektid ja teeb neist uue massiivi:

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

sort järjestab massiivi. Objektide puhul on vaja võrdlusfunktsiooni:

autod.sort((a, b) => a.aasta - b.aasta);
console.log(autod);

Funktsioon a.aasta – b.aasta järjestab autod aasta järgi vanemast uuemani.

Minu ülesanne

Tegin objekti raamat ja objekti raamatukogu. Raamatukogu sees on raamatute massiiv ning meetodid raamatute kuvamiseks, lisamiseks, loendamiseks ja filtreerimiseks. Lisaks tegin oma meetodi jarjestaAasta(), mis sorteerib raamatud aasta järgi.

Objektid ja meetodid

Objektid ja meetodid