Vlastnosti JavaScriptu

Obsah

Zobrazit obsah

Vlastnosti jsou nejdůležitější součástí jakéhokoli objektu JavaScriptu.

Vlastnosti JavaScriptu

Vlastnosti jsou hodnoty spojené s objektem JavaScriptu.

Objekt JavaScriptu je kolekce neuspořádaných vlastností.

Vlastnosti lze obvykle měnit, přidávat a mazat, ale některé jsou pouze pro čtení.

Přístup k vlastnostem JavaScriptu

Syntaxe pro přístup k vlastnosti objektu je:

objectName.property      // person.age

nebo

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

nebo

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

Výraz se musí vyhodnotit jako název vlastnosti.

Příklad 1

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

Zkuste to sami →

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

Příklad 2

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

Zkuste to sami →

<!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 pro...in Loop

Příkaz for...in JavaScriptu prochází vlastnosti objektu.

Syntax

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

Blok kódu uvnitř cyklu for...in bude proveden jednou pro každou vlastnost.

Procházení vlastností objektu:

Příklad

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

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

Zkuste to sami →

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

Přidání nových vlastností

K existujícímu objektu můžete přidat nové vlastnosti pouhým zadáním hodnoty.

Předpokládejme, že objekt osoby již existuje - pak mu můžete dát nové vlastnosti:

Příklad

person.nationality = "English";

Zkuste to sami →

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

Mazání vlastností

Klíčové slovo delete odstraní vlastnost z objektu:

Příklad

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

delete person.age;

Zkuste to sami →

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

nebo odstranit osobu["věk"];

Příklad

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

delete person["age"];

Zkuste to sami →

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

Klíčové slovo delete odstraní hodnotu vlastnosti i samotnou vlastnost.

Po odstranění nelze vlastnost použít, dokud nebude znovu přidána.

The Operátor delete je navržen pro použití ve vlastnostech objektu. Nemá to vliv na proměnné nebo funkce.

Operátor delete by se neměl používat na předdefinovaný objekt JavaScript vlastnosti. Může dojít k pádu vaší aplikace.

Vnořené objekty

Hodnoty v objektu mohou být jiným objektem:

Příklad

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

K vnořeným objektům můžete přistupovat pomocí tečkové notace nebo závorky:

Příklad

myObj.cars.car2;

Zkuste to sami →

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

nebo:

Příklad

myObj.cars["car2"];

Zkuste to sami →

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

nebo:

Příklad

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

Zkuste to sami →

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

nebo:

Příklad

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

Zkuste to sami →

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

Vnořená pole a objekty

Hodnoty v objektech mohou být pole a hodnoty v polích mohou být objekty:

Příklad

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

Chcete-li získat přístup k polím uvnitř polí, použijte pro každé pole smyčku for-in:

Příklad

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

Zkuste to sami →

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

Vlastnosti vlastnosti

Všechny vlastnosti mají svůj název. Kromě toho mají také hodnotu.

Hodnota je jedním z atributů vlastnosti.

Další atributy jsou: vyčíslitelný, konfigurovatelný a zapisovatelný.

Tyto atributy definují, jak lze k vlastnosti přistupovat (je čitelná?, je dá se to napsat?)

V JavaScriptu lze číst všechny atributy, ale pouze atribut value být změněn (a pouze pokud je vlastnost zapisovatelná).

( ECMAScript 5 má metody pro získání i nastavení všech vlastností atributy)

Vlastnosti prototypu

Objekty JavaScriptu dědí vlastnosti svého prototypu.

Klíčové slovo delete nesmaže zděděné vlastnosti, ale pokud smažete vlastnost prototypu, ovlivní všechny objekty zděděné od prototypu.