Propriétés JavaScript

Table des matières

    Afficher la table des matières

Les propriétés constituent la partie la plus importante de tout objet JavaScript.

Propriétés JavaScript

Les propriétés sont les valeurs associées à un objet JavaScript.

Un objet JavaScript est une collection de propriétés non ordonnées.

Les propriétés peuvent généralement être modifiées, ajoutées et supprimées, mais certaines sont en lecture seule.

Accéder aux propriétés JavaScript

La syntaxe pour accéder à la propriété d'un objet est la suivante :

objectName.property      // person.age

ou

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

ou

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

L'expression doit correspondre à un nom de propriété.

Exemple 1

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

Essayez-le vous-même →

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

Exemple 2

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

Essayez-le vous-même →

<!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 pour...en boucle

L'instruction JavaScript for...in parcourt les propriétés d'un objet.

Syntaxe

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

Le bloc de code à l'intérieur de la boucle for...in sera exécuté une fois pour chaque propriété.

Parcourir les propriétés d'un objet :

Exemple

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

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

Essayez-le vous-même →

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

Ajout de nouvelles propriétés

Vous pouvez ajouter de nouvelles propriétés à un objet existant en lui donnant simplement une valeur.

Supposons que l'objet personne existe déjà - vous pouvez alors lui donner de nouvelles propriétés :

Exemple

person.nationality = "English";

Essayez-le vous-même →

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

Suppression de propriétés

Le mot clé delete supprime une propriété d'un objet :

Exemple

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

delete person.age;

Essayez-le vous-même →

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

ou supprimer la personne["âge"] ;

Exemple

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

delete person["age"];

Essayez-le vous-même →

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

Le mot-clé delete supprime à la fois la valeur de la propriété et la propriété elle-même.

Après la suppression, la propriété ne peut plus être utilisée avant d'être à nouveau ajoutée.

Le L'opérateur delete est conçu pour être utilisé sur les propriétés des objets. Cela n'a aucun effet sur variables ou fonctions.

L'opérateur delete ne doit pas être utilisé sur un objet JavaScript prédéfini. propriétés. Cela peut faire planter votre application.

Objets imbriqués

Les valeurs d'un objet peuvent être un autre objet :

Exemple

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

Vous pouvez accéder aux objets imbriqués en utilisant la notation par points ou par crochets :

Exemple

myObj.cars.car2;

Essayez-le vous-même →

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

ou :

Exemple

myObj.cars["car2"];

Essayez-le vous-même →

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

ou :

Exemple

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

Essayez-le vous-même →

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

ou :

Exemple

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

Essayez-le vous-même →

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

Tableaux et objets imbriqués

Les valeurs des objets peuvent être des tableaux, et les valeurs des tableaux peuvent être des objets :

Exemple

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

Pour accéder aux tableaux à l'intérieur des tableaux, utilisez une boucle for-in pour chaque tableau :

Exemple

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

Essayez-le vous-même →

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

Attributs de propriété

Toutes les propriétés ont un nom. En plus, ils ont aussi une valeur.

La valeur est l'un des attributs de la propriété.

Les autres attributs sont : énumérables, configurables et accessibles en écriture.

Ces attributs définissent la manière dont la propriété est accessible (est-elle lisible ?, est-ce c'est inscriptible ?)

En JavaScript, tous les attributs peuvent être lus, mais seul l'attribut value peut être lu. être modifié (et seulement si la propriété est accessible en écriture).

( ECMAScript 5 dispose de méthodes pour obtenir et définir toutes les propriétés les attributs)

Propriétés des prototypes

Les objets JavaScript héritent des propriétés de leur prototype.

Le mot-clé delete ne supprime pas les propriétés héritées, mais si vous supprimez un propriété du prototype, cela affectera tous les objets hérité du prototype.