JS: Objektid ja meetodid

Objekt – ?

Meetod – ?

Millised funktsioonid on kasutusel – ?

//objekti loomine
let auto = {
    mark: "Toyota",
    mudel: "Bb",
    aasta: 2000,
    varv: "punane",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};

//Väljastamiseks trüki välja kogu objekt:
//F12 brauseris et näidata konsooli

    console.log(auto);

Console vaade:

Objekti meetodid ja `this` kasutamine

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

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

console.log(auto.taisnimi());

Meetodi lühendamine

let auto = {
    //omadused
    mark: "Nissan",
    mudel: "Skyline r33",
    aasta: 1989,
    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 massiivi loomine ja kuvamine

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)

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[1]);

Ja selles objektis saan elemendid kätte “punkti-süntaksiga”, nagu eespool

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


console.log(autod[1].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 }
];

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

autod.splice(
    {start indeks},
    {mitu eemaldada},
    {mida lisada}
);

//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.

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

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

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

//Otsimine
let otsing = autod.find(auto=>auto.aasta > 2018 &amp;&amp; auto.mark === "Tesla");
console.log(otsing);

Massiivi filtreerimine

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.

Raamatu objekt

Loo objekt raamat, millel on vähemalt kolm omadust: pealkiri, autor, aasta.
Lisa meetod, mis kuvab raamatu kirjelduse.
Lisa meetod, mis muudab väljaandmise aastat ja prindi tulemused konsooli.

let raamatud = [
    {
        pealkiri: 'Tõde ja õigus',
        autor: 'A. H. Tammsaare',
        aasta: 1926,
        kirjeldus: 'kena',
        raamatkirjeldusega: function() {
            return `${this.pealkiri} - ${this.autor} (${this.aasta}) — ${this.kirjeldus}`;
        },
        muudaAasta: function(uusAasta) {
            this.aasta = uusAasta;
        }
    },
    {
        pealkiri: 'Rehepapp ehk November',
        autor: 'Andrus Kivirähk',
        aasta: 2000,
        kirjeldus: 'huvitav',
        raamatkirjeldusega: function() {
            return `${this.pealkiri} - ${this.autor} (${this.aasta}) — ${this.kirjeldus}`;
        },
        muudaAasta: function(uusAasta) {
            this.aasta = uusAasta;
        }
    },
    {
        pealkiri: 'Mees, kes teadis ussisõnu',
        autor: 'Andrus Kivirähk',
        aasta: 2007,
        kirjeldus: 'hariv',
        raamatkirjeldusega: function() {
            return `${this.pealkiri} - ${this.autor} (${this.aasta}) — ${this.kirjeldus}`;
        },
        muudaAasta: function(uusAasta) {
            this.aasta = uusAasta;
        }
    }
];

// Muudame iga raamatu aastat (näiteks +1)
raamatud.forEach((r) => {
    r.muudaAasta(r.aasta + 1);
});

// Prindime tulemused konsooli
raamatud.forEach((r) => {
    console.log(r.raamatkirjeldusega());
});

Raamatukogu

Loo objekt raamatukogu, mille omaduseks on raamatud (massiiv raamatutest).
Lisa meetod, mis kuvab kõik raamatud kenasti konsoolis.
Lisa meetod, mis lisab uue raamatu.
Lisa meetod, mis kuvab raamatukogu raamatute koguarvu.
Lisa meetod, mis arvutab, mitu raamatut on ilmunud pärast 2000. aastat.
Koosta oma meetod ja kirjuta mida meetod tähendab

Link Lehele

Objekti meetodid ja this kasutamine