JS: Objektid ja meetodid – New Zone+ Application

JavaScriptis on objekt andmete kogum kuhu saab salvestada erinevaid omadusi ja nende väärtusi objekti abil saab ühe nimetuse alla koondada omavahel seotud andmed

Meetod on objektiga seotud funktsioon mis võimaldab objekti andmetega midagi teha või mingit tegevust sooritada

Näiteks võib auto objekt sisaldada marki värvi ja väljalaskeaastat. Samuti võib sellel olla meetod mis kuvab auto kohta infot

let auto = {
    mark: "Toyota",
    mudel: "Corolla",
    aasta: 2022,
    varv: "punane",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};

console.log(auto);
console.log(auto.mark); // Output: "Toyota"
console.log(auto.mudel); // Output: "Corolla"
console.log(auto.aasta); // Output: 2022
console.log(auto.varv); // Output: "punane"
console.log(auto.omadused); // Output: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>JavaScripti objekt</title>
</head>
<body>
<h1>Auto andmed</h1>  

<script>
  let auto = {
    mark: "Toyota",
    mudel: "Corolla",
    aasta: 2022,
    varv: "punane",
    lisavarustus: [
      "kliimaseade",
      "elektriaknad",
      "navigatsioonisüsteem"
    ]
  };

  console.log(auto);
  console.log(auto.mark);
  console.log(auto.mudel);
  console.log(auto.aasta);
  console.log(auto.varv);
  console.log(auto.lisavarustus);
</script>
</body>
</html>

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

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

console.log(auto.taisnimi());

Objektid Javascriptis võivad sisaldada mitte ainult omadusi, vaid ka meetodeid. 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. Tekitame eelmisele auto objektile meetodi, mis kuvab auto täispika nime. Selleks, et meetod saaks kasutada sama objekti omadusi, siis tuleb kasutada this võtmesõna.

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

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

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

auto.kuvaOmadused();

Objektide massiiv on JavaScriptis andmete struktuur, mis koosneb mitmest objektist, mis on järjestatud indeksi alusel. Iga objekt on võti-väärtuse paaride kogum, kus võti on unikaalne ja väärtus on võti-väärtuse paari andmed. Objektide massiiv võib sisaldada mitmesuguseid andmetüüpe, sealhulgas teksti (string), numbreid, tõeväärtusi (boolean), funktsioone, muid objekte jne.

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

let autod = [
  { mark: 'Toyota', mudel: 'Corolla', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Model 3', aasta: 2019 }
];

console.log(autod);

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. on kõik kasutatavad sõltumata sellest, kas massiiv sisaldab lihtsaid andmetüüpe (näiteks stringid või numbrid) või keerukamaid andmeid (näiteks objekte või isegi teisi massiive).

Seda seetõttu, et JavaScriptis on massiivid objektid ning nii lihtsate andmetüüpide kui ka objektide hoiustamine massiivides toimub ühtemoodi. 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: 'Toyota', mudel: 'Corolla', aasta: 2007 },
  { mark: 'Honda', mudel: 'Civic', aasta: 2012 },
  { mark: 'Tesla', mudel: 'Model 3', aasta: 2019 }
];

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