JavaScript tulajdonságai

Tartalomjegyzék

Tartalomjegyzék megjelenítése

A tulajdonságok a JavaScript objektumok legfontosabb részei.

JavaScript tulajdonságai

A tulajdonságok a JavaScript objektumokhoz társított értékek.

A JavaScript objektumok rendezetlen tulajdonságok gyűjteménye.

A tulajdonságok általában módosíthatók, hozzáadhatók és törölhetők, de néhányuk csak olvasható.

Hozzáférés a JavaScript tulajdonságaihoz

Az objektum tulajdonságaihoz való hozzáférés szintaxisa a következő:

objectName.property      // person.age

vagy

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

vagy

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

A kifejezésnek egy tulajdonságnévre kell kiértékelnie.

1. példa

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

Próbálja ki Ön is →

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

2. példa

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

Próbálja ki Ön is →

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

A JavaScript for...in utasítás végigfut egy objektum tulajdonságain.

Szintaxis

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

A for...in cikluson belüli kódblokk minden tulajdonságnál egyszer végrehajtásra kerül.

Egy objektum tulajdonságainak áttekintése:

Példa

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

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

Próbálja ki Ön is →

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

Új tulajdonságok hozzáadása

Új tulajdonságokat adhat hozzá egy meglévő objektumhoz, ha egyszerűen megad egy értéket.

Tegyük fel, hogy a személy objektum már létezik - ezután új tulajdonságokat adhat neki:

Példa

person.nationality = "English";

Próbálja ki Ön is →

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

Tulajdonságok törlése

A delete kulcsszó töröl egy tulajdonságot egy objektumból:

Példa

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

delete person.age;

Próbálja ki Ön is →

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

vagy törölje a személyt["életkor"];

Példa

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

delete person["age"];

Próbálja ki Ön is →

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

A delete kulcsszó törli a tulajdonság értékét és magát a tulajdonságot is.

A törlést követően a tulajdonság nem használható fel, mielőtt újból hozzá lett volna adva.

A A delete operátort az objektumtulajdonságokon való használatra tervezték. Nincs hatása rá változók vagy függvények.

A delete operátort nem szabad előre meghatározott JavaScript objektumon használni tulajdonságait. Összeomolhatja az alkalmazást.

Beágyazott objektumok

Az objektum értékei lehetnek egy másik objektum is:

Példa

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

A beágyazott objektumokat pont vagy zárójel jelöléssel érheti el:

Példa

myObj.cars.car2;

Próbálja ki Ön is →

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

vagy:

Példa

myObj.cars["car2"];

Próbálja ki Ön is →

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

vagy:

Példa

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

Próbálja ki Ön is →

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

vagy:

Példa

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

Próbálja ki Ön is →

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

Beágyazott tömbök és objektumok

Az objektumok értékei lehetnek tömbök, a tömbök értékei pedig objektumok:

Példa

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

A tömbökön belüli tömbök eléréséhez használjon for-in hurkot minden tömbhöz:

Példa

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óbálja ki Ön is →

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

Tulajdonság tulajdonságai

Minden tulajdonságnak van neve. Ezen kívül értékük is van.

Az érték a tulajdonság egyik attribútuma.

További attribútumok: felsorolható, konfigurálható és írható.

Ezek az attribútumok határozzák meg, hogy a tulajdonság hogyan érhető el (olvasható?, van írható?)

A JavaScriptben minden attribútum olvasható, de csak az érték attribútum módosítható (és csak akkor, ha a tulajdonság írható).

(Az ECMAScript 5 rendelkezik módszerekkel az összes tulajdonság lekérésére és beállítására attribútumok)

Prototípus tulajdonságai

A JavaScript objektumok öröklik prototípusuk tulajdonságait.

A delete kulcsszó nem törli az örökölt tulajdonságokat, de ha töröl egy prototípus tulajdonság, minden objektumra hatással lesz a prototípustól örökölt.