Объекты и методы в JavaScript

Javascripti objektid on võimsad andmestruktuurid, mis võimaldavad teil organiseerida seotud andmeid ühte üksusesse. Objektid koosnevad võtmes-väärtuses paaridest, kus võti on sõne (string) ja väärtus võib olla mis tahes Javascripti andmetüüp (arv, sõne, massiiv, funktsioon jne). Objektid pakuvad suurepärast viisi andmete struktureerimiseks ja manipuleerimiseks

Näited igapäevaelust:

E-kaubandus (veebipoodides kasutatakse objekte toodete esindamiseks, millel on omadused nagu nimi, hind, laoseis, kirjeldus, kategooria jne.)
Hotelli broneeringud (hotellid kasutavad objekte broneeringute esindamiseks, kus iga broneeringu objekt võib sisaldada andmeid nagu kliendi nimi, kuupäevad, toa tüüp, hinnaarvutused jne.)
Autod (iga auto võib olla objekt, millel on erinevad atribuudid nagu mark, mudel, värv, mootori maht, registrinumber jne.)

JS sisseehitatud objektid:

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 süntaks koosneb võtme-väärtuse paari paaridest, kus võti on sõne ja väärtus võib olla mis tahes Javascripti andmetüüp.

Näiteks:

let auto = {
    mark: "Audi",
    mudel: "A4",
    aasta: 2020,
    varv: "must",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};
//väljundiks
console.log(auto);

Tulemus:

Punktsüntaks – juurdepääs iga objekti omadustele.

Näiteks:

let auto = {
    mark: "Audi",
    mudel: "A4",
    aasta: 2020,
    varv: "must",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};

console.log(auto.mark);
console.log(auto.mudel);
console.log(auto.aasta);
console.log(auto.varv);
console.log(auto.lisavarustus);

Tulemus:

Objekti meetodid ja this kasutamine

Meetodid on objekti funktsioonid, mis võivad manipuleerida objekti omadustega või teostada muid toiminguid objekti kontekstis.
this võtmesõna kasutatakse meetodite sees, et viidata objektile, mille sees meetod on kutsutud.

Näiteks:

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

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

console.log(auto.taisnimi());

Tulemus:

Meetodi lühendamine

Lühem variant metodid

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

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

Näiteks:

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

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

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

auto.kuvaOmadused();

Tulemus:

Objektide massiivid

Objektide massiiv on JavaScriptis andmete struktuur, mis koosneb mitmest objektist, mis on järjestatud indeksi alusel.

Objektide massiivi loomine ja kuvamine

Näiteks:

let autod = [
    { mark: 'Audi', mudel: 'A5', aasta: 2022 },
    { mark: 'Nissan', mudel: 'Civic', aasta: 2014 },
    { mark: 'Tesla', mudel: 'Model 3', aasta: 2019 }
];

console.log(autod);

Tulemus:

Konkreetse auto andmed

console.log(autod[0]);

Näide punktsünteesist

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

Kõigi mudelite vaatamiseks kasutame forEach tsüklit.

let autod = [
    { mark: 'Audi', mudel: 'A5', aasta: 2022 },
    { mark: 'Nissan', mudel: 'Civic', aasta: 2014 },
    { 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.

Näiteks: ( push(), unshift())

let autod = [
    { mark: 'Audi', mudel: 'A5', aasta: 2022 },
    { mark: 'Nissan', mudel: 'Civic', aasta: 2014 },
    { mark: 'Tesla', mudel: 'Model 3', aasta: 2019 }
];

//Lisab uue objekti massiivi lõppu
autod.push({ mark: 'BMW', mudel: '320i', aasta: 2012 });
autod.unshift({ mark: 'Toyota', mudel: 'Corolla', aasta: 2009 });
console.log(autod);

Tulemus:

Näiteks: ( splice())

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: 'A4', aasta: 2018 });

Tulemus:

Massiivist otsimine

Objektide massiivist otsimiseks kasutame find meetodit. Kui vastust ei leita, siis tuleb undefined.

Näiteks:

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

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

Tulemus:

Massiivi filtreerimine

filter loob massiivist uue massiivi ja väljastab tingimustele vastavad elemendid.

Näiteks:

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

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

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

Tulemus:

Massiivi sorteerimine

sort() vajab oma elementide õigesti järjestamiseks.

Näiteks:

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

Tulemus:

Ülesanne:

Objektide süntaks ja struktuur