JavaScript objektid ja metodid

Mis on objekt JavaScripti’s?
Objekt JavaScriptis on andmestruktuur, mis salvestab andmeid võtme–väärtuse paaridena, kus iga võti on seotud mingi väärtusega. Seda kasutatakse seotud andmete organiseerimiseks ja töötlemiseks ühes üksuses.

JavaScriptis saab luua oma objekte ning kasutada ka keelde sisseehitatud objekte.

  • Math – sisaldab matemaatilisi funktsioone ja konstandeid arvutuste tegemiseks.
  • Date – kasutatakse kuupäevade ja kellaaegadega töötamiseks.
  • Array – kasutatakse massiivide loomiseks ja töötlemiseks (elementide lisamine, eemaldamine, sorteerimine ja filtreerimine).
  • String – mõeldud sõnedega töötamiseks ja nende muutmiseks. Näiteks: length (pikkus), toUpperCase() (teisendab suurtähtedeks), substring() (alamstringi võtmine) jne.
  • Object – JavaScripti põhiobjekt, millest pärinevad kõik teised objektid; seda kasutatakse objektide omaduste haldamiseks.

Objekti loomine 

let auto = {
    mark: "BMW",
    mudel: "M5",
    aasta: 2025,
    varv: "sinine",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem" , "soojendusega istmed"]
};
console.log(auto);

Objekti meetodid ja this kasutamine

Meetodid on objekti funktsioonid, mis võivad muuta selle omadusi või teha muid toiminguid objekti kontekstis.
Võtmesõna this kasutatakse meetodite sees, et viidata samale objektile, mille sees meetod on välja kutsutud.

let auto1 = {
    //omadused
    mark: "BMW",
    mudel: "M4",
    aasta: 2023,
    varv: "must",
    omadused: ["soojendusega istmed", "püsikiiruse hoidja", "tagurduskaamera"],
    //meetodid
    taisnimi: function() {
        return this.mark + " " + this.mudel;
    }
};
console.log(auto1.taisnimi());

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: "BMW",
    mudel: "M3",
    aasta: 2024,
    varv: "kollane",
    omadused: ["soojendusega istmed", "püsikiiruse hoidja", "tagurduskaamera"],

    //meetodid
    taisnimi2() {
        return this.mark + " " + this.mudel;
    },

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

auto.kuvaOmadused();

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: 'Ford', mudel: 'Focus', aasta: 2010 },
    { mark: 'BMW', mudel: 'X5', aasta: 2015 },
    { mark: 'Audi', mudel: 'A4', aasta: 2020 }
];
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

Kõikide mudelite nägemiseks kasutame jällegi forEach tsüklit

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2010 },
    { mark: 'BMW', mudel: 'X5', aasta: 2015 },
    { mark: 'Audi', mudel: 'A4', aasta: 2020 }
];

autod.forEach((auto) => {
    console.log(`
    Mark: ${auto.mark},
    Mudel: ${auto.mudel},
    Aasta: ${auto.aasta}
    `);
});
console.log(autod);

Objekti massiivi meetodid

JavaScripti massiivide meetodid nagu push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter(), reduce(), sort() jms töötavad samamoodi nii lihtsate andmetüüpide kui ka objektidega. Seda seetõttu, et massiivid on JavaScriptis objektid ning salvestatavate andmete tüüp ei mõjuta meetodite tööd. Näiteks saab push() ja unshift() abil massiivi lisada uusi objekte.

let autod = [
    { mark: 'Mazda', mudel: '3', aasta: 2010 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2014 },
    { mark: 'Nissan', mudel: 'Leaf', aasta: 2018 }
];

// Lisab uue objekti massiivi lõppu
autod.push({ mark: 'Mercedes', mudel: 'C-Class', aasta: 2016 });
autod.unshift({ mark: 'Kia', mudel: 'Rio', aasta: 2021 });

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

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

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 autod = [
    { mark: 'Mazda', mudel: '3', aasta: 2010 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2024},
    { mark: 'Nissan', mudel: 'Leaf', aasta: 2020 }
];
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);

Ülesanne

let raamatud = [
    { pealkiri: 'Sõda ja rahu', autor: 'Leo Tolstoi', aasta: 1869 },
    { pealkiri: '1984', autor: 'George Orwell', aasta: 1949 },
    { pealkiri: 'Harry Potter ja tarkade kivi', autor: 'J.K. Rowling', aasta: 1997 }
];

function kuvaRaamatud() {
    raamatud.forEach(function(raamat) {
        console.log(raamat.pealkiri + ', autor: ' + raamat.autor + ', ilmus aastal ' + raamat.aasta + '.');
    });
}

function muudaAastaLihtne(nimi, uusAasta) {
    raamatud.forEach(function(raamat) {
        if (raamat.pealkiri === nimi) {
            raamat.aasta = uusAasta;
            console.log('Raamatu "' + nimi + '" uus aasta on ' + uusAasta + '.');
        }
    });
}

kuvaRaamatud();
muudaAastaLihtne('1984', 1950);
kuvaRaamatud();