JS Objektid/meetodid - Christofer Krabbi portfoolio

objekt-? meetod-? millised funktsioonid on kasutusel?

//ojekti loomine

let auto = {
    mark: "Chevrolet",
    mudel: "chevelle",
    aasta: 1970,
    varv: "punane",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};
//Väljastamiseks trüki välja kogu objekt:
//F12 brauseris et näidata konsooli

console.log(auto);

Konsooli vaade:

Objekti meetodid ja `this` kasutamine

//Objekti meetodid ja this kasutamine
let auto = {
    //omadused
    mark: "Ford",
    mudel: "Mustang",
    aasta: 1969,
    varv: "sinine",
    omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],

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

console.log(auto.taisnimi());

Konsooli vaade:

Meetodi lühendamine

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

let auto = {
    //omadused
    mark: "Dodge",
    mudel: "Challanger",
    aasta: 1970,
    varv: "punane",
    omadused: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"],

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

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

auto.kuvaOmadused();

Konsooli vaade:

Objektide massiivid

bjektide massiiv on JavaScriptis andmete struktuur, mis koosneb mitmest objektist, mis on järjestatud indeksi alusel. 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: 'Dodge', mudel: 'Challanger', aasta: 1970},
  { mark: 'Chevrolet', mudel: 'Chevelle', aasta: 1970},
  { mark: 'Ford', mudel: 'Mustang', aasta: 1969}
];

console.log(autod);

Konsooli vaade:

Konkreetse auto nägemiseks, saame kasutada auto järjekorra asukohta massiivis

let autod = [
    { mark: 'Dodge', mudel: 'Challanger', aasta: 1970},
    { mark: 'Chevrolet', mudel: 'Chevelle', aasta: 1970},
    { mark: 'Ford', mudel: 'Mustang', aasta: 1969}
];

//olenevalt kasutatud arvust, saame vastava vaste konsoolis
console.log(autod[2]);

Konsooli vaade:

Et näha vastava asukohaga auto marki(või muud omadust)

let autod = [
    { mark: 'Dodge', mudel: 'Challanger', aasta: 1970},
    { mark: 'Chevrolet', mudel: 'Chevelle', aasta: 1970},
    { mark: 'Ford', mudel: 'Mustang', aasta: 1969}
];

//väljastame konsoolis esimese auto margi
//saab kasutada muid omadusi
console.log(autod[0].mark);

Konsooli vaade:

Kõikide mudelite nägemiseks kasutame forEach tsüklit

let autod = [
    { mark: 'Dodge', mudel: 'Challanger', aasta: 1970},
    { mark: 'Chevrolet', mudel: 'Chevelle', aasta: 1970},
    { mark: 'Ford', mudel: 'Mustang', aasta: 1969}
];
autod.forEach((auto) => {
    console.log(`
    Mark: ${auto.mark},
    Mudel: ${auto.mudel},
    Aasta: ${auto.aasta}
    `);
});

Konsooli vaade:

Autode juurde lisamine:

let autod = [
    { mark: 'Dodge', mudel: 'Challanger', aasta: 1970},
    { mark: 'Chevrolet', mudel: 'Chevelle', aasta: 1970},
    { mark: 'Ford', mudel: 'Mustang', aasta: 1969}
];

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

Konssoli vaade:

Et asendada auto, seda kustutades ja siis uue lisamiseks kasutame splice meetodit

let autod = [
    { mark: 'Dodge', mudel: 'Challanger', aasta: 1970},
    { mark: 'Chevrolet', mudel: 'Chevelle', aasta: 1970},
    { mark: 'Ford', mudel: 'Mustang', aasta: 1969},
    { mark: 'Honda', mudel: 'Civic', aasta: 2012 }
];


//Lisab objekti alates kolmandast indeksist, kustutab ühe objekti
autod.splice(3,1,{ mark: 'Audi', mudel: 'A4', aasta: 2018 });

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

Konsooli vaade: