JavaScript-Eigenschaften


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Eigenschaften sind der wichtigste Teil jedes JavaScript-Objekts.


JavaScript-Eigenschaften

Eigenschaften sind die Werte, die einem JavaScript-Objekt zugeordnet sind.

Ein JavaScript-Objekt ist eine Sammlung ungeordneter Eigenschaften.

Eigenschaften können normalerweise geändert, hinzugefügt und gelöscht werden, einige sind jedoch schreibgeschützt.


Zugreifen auf JavaScript-Eigenschaften

Die Syntax für den Zugriff auf die Eigenschaft eines Objekts lautet:

objectName.property      // person.age

oder

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

oder

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

Der Ausdruck muss einen Eigenschaftsnamen ergeben.

Beispiel 1

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

Probieren Sie es selbst aus →

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

Beispiel 2

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

Probieren Sie es selbst aus →

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

Die JavaScript-Anweisung for...in durchläuft die Eigenschaften eines Objekts.

Syntax

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

Der Codeblock innerhalb der for...in-Schleife wird einmal für jede Eigenschaft ausgeführt.

Durchlaufen der Eigenschaften eines Objekts:

Beispiel

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

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

Probieren Sie es selbst aus →

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

Neue Eigenschaften hinzufügen

Sie können einem vorhandenen Objekt neue Eigenschaften hinzufügen, indem Sie ihm einfach einen Wert zuweisen.

Gehen Sie davon aus, dass das Personenobjekt bereits existiert - Sie können ihm dann neue Eigenschaften zuweisen:

Beispiel

person.nationality = "English";

Probieren Sie es selbst aus →

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

Eigenschaften löschen

Das Schlüsselwort delete löscht eine Eigenschaft aus einem Objekt:

Beispiel

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

delete person.age;

Probieren Sie es selbst aus →

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

oder Person["Alter"] löschen;

Beispiel

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

delete person["age"];

Probieren Sie es selbst aus →

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

Das Schlüsselwort delete löscht sowohl den Wert der Eigenschaft als auch die Eigenschaft selbst.

Nach dem Löschen kann die Eigenschaft nicht mehr verwendet werden, bevor sie wieder hinzugefügt wird.

Der Der delete-Operator ist für die Verwendung auf Objekteigenschaften konzipiert. Es hat keine Auswirkungen auf Variablen oder Funktionen.

Der delete-Operator sollte nicht für vordefinierte JavaScript-Objekte verwendet werden Eigenschaften. Es kann Ihre Anwendung zum Absturz bringen.


Verschachtelte Objekte

Werte in einem Objekt können ein anderes Objekt sein:

Beispiel

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

Sie können auf verschachtelte Objekte mithilfe der Punktnotation oder der Klammernotation zugreifen:

Beispiel

myObj.cars.car2;

Probieren Sie es selbst aus →

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

oder :

Beispiel

myObj.cars["car2"];

Probieren Sie es selbst aus →

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

oder :

Beispiel

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

Probieren Sie es selbst aus →

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

oder :

Beispiel

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

Probieren Sie es selbst aus →

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

Verschachtelte Arrays und Objekte

Werte in Objekten können Arrays sein, und Werte in Arrays können Objekte sein:

Beispiel

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

Um auf Arrays innerhalb von Arrays zuzugreifen, verwenden Sie für jedes Array eine For-In-Schleife:

Beispiel

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

Probieren Sie es selbst aus →

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

Eigenschaftsattribute

Alle Eigenschaften haben einen Namen. Darüber hinaus haben sie auch einen Wert.

Der Wert ist eines der Attribute der Eigenschaft.

Weitere Attribute sind: aufzählbar, konfigurierbar und beschreibbar.

Diese Attribute definieren, wie auf die Eigenschaft zugegriffen werden kann (ist sie lesbar?, ist ist es beschreibbar?)

In JavaScript können alle Attribute gelesen werden, jedoch nur das Wertattribut geändert werden (und nur, wenn die Eigenschaft beschreibbar ist).

( ECMAScript 5 verfügt über Methoden zum Abrufen und Festlegen aller Eigenschaften Attribute)


Prototypeigenschaften

JavaScript-Objekte erben die Eigenschaften ihres Prototyps.

Das Schlüsselwort delete löscht keine geerbten Eigenschaften, aber wenn Sie eine löschen Wenn Sie die Prototypeigenschaft verwenden, wirkt sie sich auf alle Objekte aus vom Prototyp geerbt.