Портфолио Никифорова Никиты

et

Синтаксис и структура объектов

Objektid on võimsad andmestruktuurid JavaScriptis, mis võimaldavad ühendada seotud andmed üheks tervikuks.

Objekt koosneb paaridest „võti-väärtus“:
Võti — string
Väärtus — võib olla mis tahes tüüpi (number, string, massiiv, funktsioon jne)

Objekte kasutatakse andmete struktureerimiseks ja töötlemiseks.

Objektide kasutamise näited:

E-kaubandus (Internetipood)
Objektid esindavad kaupu: nimi, hind, laoseis, kirjeldus, kategooria.

Õpilased
Objekt säilitab õpilase kohta järgmist teavet: nimi, vanus, klass, hinded, tegevused.

JavaScripti objektid

Peamised sisseehitatud objektid:

Math — Sisaldab matemaatilisi funktsioone ja konstandeid.

Array — kasutatakse massiivide loomiseks ja nendega töötamiseks.

String — mõeldud töötamiseks stringidega.

Object – JavaScripti põhi objekt, millest pärinevad kõik ülejäänud.

Objekti loomine

let auto = {
    mark: "Audi",
    mudel: "A4",
    aasta: 2023,
    varv: "blue",
    omadused: ["LED headlights", "heated seats", "cruise control", "navigation system"]
};

console.log(auto);

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

Objekti meetodid ja this kasutamine

JavaScripti objektid võivad sisaldada mitte ainult omadusi (properties), vaid ka meetodeid (methods).

Meetodid on objektile kuuluvad funktsioonid, mis võivad:

  1. muuta objekti omadusi,
  2. teha arvutusi
  3. või lihtsalt tagastada selle objektiga seotud andmeid.

this võtmesõna

Kasutatakse meetodi sees, et viidata objektile, milles see meetod on määratletud. See võimaldab meetodil pöörduda sama objekti teiste omaduste poole.

