JS: Objektid ja meetodid

Loeng

Javascripti objektid on võimsad andmestruktuurid, mis võimaldavad teil organiseerida seotud andmeid ühte üksusesse. Objektid pakuvad suurepärast viisi andmete struktureerimiseks ja manipuleerimiseks. Igapäevaelus võime objekte kohata mitmel viisil.

• E-kaubandus – Veebipoodides kasutatakse nimi, hind, laoseis, kirjeldus, kategooria jne.
• Hotelli broneeringud – Hotellid kasutavad objekte broneeringute esindamiseks
• Autod – Iga auto võib olla objekt, nagu mark, mudel, värv, mootori maht, registrinumber jne.
• Õpilased – Iga õpilane võiks olla objekt, nagu nimi, vanus, klass, hinded, jne.

Javascripti programmides on võimalik vajaduse korral luua ise kohandatud objekte. Mõned sisseehitatud on näiteks:

• Math – objekt sisaldab matemaatilisi funktsioone ja konstante.
• Date – objekt võimaldab töötada kuupäevade ja kellaaegadega.
• Array – objekt on sisseehitatud objekt, mida kasutatakse massiivide loomiseks ja manipuleerimiseks.
• String – objekt sisaldab meetodeid, mis võimaldavad töötada sõnedega.
• Object  – objekt on JavaScripti alusobjekt, mida kasutatakse kõikide objektide baasina.

Objekti loomine

Objekti süntaks koosneb võtme-väärtuse paari paaridest, kus võti võib olla mis tahes andmetüüp. Selles näites on loodud objekt nimega “auto”:

let auto = {
  mark: "Tesla",
  mudel: "Model Y",
  aasta: 2025,
  varv: "valge",
  lisavarustus: ["autopiloot", "elektrimootor", "360 kraadi kaamerad"]
};

Väljastamiseks tuleb see teade:

Iga objekti omadustele saab juurde pääseda, kasutades punktisüntaksit. Näiteks:

console.log(auto.mark); // Output: "Tesla"

Objekti meetodid ja this kasutamine

Objektid Javascriptis võivad sisaldada mitte ainult omadusi, vaid ka meetodeid. Meetodid on objekti funktsioonid, mis võivad manipuleerida objekti omadustega. this kasutatakse meetodite sees, et näidata objektile, mille sees meetod on kutsutud. Teeme auto objektile meetodi, mis kuvab auto täispika nime.

let auto = {
  //omadused
  mark: "Tesla",
  mudel: "Model Y",
  aasta: 2025,
  varv: "valge",
  lisavarustus: ["autopiloot", "elektrimootor", "360 kraadi kaamerad"],

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

console.log(auto.taisnimi());

Siis näitakse taisnimi funktsioon:

Meetodi lühendamine

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: "Tesla",
  mudel: "Model Y",
  aasta: 2025,
  varv: "valge",
  lisavarustus: ["autopiloot", "elektrimootor", "360 kraadi kaamerad"],

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

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

auto.kuvaOmadused();

Näitakse kõik omadused:

Objektide massiivid

Objektide massiiv on JavaScriptis andmete struktuur, mis koosneb mitmest objektist, mis on järjestatud indeksi alusel. Iga objekt on võti, kus võti on unikaalne ja väärtus on võti-väärtuse paari andmed. Objektide massiiv võib sisaldada mitmesuguseid andmetüüpe.

Objektide massiivi loomine ja kuvamine

Objektide massiivi loomine on suhteliselt lihtne. Alustame autode andmete salvestamisega. Iga auto on esindatud objektina, mis sisaldab teavet auto margi, mudeli ja tootmisaasta kohta.

let autod = [
  { mark: 'Tesla', mudel: 'Model Y', aasta: 2025 },
  { mark: 'Audi', mudel: 'Caret', aasta: 2023 },
  { mark: 'BMW', mudel: 'I9', aasta: 2022 }
];

console.log(autod);

Kui soovid näha konkreetse auto andmeid, saame viidata indeksi positsioonile massiivis:

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: 'Tesla', mudel: 'Model Y', aasta: 2025 },
  { mark: 'Audi', mudel: 'Caret', aasta: 2023 },
  { mark: 'BMW', mudel: 'I9', aasta: 2022 }
];


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

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: 'Tesla', mudel: 'Model Y', aasta: 2025 },
  { mark: 'Audi', mudel: 'Caret', aasta: 2023 },
  { mark: 'BMW', mudel: 'I9', aasta: 2022 }
];

