ES6 - Objekte

JavaScript unterstützt die Erweiterung von Datentypen. JavaScript-Objekte sind eine großartige Möglichkeit, benutzerdefinierte Datentypen zu definieren.

Ein objectist eine Instanz, die eine Reihe von Schlüsselwertpaaren enthält. Im Gegensatz zu primitiven Datentypen können Objekte mehrere oder komplexe Werte darstellen und sich über ihre Lebensdauer ändern. Die Werte können skalare Werte oder Funktionen oder sogar ein Array anderer Objekte sein.

Die syntaktischen Variationen zum Definieren eines Objekts werden weiter diskutiert.

Objektinitialisierer

Objekte haben wie die primitiven Typen eine wörtliche Syntax: curly bracesv({und}). Es folgt die Syntax zum Definieren eines Objekts.

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

Der Inhalt eines Objekts wird aufgerufen properties (oder Mitglieder) und Eigenschaften bestehen aus a name (oder Schlüssel) und value. Eigenschaftsnamen müssen Zeichenfolgen oder Symbole sein, und Werte können von jedem Typ sein (einschließlich anderer Objekte).

Wie bei allen JavaScript-Variablen wird sowohl beim Objektnamen (der eine normale Variable sein kann) als auch beim Eigenschaftsnamen zwischen Groß- und Kleinschreibung unterschieden. Sie greifen mit einer einfachen Punktnotation auf die Eigenschaften eines Objekts zu.

Im Folgenden finden Sie die Syntax für den Zugriff auf Objekteigenschaften.

objectName.propertyName

Beispiel: Objektinitialisierer

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())

Das obige Beispiel definiert eine Objektperson. Das Objekt hat drei Eigenschaften. Die dritte Eigenschaft bezieht sich auf eine Funktion.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Tom 
Hanks 
Hello!!

Wenn Sie in ES6 einen Eigenschaftswert zuweisen, der einem Eigenschaftsnamen entspricht, können Sie den Eigenschaftswert weglassen.

Beispiel

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

Das obige Code-Snippet definiert ein Objekt baz. Das Objekt hat eine Eigenschaftfoo. Der Eigenschaftswert wird hier weggelassen, da ES6 den Wert der Variablen foo implizit dem Schlüssel foo des Objekts zuweist.

Es folgt das ES5-Äquivalent des obigen Codes.

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

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

bar

Mit dieser Kurzsyntax sucht die JS-Engine im enthaltenen Bereich nach einer Variablen mit demselben Namen. Wenn es gefunden wird, wird der Wert dieser Variablen der Eigenschaft zugewiesen. Wird es nicht gefunden, wird ein Referenzfehler ausgelöst.

Der Object () -Konstruktor

JavaScript bietet eine spezielle Konstruktorfunktion namens Object()um das Objekt zu bauen. Mit dem neuen Operator wird eine Instanz eines Objekts erstellt. Um ein Objekt zu erstellen, folgt auf den neuen Operator die Konstruktormethode.

Es folgt die Syntax zum Definieren eines Objekts.

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

Es folgt die Syntax für den Zugriff auf eine Eigenschaft.

Object_name.property_key                    
OR              
Object_name["property_key"]

Beispiel

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"])

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Ford 
Mustang 
1987

Nicht zugewiesene Eigenschaften eines Objekts sind nicht definiert.

Beispiel

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

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

undefined

Note- Ein Objekteigenschaftsname kann eine beliebige gültige JavaScript-Zeichenfolge sein oder alles, was in eine Zeichenfolge konvertiert werden kann, einschließlich der leeren Zeichenfolge. Auf jeden Eigenschaftsnamen, der keine gültige JavaScript-Kennung ist (z. B. ein Eigenschaftsname, der ein Leerzeichen oder einen Bindestrich enthält oder mit einer Zahl beginnt), kann jedoch nur mit der eckigen Klammer zugegriffen werden.

Auf Eigenschaften kann auch mithilfe eines Zeichenfolgenwerts zugegriffen werden, der in einer Variablen gespeichert ist. Mit anderen Worten, der Eigenschaftsschlüssel des Objekts kann ein dynamischer Wert sein. Zum Beispiel: eine Variable. Das besagte Konzept ist im folgenden Beispiel dargestellt.

Beispiel

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

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Ford

Konstruktorfunktion

Ein Objekt kann mit den folgenden zwei Schritten erstellt werden:

Step 1 - Definieren Sie den Objekttyp durch Schreiben einer Konstruktorfunktion.

Es folgt die Syntax dafür.

