ES6 - Oggetti

JavaScript supporta l'estensione dei tipi di dati. Gli oggetti JavaScript sono un ottimo modo per definire tipi di dati personalizzati.

Un objectè un'istanza che contiene un insieme di coppie di valori chiave. A differenza dei tipi di dati primitivi, gli oggetti possono rappresentare valori multipli o complessi e possono cambiare nel corso della loro durata. I valori possono essere valori o funzioni scalari o anche array di altri oggetti.

Le variazioni sintattiche per la definizione di un oggetto vengono discusse ulteriormente.

Inizializzatori di oggetti

Come i tipi primitivi, gli oggetti hanno una sintassi letterale: curly bracesv({e}). Di seguito è riportata la sintassi per la definizione di un oggetto.

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

Vengono chiamati i contenuti di un oggetto properties (o membri) e le proprietà sono costituite da un file name (o chiave) e value. I nomi delle proprietà devono essere stringhe o simboli e i valori possono essere di qualsiasi tipo (inclusi altri oggetti).

Come tutte le variabili JavaScript, sia il nome dell'oggetto (che potrebbe essere una variabile normale) che il nome della proprietà fanno distinzione tra maiuscole e minuscole. Si accede alle proprietà di un oggetto con una semplice notazione a punti.

Di seguito è riportata la sintassi per accedere alle proprietà degli oggetti.

objectName.propertyName

Esempio: inizializzatori di oggetti

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'esempio sopra, definisce un oggetto persona. L'oggetto ha tre proprietà. La terza proprietà si riferisce a una funzione.

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Tom 
Hanks 
Hello!!

In ES6, assegnando un valore di proprietà che corrisponde a un nome di proprietà, è possibile omettere il valore di proprietà.

Esempio

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

Lo snippet di codice precedente definisce un oggetto baz. L'oggetto ha una proprietàfoo. Il valore della proprietà viene omesso qui poiché ES6 assegna implicitamente il valore della variabile foo alla chiave dell'oggetto foo.

Di seguito è riportato l'equivalente ES5 del codice precedente.

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

bar

Con questa sintassi abbreviata, il motore JS cerca nell'area contenitore una variabile con lo stesso nome. Se viene trovato, il valore di quella variabile viene assegnato alla proprietà. Se non viene trovato, viene generato un errore di riferimento.

Il costruttore Object ()

JavaScript fornisce una speciale funzione di costruzione chiamata Object()per costruire l'oggetto. Il nuovo operatore viene utilizzato per creare un'istanza di un oggetto. Per creare un oggetto, il nuovo operatore è seguito dal metodo del costruttore.

Di seguito è riportata la sintassi per la definizione di un oggetto.

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

Di seguito è riportata la sintassi per accedere a una proprietà.

Object_name.property_key                    
OR              
Object_name["property_key"]

Esempio

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Ford 
Mustang 
1987

Le proprietà non assegnate di un oggetto non sono definite.

Esempio

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

undefined

Note- Il nome di una proprietà di un oggetto può essere qualsiasi stringa JavaScript valida o qualsiasi cosa che possa essere convertita in una stringa, inclusa la stringa vuota. Tuttavia, è possibile accedere a qualsiasi nome di proprietà che non sia un identificatore JavaScript valido (ad esempio, un nome di proprietà che contiene uno spazio o un trattino o che inizia con un numero) utilizzando la notazione delle parentesi quadre.

È inoltre possibile accedere alle proprietà utilizzando un valore stringa memorizzato in una variabile. In altre parole, la chiave della proprietà dell'oggetto può essere un valore dinamico. Ad esempio: una variabile. Il suddetto concetto è illustrato nel seguente esempio.

Esempio

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Ford

Funzione costruttore

Un oggetto può essere creato utilizzando i seguenti due passaggi:

Step 1 - Definire il tipo di oggetto scrivendo una funzione di costruzione.

Di seguito è riportata la sintassi per lo stesso.

function function_name() { 
   this.property_name = value 
}

