Eigenschaften sind der wichtigste Teil jedes JavaScript-Objekts.
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.
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.
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>
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>
Die JavaScript-Anweisung for...in
durchläuft die Eigenschaften eines Objekts.
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:
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>
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:
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>
Das Schlüsselwort delete
löscht eine Eigenschaft aus einem Objekt:
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;
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.
Werte in einem Objekt können ein anderes Objekt sein:
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:
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 :
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 :
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 :
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>
Werte in Objekten können Arrays sein, und Werte in Arrays können Objekte sein:
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:
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>
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)
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.