//Lisab uue objekti massiivi lõppu
autod.push({ mark: 'BMW', mudel: '350i', aasta: 2018 });
autod.unshift({ mark: 'Ford', mudel: 'Focus 2', aasta: 2025 });

Meetod splice ühaegselt kustutab ja lisab.

massiiv.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: 'A5', aasta: 2020 });

Massiivist otsimine

Objektide massiivist otsimiseks kasutame find meetodit, mis tahab käivitamiseks funktsiooni.

//Otsimine
let otsing = autod.find(auto=>auto.aasta > 2015);
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 otsing = autod.find(auto=>auto.aasta > 2018 && auto.mark === "Audi");
console.log(otsing);

Massiivi filtreerimine

Kuna find leiab vaid ühe tulemuse, siis mitme vastuse saamiseks kasuta filter meetodit.

Näiteks meil on arvud ja soovime sealt saada paarisarve

let arvud = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

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 2022

//Filtreerimine
let filter = autod.filter(auto=>auto.aasta > 2022);
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.

Ülesanne

Raamatu objekt

1. Loo objekt raamat, millel on vähemalt kolm omadust: pealkiri, autor, aasta.

let raamat = { 
  pealkiri: 'Superaine arst', 
  autor: 'Aleksandr Kuprin', 
  aasta: 1898
};

2. Lisa meetod, mis kuvab esimese raamatu kirjelduse.

console.log(raamat.pealkiri);

vastus:

3. Lisa meetod, mis muudab väljaandmise aastat ja prindi tulemused konsooli.

Superaine arst muudetud aasta 2024

let raamat = { 
  pealkiri: 'Superaine arst', 
  autor: 'Aleksandr Kuprin', 
  aasta: 1898,

  //meetodid
  muudaaasta() {
    raamat.aasta = 2024
    return console.log(raamat.aasta);
  }
};

Raamatukogu

1. Loo objekt raamatukogu, mille omaduseks on raamatud (massiiv raamatutest).

let raamatukogu = [
  { pealkiri: 'Superaine arst', autor: 'Aleksandr Kuprin', aasta: 1898},
  { pealkiri: 'Sipsik', autor: 'Eno Raud', aasta: 1962},
  { pealkiri: '451 kraadi farhengeit', autor: 'Ray Breadberry', aasta: 1963}
];

2. Lisa meetod, mis kuvab kõik raamatud kenasti konsoolis.

raamatukogu.forEach((raamatud) => {
  console.log(`
    Pealkiri: ${raamatud.pealkiri},
    Autor: ${raamatud.autor},
    Aasta: ${raamatud.aasta}
    `);
});

3. Lisa meetod, mis lisab uue raamatu.

raamatukogu.push({ pealkiri: 'Lugu', autor: 'Mina', aasta: 2025 });

4. Lisa meetod, mis kuvab raamatukogu raamatute koguarvu.

console.log(raamatukogu.length)

5. Lisa meetod, mis arvutab, mitu raamatut on ilmunud pärast 2000. aastat.

let filter = raamatukogu.filter(raamatukogu=>raamatukogu.aasta > 2000);
console.log(filter.length);

6. Koosta oma meetod ja kirjuta mida meetod tähendab

Näita kõik ramaatud aga pealkirjas on autor ka!

raamatukogu.forEach((raamatud) => {
  console.log(`
    Pealkiri: ${raamatud.pealkiri + " - " + raamatud.autor},
    Aasta: ${raamatud.aasta}
    `);
});

This post is also available in ru_RU.