JS: Objektid ja meetodid

objekt – ? meetod – ? millised

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

//väljastamiseks trüki
console.log(auto);

Consooli vaade

Objekti meetodid ja `this` kasutamine

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

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

console.log(auto.taisnimi());

Consooli vaade

Meetodi lühendamine

Uus Javascript ES6 lubab nüüd meetodi panna kirja ka lühemalt.

let auto = {
    //omadused
    mark: "Toyota",
    mudel: "Corolla L",
    aasta: 2022,
    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 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);

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

Massiivist otsimine

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

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

ülesanne

Objekti meetodid ja this kasutamine