Il ‘this’ parola chiave si riferisce all'oggetto corrente in uso e definisce la proprietà dell'oggetto.

Step 2 - Crea un'istanza dell'oggetto con la nuova sintassi.

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

Object_name.property_name

La nuova parola chiave richiama il costruttore della funzione e inizializza le chiavi di proprietà della funzione.

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'esempio precedente utilizza un costruttore di funzioni per definire un oggetto.

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Ford 
F123

È sempre possibile aggiungere una nuova proprietà a un oggetto definito in precedenza. Ad esempio, considera il seguente frammento di codice:

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Ford 
F123

Il metodo Object.create

Gli oggetti possono anche essere creati utilizzando il Object.create()metodo. Ti permette di creare il prototipo per l'oggetto che desideri, senza dover definire una funzione di costruzione.

Esempio

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'esempio precedente definisce un oggetto-ruoli e imposta i valori predefiniti per le proprietà. Vengono create due nuove istanze che sovrascrivono il valore delle proprietà predefinite per l'oggetto.

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Admin 
Guest

La funzione Object.assign ()

Il Object.assign()viene utilizzato per copiare i valori di tutte le proprietà enumerabili da uno o più oggetti di origine a un oggetto di destinazione. Restituirà l'oggetto di destinazione.

Di seguito è riportata la sintassi per lo stesso.

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

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

Note- A differenza della copia di oggetti, quando gli oggetti vengono uniti, l'oggetto più grande non mantiene una nuova copia delle proprietà. Piuttosto contiene il riferimento alle proprietà contenute negli oggetti originali. Il seguente esempio spiega questo concetto.

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

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

Eliminazione delle proprietà

È possibile rimuovere una proprietà utilizzando l'operatore di eliminazione. Il codice seguente mostra come rimuovere una proprietà.

Esempio

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

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

false

Lo snippet di codice elimina la proprietà dall'oggetto. L'esempio visualizza false poiché l'operatore in non trova la proprietà nell'oggetto.

Confronto di oggetti

In JavaScript, gli oggetti sono un tipo di riferimento. Due oggetti distinti non sono mai uguali, anche se hanno le stesse proprietà. Questo perché indicano un indirizzo di memoria completamente diverso. Solo quegli oggetti che condividono un riferimento comune restituiscono vero al confronto.

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

Nell'esempio sopra, val1 e val2sono due oggetti distinti che fanno riferimento a due diversi indirizzi di memoria. Quindi nel confronto per l'uguaglianza, l'operatore restituirà false.

Example 2 − Single Object Reference

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

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

Nell'esempio sopra, il contenuto in val1 è assegnato a val2, cioè il riferimento delle proprietà in val1 è condiviso con val2. Poiché gli oggetti ora condividono il riferimento alla proprietà, l'operatore di uguaglianza restituirà true per due oggetti distinti che fanno riferimento a due diversi indirizzi di memoria. Quindi nel confronto per l'uguaglianza, l'operatore restituirà false.

Destrutturazione di oggetti

Il termine destructuringsi riferisce alla rottura della struttura di un'entità. La sintassi di assegnazione destrutturante in JavaScript rende possibile estrarre dati da array o oggetti in variabili distinte. Lo stesso è illustrato nel seguente esempio.

Esempio 1

Durante la destrutturazione di un oggetto, i nomi delle variabili e dei nomi delle proprietà dell'oggetto devono corrispondere.

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

L'output del codice sopra sarà come mostrato di seguito -

Prijin
7.2
7.2
student_name Prijin

Esempio 2

Se la variabile e l'assegnazione si trovano in due fasi diverse, la sintassi dell'oggetto destrutturante sarà circondata da () come mostrato nell'esempio ({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>

L'output del codice sopra sarà come indicato di seguito -

20
1001
2000
0.1

Esempio 3

L'esempio seguente mostra destructuring usando il rest operator e come distruggere gli oggetti annidati.

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

L'output del codice sopra sarà come indicato di seguito -

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