JS: Objektid ja meetodid

Objeck – objekt on JavaScripti alusobjekt, mida kasutatakse kõikide objektide baasina.

Meetod – Selle meetodeid saab kasutada objektide loomiseks, omaduste lisamiseks ja juurdepääsuks, objektide kopeerimiseks jne.

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

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

    console.log(auto);

Console vaade:

Objekti meetodid ja this kasutamine

let auto = {
    //omadused
    mark: "Audi",
    mudel: "80",
    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());

Console vaade:

Meetodi lühendamine

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

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

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

auto.kuvaOmadused();

Console vaade:

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

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 vaade:

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

Console vaade:

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[0].mark);

Console vaade:

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

Console 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: 'Tesla', mudel: 'Model 3', aasta: 2019},
    {mark: 'Hummingbird', mudel: 'Model 5', aasta: 2020}
];

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

console.log(autod);

Console vaade:


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},
    {mark: 'Hummingbird', mudel: 'Model 5', aasta: 2020}
];

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

console.log(autod[0]);

Console vaade:

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},
    {mark: 'Hummingbird', mudel: 'Model 5', aasta: 2020}
];

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

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

Console vaade:

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

Console 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: '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 });


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(1,0,{ mark: 'Audi', mudel: 'A4', aasta: 2018 });

Massiivist otsimine

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(1,0,{ mark: 'Audi', mudel: 'A4', aasta: 2018 });

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

Massiivi filtreerimine

let arvud = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filtreeritud = arvud.filter(arv => arv % 2 === 0);
console.log(filtreeritud);

Massiivi sorteerimine

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

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}
    `);
});
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.

Raamatukogu ülesanne

https://siimbeloi24.thkit.ee/harjutused/ObjektMeetodid/raamatukogu.html