function function_name() { 
   this.property_name = value 
}

Das ‘this’ Das Schlüsselwort bezieht sich auf das aktuell verwendete Objekt und definiert die Eigenschaft des Objekts.

Step 2 - Erstellen Sie eine Instanz des Objekts mit der neuen Syntax.

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

Object_name.property_name

Das neue Schlüsselwort ruft den Funktionskonstruktor auf und initialisiert die Eigenschaftsschlüssel der Funktion.

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)

Im obigen Beispiel wird ein Funktionskonstruktor verwendet, um ein Objekt zu definieren.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Ford 
F123

Eine neue Eigenschaft kann immer zu einem zuvor definierten Objekt hinzugefügt werden. Betrachten Sie beispielsweise das folgende Codefragment:

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

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Ford 
F123

Die Object.create-Methode

Objekte können auch mit dem erstellt werden Object.create()Methode. Sie können den Prototyp für das gewünschte Objekt erstellen, ohne eine Konstruktorfunktion definieren zu müssen.

Beispiel

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

Das obige Beispiel definiert eine Objektrolle und legt die Standardwerte für die Eigenschaften fest. Es werden zwei neue Instanzen erstellt, die den Standardeigenschaftswert für das Objekt überschreiben.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Admin 
Guest

Die Object.assign () -Funktion

Das Object.assign()Mit dieser Methode werden die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt kopiert. Das Zielobjekt wird zurückgegeben.

Es folgt die Syntax dafür.

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

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

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);

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

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

Note- Im Gegensatz zum Kopieren von Objekten verwaltet das größere Objekt beim Zusammenführen von Objekten keine neue Kopie der Eigenschaften. Vielmehr enthält es den Verweis auf die in den Originalobjekten enthaltenen Eigenschaften. Das folgende Beispiel erläutert dieses Konzept.

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);

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

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

Eigenschaften löschen

Sie können eine Eigenschaft mit dem Löschoperator entfernen. Der folgende Code zeigt, wie Sie eine Eigenschaft entfernen.

Beispiel

// 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"

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

false

Das Code-Snippet löscht die Eigenschaft aus dem Objekt. Das Beispiel gibt false aus, da der Operator in die Eigenschaft im Objekt nicht findet.

Objekte vergleichen

In JavaScript sind Objekte ein Referenztyp. Zwei unterschiedliche Objekte sind niemals gleich, selbst wenn sie dieselben Eigenschaften haben. Dies liegt daran, dass sie auf eine völlig andere Speicheradresse verweisen. Nur die Objekte, die eine gemeinsame Referenz haben, ergeben beim Vergleich true.

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

Im obigen Beispiel ist val1 und val2sind zwei verschiedene Objekte, die sich auf zwei verschiedene Speicheradressen beziehen. Daher gibt der Operator beim Vergleich auf Gleichheit false zurück.

Example 2 − Single Object Reference

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

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

Im obigen Beispiel wird der Inhalt in val1 val2 zugewiesen, dh die Referenz der Eigenschaften in val1 wird mit val2 geteilt. Da die Objekte jetzt den Verweis auf die Eigenschaft gemeinsam nutzen, gibt der Gleichheitsoperator für zwei unterschiedliche Objekte, die auf zwei verschiedene Speicheradressen verweisen, true zurück. Daher gibt der Operator beim Vergleich auf Gleichheit false zurück.

Objektdestrukturierung

Der Begriff destructuringbezieht sich auf das Aufbrechen der Struktur einer Entität. Die Destrukturierungszuweisungssyntax in JavaScript ermöglicht das Extrahieren von Daten aus Arrays oder Objekten in verschiedene Variablen. Das gleiche ist im folgenden Beispiel dargestellt.

Beispiel 1

Bei der Destrukturierung eines Objekts müssen die Variablennamen und die Objekteigenschaftsnamen übereinstimmen.

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

Die Ausgabe des obigen Codes erfolgt wie folgt:

Prijin
7.2
7.2
student_name Prijin

Beispiel 2

Wenn sich die Variable und die Zuweisung in zwei verschiedenen Schritten befinden, wird die Syntax des destrukturierenden Objekts von umgeben () wie im Beispiel gezeigt ({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>

Die Ausgabe des obigen Codes erfolgt wie unten erwähnt -

20
1001
2000
0.1

Beispiel 3

Das folgende Beispiel zeigt destructuring Verwendung der rest operator und wie man verschachtelte Objekte zerstört.

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

Die Ausgabe des obigen Codes erfolgt wie unten erwähnt -

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