Ominaisuudet ovat kaikkien JavaScript-objektien tärkein osa.
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.
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.
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>
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
-käsky käy läpi objektin ominaisuudet.
for (let variable in object) {
// code to be executed
}
for...in
-silmukan sisällä oleva koodilohko suoritetaan kerran kullekin ominaisuudelle.
Objektin ominaisuuksien kiertäminen:
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>
Voit lisätä uusia ominaisuuksia olemassa olevaan objektiin antamalla sille arvon.
Oletetaan, että henkilöobjekti on jo olemassa - voit sitten antaa sille uusia ominaisuuksia:
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>
Avainsana delete
poistaa ominaisuuden objektista:
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ä"];
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.
Objektin arvot voivat olla toinen objekti:
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ää:
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:
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:
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:
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>
Objektien arvot voivat olla taulukoita, ja taulukoiden arvot voivat olla objekteja:
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:
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>
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)
JavaScript-objektit perivät prototyyppinsä ominaisuudet.
Avainsana delete
ei poista perittyjä ominaisuuksia, mutta jos poistat prototyyppiominaisuus, se vaikuttaa kaikkiin objekteihin prototyypistä peritty.