JS: Objects and Methods

objekt -objekt on JS sees olev muutuja, mis võib sisaldada palju muutujaid. Meetod –meetod on JavaScripti sisseehitatud funktsioon, mis võimaldab asendada kindla osa stringist teise stringiga. millised funktsioonid on kasutusel

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

//Väljastamiseks trüki välja kogu objekt:
//F12 brauseris

Consooli vaade:

Lisasin Audi koos uue meetodiga mis näitab auto omaniku/ostia täisnime kui ka mis auto mudel tal on.

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

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

console.log(auto.taisnimi());

Siin on Consooli vaade:

Lisasin Uue auto BMW e36 sellega koos lisasin veel kuvaomadused objekti millega on võimalik kuvada auto omaniku omadusi kui ka auto enda omadusi. Kui omadused on massiivis, siis kasuta for või forEach tsüklit.

let auto = {
    //omadused
    mark: "BMW",
    mudel: "BMW e36 ",
    aasta: 2022,
    varv: "Sinine",
    omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],

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

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

auto.kuvaOmadused();
//Väljastamiseks trüki välja kogu objekt:
//F12 brauseris

Siin on consooli vaade:

Objekti 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: 'Bmw', mudel: 'E36', aasta: 2002 }
];

Consooli vaates näeb välja selline:

Kui soovime näha konkreetse auto andmeid, saame viidata auto positsioonile massiivis (pidage meeles, et massiivide

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: 'Bmw', mudel: 'E 36', aasta: 2002 }
];


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

Siin on Consooli vaade:

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: 'Mitsubishi', mudel: L 200', aasta: 2019 }
];

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

Siin on consooli vaade:

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.

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

Consooli Vaade:

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

Consooli Vaade:

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);

Consooli Vaade:

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 > 2001);
console.log(filter);

Consooli Vaade

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);

Consooli Vaade

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