JavaScript-egenskaper


Innehållsförteckning

    Visa innehållsförteckning


Egenskaper är den viktigaste delen av alla JavaScript-objekt.


JavaScript-egenskaper

Egenskaper är de värden som är kopplade till ett JavaScript-objekt.

Ett JavaScript-objekt är en samling oordnade egenskaper.

Egenskaper kan vanligtvis ändras, läggas till och tas bort, men vissa är skrivskyddade.


Åtkomst till JavaScript-egenskaper

Syntaxen för att komma åt egenskapen för ett objekt är:

objectName.property      // person.age

eller

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

eller

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

Uttrycket måste evalueras till ett egenskapsnamn.

Exempel 1

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

Prova själv →

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

Exempel 2

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

Prova själv →

<!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 för...in Loop

JavaScript-satsen for...in går igenom egenskaperna för ett objekt.

Syntax

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

Kodblocket inuti för...in-loopen kommer att exekveras en gång för varje egenskap.

Gå igenom egenskaperna hos ett objekt:

Exempel

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

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

Prova själv →

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

Lägger till nya egenskaper

Du kan lägga till nya egenskaper till ett befintligt objekt genom att helt enkelt ge det ett värde.

Antag att personobjektet redan finns - du kan sedan ge den nya egenskaper:

Exempel

person.nationality = "English";

Prova själv →

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

Ta bort egenskaper

Nyckelordet delete tar bort en egenskap från ett objekt:

Exempel

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

delete person.age;

Prova själv →

<!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 ta bort person["ålder"];

Exempel

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

delete person["age"];

Prova själv →

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

Nyckelordet delete tar bort både värdet på egenskapen och själva egenskapen.

Efter radering kan egenskapen inte användas innan den läggs till igen.

De Operatorn delete är utformad för att användas på objektegenskaper. Det har ingen effekt på variabler eller funktioner.

Operatorn delete ska inte användas på fördefinierade JavaScript-objekt egenskaper. Det kan krascha din applikation.


Kapslade objekt

Värden i ett objekt kan vara ett annat objekt:

Exempel

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

Du kan komma åt kapslade objekt med hjälp av punktnotationen eller parentesnotationen:

Exempel

myObj.cars.car2;

Prova själv →

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

Exempel

myObj.cars["car2"];

Prova själv →

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

Exempel

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

Prova själv →

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

Exempel

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

Prova själv →

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

Kapslade arrayer och objekt

Värden i objekt kan vara arrayer och värden i arrayer kan vara objekt:

Exempel

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

För att komma åt arrayer i arrayer, använd en for-in loop för varje array:

Exempel

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

Prova själv →

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

Egenskapsattribut

Alla fastigheter har ett namn. Dessutom har de också ett värde.

Värdet är ett av fastighetens attribut.

Andra attribut är: uppräknad, konfigurerbar och skrivbar.

Dessa attribut definierar hur egenskapen kan nås (är den läsbar?, är är det skrivbart?)

I JavaScript kan alla attribut läsas, men endast värdeattributet kan ändras (och endast om egenskapen är skrivbar).

(ECMAScript 5 har metoder för att både hämta och ställa in alla egenskaper attribut)


Prototypegenskaper

JavaScript-objekt ärver egenskaperna hos sin prototyp.

Nyckelordet delete tar inte bort ärvda egenskaper, men om du tar bort en prototypegenskap, kommer det att påverka alla objekt ärvt från prototypen.