JavaScript-ominaisuudet


Sisällysluettelo

    Näytä sisällysluettelo


Ominaisuudet ovat kaikkien JavaScript-objektien tärkein osa.


JavaScript-ominaisuudet

Ominaisuudet ovat JavaScript-objektiin liittyviä arvoja.

JavaScript-objekti on kokoelma järjestämättömiä ominaisuuksia.

Ominaisuuksia voidaan yleensä muuttaa, lisätä ja poistaa, mutta jotkin ovat vain luettavissa.


JavaScript-ominaisuuksien käyttäminen

Objektin ominaisuuden käyttämisen syntaksi on:

objectName.property      // person.age

tai

objectName["property"]   // person["age"]

tai

objectName[expression]   // x = "age"; person[x]

Lausekkeen on arvioitava ominaisuuden nimeksi.

Esimerkki 1

person.firstname + " is " + person.age + " years old.";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with .property:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Esimerkki 2

person["firstname"] + " is " + person["age"] + " years old.";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with ["property"]:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>


JavaScript for...in Loop

JavaScript for...in-käsky käy läpi objektin ominaisuudet.

Syntaksi

for (let variable in object) {
      // code to be executed
 }

for...in-silmukan sisällä oleva koodilohko suoritetaan kerran kullekin ominaisuudelle.

Objektin ominaisuuksien kiertäminen:

Esimerkki

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
    txt += person[x];
 }

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Looping object property values:</p>

<p id="demo"></p>

<script>
const person = {
  fname:"John",
  lname:"Doe",
  age:25
}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Uusien ominaisuuksien lisääminen

Voit lisätä uusia ominaisuuksia olemassa olevaan objektiin antamalla sille arvon.

Oletetaan, että henkilöobjekti on jo olemassa - voit sitten antaa sille uusia ominaisuuksia:

Esimerkki

person.nationality = "English";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Add a new property to an existing object:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

Ominaisuuksien poistaminen

Avainsana delete poistaa ominaisuuden objektista:

Esimerkki

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person.age;

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

tai poista henkilö["ikä"];

Esimerkki

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person["age"];

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Avainsana delete poistaa sekä omaisuuden arvon että itse kiinteistön.

Poistamisen jälkeen omaisuutta ei voi käyttää ennen kuin se on lisätty takaisin.

The delete-operaattori on suunniteltu käytettäväksi objektin ominaisuuksissa. Sillä ei ole vaikutusta muuttujia tai funktioita.

delete-operaattoria ei saa käyttää ennalta määritetyssä JavaScript-objektissa ominaisuuksia. Se voi kaataa sovelluksesi.


Sisäkkäiset objektit

Objektin arvot voivat olla toinen objekti:

Esimerkki

myObj = {
  name:"John",
  age:30,
    
  cars: {
    car1:"Ford",
      
  car2:"BMW",
    car3:"Fiat"
    }
}
  

Voit käyttää sisäkkäisiä objekteja käyttämällä piste- tai hakasulkumerkintää:

Esimerkki

myObj.cars.car2;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>

</body>
</html>

tai:

Esimerkki

myObj.cars["car2"];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars["car2"];
</script>

</body>
</html>

tai:

Esimerkki

myObj["cars"]["car2"];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
</script>

</body>
</html>

tai:

Esimerkki

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}

let p1 = "cars";
let p2 = "car2";
document.getElementById("demo").innerHTML = myObj[p1][p2];
</script>

</body>
</html>

Sisäkkäiset taulukot ja objektit

Objektien arvot voivat olla taulukoita, ja taulukoiden arvot voivat olla objekteja:

Esimerkki

const myObj =
  {
  name: "John",
  age: 30,
    
  cars: [
    {name:"Ford", 
  models:["Fiesta", "Focus", "Mustang"]},
    
  {name:"BMW", models:["320", "X3", "X5"]},
      
  {name:"Fiat", models:["500", "Panda"]}
    ]
}

Jos haluat käyttää taulukoiden sisällä olevia taulukoita, käytä jokaiselle taulukolle for-in-silmukkaa:

Esimerkki

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name 
  + "</h1>";
  for (let j in myObj.cars[i].models) {
    
  x += myObj.cars[i].models[j];
  }
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Nested JavaScript Objects and Arrays.</h2>

<p id="demo"></p>

<script>
let x = "";
const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

for (let i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Kiinteistön ominaisuudet

Kaikilla kiinteistöillä on nimi. Lisäksi niillä on arvoa.

Arvo on yksi ominaisuuden ominaisuuksista.

Muut attribuutit ovat: enumerable, configurable ja writable.

Nämä attribuutit määrittelevät, kuinka omaisuutta voidaan käyttää (onko se luettavissa?, on se on kirjoitettava?)

JavaScriptissä kaikki attribuutit voidaan lukea, mutta vain arvo-attribuutti voidaan lukea muuttaa (ja vain, jos ominaisuus on kirjoitettava).

(ECMAScript 5:ssä on menetelmiä sekä kaikkien ominaisuuksien hankkimiseen että asettamiseen attribuutit)


Prototyypin ominaisuudet

JavaScript-objektit perivät prototyyppinsä ominaisuudet.

Avainsana delete ei poista perittyjä ominaisuuksia, mutta jos poistat prototyyppiominaisuus, se vaikuttaa kaikkiin objekteihin prototyypistä peritty.