JavaScript-egenskaber

Indholdsfortegnelse

Vis indholdsfortegnelse

Egenskaber er den vigtigste del af ethvert JavaScript-objekt.

JavaScript-egenskaber

Egenskaber er de værdier, der er knyttet til et JavaScript-objekt.

Et JavaScript-objekt er en samling af uordnede egenskaber.

Egenskaber kan normalt ændres, tilføjes og slettes, men nogle er skrivebeskyttede.

Adgang til JavaScript-egenskaber

Syntaksen for at få adgang til et objekts egenskab er:

objectName.property      // person.age

eller

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

eller

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

Udtrykket skal evalueres til et egenskabsnavn.

Eksempel 1

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

Prøv det selv →

<!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>

Eksempel 2

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

Prøv det selv →

<!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 til...in Loop

JavaScript-sætningen for...in går gennem et objekts egenskaber.

Syntaks

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

Kodeblokken inde i for...in-løkken vil blive udført én gang for hver egenskab.

Gennemgang af et objekts egenskaber:

Eksempel

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

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

Prøv det selv →

<!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>

Tilføjelse af nye egenskaber

Du kan tilføje nye egenskaber til et eksisterende objekt ved blot at give det en værdi.

Antag, at personobjektet allerede eksisterer - du kan så give den nye egenskaber:

Eksempel

person.nationality = "English";

Prøv det selv →

<!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>

Sletning af egenskaber

Søgeordet delete sletter en egenskab fra et objekt:

Eksempel

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

delete person.age;

Prøv det selv →

<!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>

eller slet person["alder"];

Eksempel

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

delete person["age"];

Prøv det selv →

<!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>

Søgeordet delete sletter både værdien af ejendommen og selve ejendommen.

Efter sletning kan ejendommen ikke bruges, før den tilføjes igen.

Det Operatoren delete er designet til at blive brugt på objektegenskaber. Det har ingen effekt på variabler eller funktioner.

Operatoren delete bør ikke bruges på et foruddefineret JavaScript-objekt ejendomme. Det kan crashe din applikation.

Indlejrede objekter

Værdier i et objekt kan være et andet objekt:

Eksempel

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

Du kan få adgang til indlejrede objekter ved hjælp af punktnotationen eller parentesnotationen:

Eksempel

myObj.cars.car2;

Prøv det selv →

<!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>

eller:

Eksempel

myObj.cars["car2"];

Prøv det selv →

<!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>

eller:

Eksempel

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

Prøv det selv →

<!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>

eller:

Eksempel

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

Prøv det selv →

<!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>

Indlejrede arrays og objekter

Værdier i objekter kan være arrays, og værdier i arrays kan være objekter:

Eksempel

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 at få adgang til arrays inde i arrays skal du bruge en for-in-løkke for hvert array:

Eksempel

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];
  }
}

Prøv det selv →

<!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>

Ejendomsegenskaber

Alle ejendomme har et navn. Derudover har de også en værdi.

Værdien er en af ejendommens attributter.

Andre attributter er: enumerable, konfigurerbar og skrivbar.

Disse attributter definerer, hvordan egenskaben kan tilgås (er den læsbar?, er det kan skrives?)

I JavaScript kan alle attributter læses, men kun værdiattributten kan ændres (og kun hvis ejendommen er skrivbar).

(ECMAScript 5 har metoder til både at hente og indstille alle egenskaber egenskaber)

Prototype egenskaber

JavaScript-objekter arver egenskaberne af deres prototype.

Søgeordet delete sletter ikke nedarvede egenskaber, men hvis du sletter en prototype egenskab, vil det påvirke alle objekter arvet fra prototypen.