Egenskaper är den viktigaste delen av alla JavaScript-objekt.
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.
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.
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>
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-satsen for...in
går igenom egenskaperna för ett objekt.
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:
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>
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:
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>
Nyckelordet delete
tar bort en egenskap från ett objekt:
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"];
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.
Värden i ett objekt kan vara ett annat objekt:
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:
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:
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:
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:
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>
Värden i objekt kan vara arrayer och värden i arrayer kan vara objekt:
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:
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>
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)
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.