let auto = {
    mark: "Audi",
    mudel: "A4",
    aasta: 2023,
    varv: "blue",
    omadused: ["LED-esituled", "soojendusega istmed", "püsikiirusehoidja", "navigatsioonisüsteem"],

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

console.log(auto.taisnimi());

Meetodi lühendamine

ES6-s on lisatud lühem viis meetodite kirjutamiseks objektides.

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

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

let auto = {
    mark: "Audi",
    mudel: "A4",
    aasta: 2023,
    varv: "blue",
    omadused: ["LED-esituled", "soojendusega istmed", "püsikiirusehoidja", "navigatsioonisüsteem"],

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

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

// meetodite kasutamine
console.log(auto.taisnimi());
auto.kuvaOmadused();

Objektide massiivid

Objektide massiiv on JavaScripti andmestruktuur, mis sisaldab mitut indeksite järgi järjestatud objekti.

Koosneb võtme-väärtuse paaridest. Võti on objekti sees unikaalne.
Väärtuseks võib olla mis tahes andmetüüp (tekst, number, booli väärtus, funktsioon, teine objekt jne).

Objektide massiivi loomine ja kuvamine

Objektide massiiv on struktuur, kus iga element on objekt, millel on omaduste kogum.

Näide massiivist autodega, kus iga objekt sisaldab mark, mudel ja aasta:

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

Kogu massiivi väljastamiseks:

console.log(autod);

Konkreetse objekti väljastamiseks indeksi järgi:

console.log(autod[0]);

Konkreetse objekti omaduse juurde pääsemiseks kasutame punktsüntaksit:

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

Kõigi mudelite vaatamiseks kasutame forEach tsüklit:

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

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

Objekti massiivi meetodid

JavaScriptis on massiivid spetsiaalsed objektid. Massiivide meetodid toimivad ühtmoodi, olenemata sellest, kas need sisaldavad lihtsaid andmeid (stringid, numbrid) või objekte.

Mõned meetodid:

push() — Lisab elemendi massiivi lõppu

autod.push({ mark: 'BMW', mudel: '320i', aasta: 2015 });

unshift() - Lisab elemendi massiivi algusse

autod.unshift({ mark: 'Ford', mudel: 'Focus', aasta: 2020 });

splice() — Lisab ja/või eemaldab elemente massiivist

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

Massiivist otsimine

JavaScripti meetod find otsib massiivist esimese elemendi, mis vastab antud tingimusele.

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

let otsing = autod.find(auto => auto.aasta > 2017);
console.log(otsing);

Loogilise AND-i (&&) abil saab otsida objekti, mis vastab korraga mitmele tingimusele.

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

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

Kui massiivis pole sobivat objekti, siis meetod find tagastab undefined:

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

let otsing = autod.find(auto => auto.aasta > 2025);
console.log(otsing);

Massiivi filtreerimine

Filter-meetod loob uue massiivi, mis koosneb kõigist algse massiivi elementidest, mis vastavad antud tingimusele.

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

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

Autode filter

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

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

Massiivi sorteerimine

Sort. Objekti massiivi lihtne sorteerimine ei tööta korrektselt. Seetõttu peame kasutama võrdlusfunktsiooni.

let autod = [
    { mark: 'Ford', mudel: 'Focus', aasta: 2015 },
    { mark: 'Kia', mudel: 'Ceed', aasta: 2018 },
    { mark: 'Volkswagen', mudel: 'Golf', aasta: 2020 },
    { mark: 'Mazda', mudel: 'CX-5', aasta: 2021 },
    { mark: 'Hyundai', mudel: 'Tucson', aasta: 2019 }
];

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

Siin (a, b) => a — b on võrdlusfunktsioon, mis teatab sort()-ile, et numbrid tuleb sorteerida nende tegelike numbriliste väärtuste järgi, mitte stringide vää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 elementide õigeks järjestamiseks.

Ülesanne

  1. Loo objekt raamat, millel on vähemalt kolm omadust: pealkiri, autor, aasta.
let raamat1 = {
  pealkiri: "Sõda ja rahu",
  autor: "Lev Tolstoi",
  aasta: 1869
};

2. Lisa meetod, mis kuvab raamatu kirjelduse.

let raamat = {
    pealkiri: "Sõda ja rahu",
    autor: "Lev Tolstoi",
    aasta: 1869,

    kuvaKirjeldus() {
        return `${this.pealkiri}, autor: ${this.autor}, aastal ${this.aasta}.`;
    }
};

console.log(raamat.kuvaKirjeldus());

//Sõda ja rahu, autor: Lev Tolstoi, aastal 1869.

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

let raamat = {
    pealkiri: "Sõda ja rahu",
    autor: "Lev Tolstoi",
    aasta: 1869,

    kuvaKirjeldus() {
        return `${this.pealkiri}, autor: ${this.autor}, aastal ${this.aasta}.`;
    },

    muudaAasta(uusAasta) {
        console.log(`Oli aasta: ${this.aasta}`);
        this.aasta = uusAasta;
        console.log(`Aasta muudetud: ${this.aasta}`);
    }
};

raamat.muudaAasta(1870);
console.log(raamat.kuvaKirjeldus());

Raamatukogu

  1. Loo objekt raamatukogu, mille omaduseks on raamatud (massiiv raamatutest).
let raamatukogu = {
    raamatud: [
        {pealkiri: "Sõda ja rahu", autor: "Lev Tolstoi", aasta: 1869},
        {pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967},
        {pealkiri: "Harry Potter ja tarkade kivi", autor: "J.K. Rowling", aasta: 1997}
    ]

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

let raamatukogu = {
    raamatud: [
        {pealkiri: "Sõda ja rahu", autor: "Lev Tolstoi", aasta: 1869},
        {pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967},
        {pealkiri: "Harry Potter ja tarkade kivi", autor: "J.K. Rowling", aasta: 1997}
    ],

    kuvaRaamatud() {
        this.raamatud.forEach((raamat) => {
            console.log(`"${raamat.pealkiri}" autorilt ${raamat.autor}, aastal ${raamat.aasta}`);
        });
    },
}
raamatukogu.kuvaRaamatud();

3. Lisa meetod, mis lisab uue raamatu.

let raamatukogu = {
    raamatud: [
        {pealkiri: "Sõda ja rahu", autor: "Lev Tolstoi", aasta: 1869},
        {pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967},
        {pealkiri: "Harry Potter ja tarkade kivi", autor: "J.K. Rowling", aasta: 1997}
    ],

    lisaRaamat(uusRaamat) {
        this.raamatud.push(uusRaamat);
        console.log(`Raamat "${uusRaamat.pealkiri}" lisatud`);
    }
}
raamatukogu.lisaRaamat({ pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967 });

4. Lisa meetod, mis kuvab raamatukogu raamatute koguarvu.

let raamatukogu = {
    raamatud: [
        {pealkiri: "Sõda ja rahu", autor: "Lev Tolstoi", aasta: 1869},
        {pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967},
        {pealkiri: "Harry Potter ja tarkade kivi", autor: "J.K. Rowling", aasta: 1997}
    ],

    raamatuteKoguarv() {
        return this.raamatud.length;
    }
}

console.log(`Koguarv: ${raamatukogu.raamatuteKoguarv()}`);

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

let raamatukogu = {
    raamatud: [
        {pealkiri: "Sõda ja rahu", autor: "Lev Tolstoi", aasta: 1869},
        {pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967},
        {pealkiri: "Harry Potter ja tarkade kivi", autor: "J.K. Rowling", aasta: 1997}
    ],

    arvutaUuedRaamatud() {
        return this.raamatud.filter(raamat => raamat.aasta > 2000).length;
    }
}

console.log(`Raamatud pärast 2000. aastat: ${raamatukogu.arvutaUuedRaamatud()}`);

6. Koosta oma meetod ja kirjuta mida meetod tähendab (Otsing nime järgi)

let raamatukogu = {
    raamatud: [
        {pealkiri: "Sõda ja rahu", autor: "Lev Tolstoi", aasta: 1869},
        {pealkiri: "Meister ja Margarita", autor: "Mihhail Bulgakov", aasta: 1967},
        {pealkiri: "Harry Potter ja tarkade kivi", autor: "J.K. Rowling", aasta: 1997}
    ],

    otsiAutoriJargi: function(nimi) {
        var leitud = this.raamatud.find(function(raamat) {
            return raamat.autor === nimi;
        });
        console.log(leitud);
    }
}

raamatukogu.otsiAutoriJargi("Lev Tolstoi");

Veebsait raamatukoguga

Veebsait