ES6 - Objets

JavaScript prend en charge l'extension des types de données. Les objets JavaScript sont un excellent moyen de définir des types de données personnalisés.

Un objectest une instance qui contient un ensemble de paires clé / valeur. Contrairement aux types de données primitifs, les objets peuvent représenter des valeurs multiples ou complexes et peuvent changer au cours de leur vie. Les valeurs peuvent être des valeurs scalaires ou des fonctions ou même un tableau d'autres objets.

Les variations syntaxiques pour définir un objet sont discutées plus loin.

Initialiseurs d'objets

Comme les types primitifs, les objets ont une syntaxe littérale: curly bracesv({et}). Voici la syntaxe pour définir un objet.

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

Le contenu d'un objet est appelé properties (ou membres), et les propriétés se composent d'un name (ou clé) et value. Les noms de propriété doivent être des chaînes ou des symboles et les valeurs peuvent être de n'importe quel type (y compris d'autres objets).

Comme toutes les variables JavaScript, le nom de l'objet (qui peut être une variable normale) et le nom de la propriété sont sensibles à la casse. Vous accédez aux propriétés d'un objet avec une simple notation par points.

Voici la syntaxe pour accéder aux propriétés de l'objet.

objectName.propertyName

Exemple: initialiseurs d'objets

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

L'exemple ci-dessus, définit une personne objet. L'objet a trois propriétés. La troisième propriété fait référence à une fonction.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Tom 
Hanks 
Hello!!

Dans ES6, en attribuant une valeur de propriété qui correspond à un nom de propriété, vous pouvez omettre la valeur de propriété.

Exemple

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

L'extrait de code ci-dessus définit un objet baz. L'objet a une propriétéfoo. La valeur de la propriété est omise ici car ES6 assigne implicitement la valeur de la variable foo à la clé de l'objet foo.

Voici l'équivalent ES5 du code ci-dessus.

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

bar

Avec cette syntaxe abrégée, le moteur JS recherche dans la portée conteneur une variable du même nom. Si elle est trouvée, la valeur de cette variable est affectée à la propriété. S'il n'est pas trouvé, une erreur de référence est renvoyée.

Le constructeur Object ()

JavaScript fournit une fonction de constructeur spéciale appelée Object()pour construire l'objet. L'opérateur new est utilisé pour créer une instance d'un objet. Pour créer un objet, l'opérateur new est suivi de la méthode constructeur.

Voici la syntaxe pour définir un objet.

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

Voici la syntaxe pour accéder à une propriété.

Object_name.property_key                    
OR              
Object_name["property_key"]

Exemple

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Ford 
Mustang 
1987

Les propriétés non attribuées d'un objet ne sont pas définies.

Exemple

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

undefined

Note- Un nom de propriété d'objet peut être n'importe quelle chaîne JavaScript valide ou tout ce qui peut être converti en chaîne, y compris la chaîne vide. Cependant, tout nom de propriété qui n'est pas un identifiant JavaScript valide (par exemple, un nom de propriété comportant un espace ou un trait d'union, ou qui commence par un nombre) n'est accessible qu'en utilisant la notation entre crochets.

Les propriétés sont également accessibles à l'aide d'une valeur de chaîne stockée dans une variable. En d'autres termes, la clé de propriété de l'objet peut être une valeur dynamique. Par exemple: une variable. Ledit concept est illustré dans l'exemple suivant.

Exemple

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Ford

Fonction constructeur

Un objet peut être créé en utilisant les deux étapes suivantes -

Step 1 - Définissez le type d'objet en écrivant une fonction constructeur.

Voici la syntaxe pour le même.

function function_name() { 
   this.property_name = value 
}

le ‘this’ Le mot clé fait référence à l'objet en cours d'utilisation et définit la propriété de l'objet.

Step 2 - Créez une instance de l'objet avec la nouvelle syntaxe.

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

Le nouveau mot-clé appelle le constructeur de la fonction et initialise les clés de propriété de la fonction.

Example − Using a Function Constructor

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

L'exemple ci-dessus utilise un constructeur de fonction pour définir un objet.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Ford 
F123

Une nouvelle propriété peut toujours être ajoutée à un objet précédemment défini. Par exemple, considérez l'extrait de code suivant -

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Ford 
F123

La méthode Object.create

Les objets peuvent également être créés à l'aide du Object.create()méthode. Il vous permet de créer le prototype de l'objet que vous souhaitez, sans avoir à définir une fonction constructeur.

Exemple

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

L'exemple ci-dessus définit un objet -roles et définit les valeurs par défaut des propriétés. Deux nouvelles instances sont créées qui remplacent la valeur des propriétés par défaut de l'objet.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Admin 
Guest

La fonction Object.assign ()

le Object.assign()est utilisée pour copier les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Il renverra l'objet cible.

Voici la syntaxe pour le même.

Object.assign(target, ...sources)

Example − Cloning an Object

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Tom 
E1001

Example − Merging Objects

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Note- Contrairement à la copie d'objets, lorsque les objets sont fusionnés, l'objet plus grand ne conserve pas une nouvelle copie des propriétés. Il contient plutôt la référence aux propriétés contenues dans les objets d'origine. L'exemple suivant explique ce concept.

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

Supprimer des propriétés

Vous pouvez supprimer une propriété à l'aide de l'opérateur de suppression. Le code suivant montre comment supprimer une propriété.

Exemple

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

false

L'extrait de code supprime la propriété de l'objet. L'exemple imprime false car l'opérateur in ne trouve pas la propriété dans l'objet.

Comparaison d'objets

En JavaScript, les objets sont un type de référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes propriétés. C'est parce qu'ils pointent vers une adresse mémoire complètement différente. Seuls les objets qui partagent une référence commune donnent vrai lors de la comparaison.

Example 1 − Different Object References

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

Dans l'exemple ci-dessus, val1 et val2sont deux objets distincts qui font référence à deux adresses mémoire différentes. Par conséquent, lors de la comparaison pour l'égalité, l'opérateur retournera faux.

Example 2 − Single Object Reference

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

Dans l'exemple ci-dessus, le contenu de val1 est affecté à val2, c'est-à-dire que la référence des propriétés de val1 est partagée avec val2. Étant donné que les objets partagent désormais la référence à la propriété, l'opérateur d'égalité retournera true pour deux objets distincts qui font référence à deux adresses mémoire différentes. Par conséquent, lors de la comparaison pour l'égalité, l'opérateur retournera faux.

Déstructuration d'objets

Le terme destructuringfait référence à la rupture de la structure d'une entité. La syntaxe d'affectation de déstructuration en JavaScript permet d'extraire des données de tableaux ou d'objets dans des variables distinctes. La même chose est illustrée dans l'exemple suivant.

Exemple 1

Lors de la déstructuration d'un objet, les noms des variables et les noms des propriétés de l'objet doivent correspondre.

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>

La sortie du code ci-dessus sera comme vu ci-dessous -

Prijin
7.2
7.2
student_name Prijin

Exemple 2

Si la variable et l'affectation sont en deux étapes différentes, la syntaxe de l'objet de déstructuration sera entourée de () comme le montre l'exemple ({rollno} = student) -

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // destructuring to already declared variable
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // assign default values to variables

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

20
1001
2000
0.1

Exemple 3

L'exemple ci-dessous montre destructuring en utilisant le rest operator et comment détruire les objets imbriqués.

<script>
   // rest operator with object destructuring
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //nested objects
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai