JS: Objektid ja meetodid

Objekt – Auto objekt
Meetod – Console.log

Millised funktsioonid on kasutusel?
See näide näitab kuidas lihtsalt lasta consool mingit objekti infot tagastada kasutades log-i.

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 et näidata konsooli
console.log(auto);

Console Vaade:

Objekt Meetodid ja this kasutamine

Objekt – Auto objekt
Meetod – Taisnimi: function()

Millised funktsioonid on kasutusel?
Console.log(auto.taisnimi()) laseb teada et kasutada taisnimi funktsiooni et saada consooli vastus, antud juhul laseb teada et tagastada auto mark, mudel ja aasta

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

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

console.log(auto.taisnimi());

Console Vaade:

Meetodi Lühendamine

Objekt – Auto objekt
Meetod – Taisnimi meetod

Millised funktsioonid on kasutusel?
Teeb samat asja mis eelmine näide aga lühem

let auto = {
  //omadused
  mark: "Toyota",
  mudel: "Corolla Z",
  aasta: 2033,
  varv: "lilla",
  omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],

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

console.log(auto.taisnimi());

Console vaade:

Kui omadused on massiivis, siis kasuta for või forEach tsüklit.

Objekt – Auto objekt
Meetod – kuvaOmadused

Millised funktsioonid on kasutusel?
Auto.kuvaOmadused laseb teada et console peab tagastama console vastuse mis sisaldab Omadused auto objektist

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

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

auto.kuvaOmadused();

Objektide Massiivid ja kuidas neid luua

Objekt – Autode massiiv
Meetod – ForEach

Millised funktsioonid on kasutusel?
Enamasti siin vaatame massiivi aga kasutame ka console log ja kuidas see vaatab massiivi ning ka lõpus ForEach mis laseb igal andmel olla kuvatud teisiti.

let autod = [
    { mark: 'Toyota', mudel: 'Corolla C', aasta: 2009 },
    { mark: 'Audi', mudel: '125', aasta: 2002 },
    { mark: 'Tesla', mudel: 'Model 1', aasta: 2016 }
];

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

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

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

Objektide Massiivi meetodid

Objekt – Autode massiiv
Meetod – Push, Unshift ja Splice meetod (ning foreach eelmisest ülesandest)

Millised funktsioonid on kasutusel?
Push ja Unshift meetod aitab lisada uued andmed Massiivi sisse

let autod = [
  { mark: 'Toyota', mudel: 'Prius', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Cybertruck', aasta: 2023 }
];

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


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

Console Vaade:

Meetod splice ühaegselt kustutab ja lisab.

massiiv.splice(
  {start indeks},
  {mitu eemaldada},
  {mida lisada}
);

Näiteks:

let autod = [
  { mark: 'Toyota', mudel: 'Prius', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Cybertruck', aasta: 2023 }
];

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

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

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

Massiivist otsimine

Objekt – Autode Massiiv
Meetod – Find meetod

Millised funktsioonid on kasutusel?
(auto =>auto.aasta > 2018) laseb find-il teada et see peab leidma auto mingist aastast mis on rohkem kui 2018

let autod = [
  { mark: 'Toyota', mudel: 'Prius', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Cybertruck', aasta: 2023 }
];

//Otsimine
let otsing = autod.find(auto=>auto.aasta > 2018);
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 autod = [
  { mark: 'Toyota', mudel: 'Prius', aasta: 2007 },
  { mark: 'Honda', mudel: 'Accord', aasta: 2019 },
  { mark: 'Tesla', mudel: 'Model A', aasta: 2019 }
];

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

Massiivist filtreerimine

Objekt – Autode massiiv
Meetod – Filter

Millised funktsioonid on kasutusel?
(arv => arv % 2 === 0) laseb teada filtril et arvud peavad olema paaris arvud.

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

let autod = [
  { mark: 'Toyota', mudel: 'Prius', aasta: 2007 },
  { mark: 'Honda', mudel: 'Accord', aasta: 2019 },
  { mark: 'Tesla', mudel: 'Model A', aasta: 2019 }
];

//Filtreerimine
let filter = autod.filter(auto=>auto.aasta > 2018);
console.log(filter);

Massiivi Sorteerimine

Objekt – Autode massiiv
Meetod – Sort

Millised funktsioonid on kasutusel?
(a, b) => a - b võrdlus funktsioon mis laseb sort-il teada et tagastada vastused numbrilistel väärtustel mitte string.

let autod = [
  { mark: 'Toyota', mudel: 'Camry', aasta: 2018 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Model A', aasta: 2019 }
];

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

Ülessanne

Ülessanne tehti siin lehel – https://kaurpakaste24.thkit.ee/harjutused/Raamatud.html