5. Oggetti letterali
Qui, ci riferiamo agli oggetti definiti letteralmente nel codice come "oggetti letterali". JavaScript ha il concetto di classi e oggetti istanza di classe. Pertanto, questo non è il tipo di oggetto di cui stiamo discutendo ora.
5.1. script [obj-01]
Qui presentiamo le proprietà di base degli oggetti letterali. La principale è che l'oggetto viene manipolato tramite un puntatore.
'use strict';
// an empty object
const obj1={};
// object properties can be dynamically created
obj1.prop1="abcd";
console.log('obj1=',obj1);
// other property
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// another property with a different notation
obj1['prop3']=true;
console.log("obj1=",obj1);
// obj1 is a reference to the object (pointer), not the object itself
const obj2=obj1;
// obj2 and obj1 point to the same object
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
// properties can be variables
const var1='prop1';
console.log('prop1=',obj1[var1]);
Esecuzione
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-01.js"
obj1=[object Object]
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ] }
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ], prop3: true }
obj1= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
obj2= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
prop1= xyzt
Commenti
- Riga 3 del codice: un oggetto viene manipolato tramite un puntatore. Pertanto, [obj1] è un puntatore. La modifica dell'oggetto a cui punta non modifica il puntatore [obj1]. Ecco perché, come per gli array, un riferimento a un oggetto viene dichiarato utilizzando la parola chiave [const];
- Riga 6 del codice: come per gli array, [console.log] può visualizzare oggetti;
- Riga 11 del codice: obj1.prop3 può essere riscritto come obj1.[‘prop3’]. Quest’ultima notazione è utile quando ‘prop3’ è in realtà una variabile (righe 20–21);
- righe 13–18 del codice: mostrano che l'istruzione [obj2=obj1] è una copia del riferimento all'oggetto e non dell'oggetto stesso;
5.2. script [obj-02]
Questo script dimostra che le proprietà di un oggetto possono avere un oggetto come valore. Ciò porta alla creazione di oggetti multilivello. Introduciamo inoltre l'oggetto globale [JSON], che consente le conversioni da oggetto a stringa e da stringa a oggetto.
'use strict';
// a multi-level object
const personne = {
prénom: "martin",
âge: 12,
père: {
prénom: "paul",
âge: 45
},
mère: {
prénom: "micheline",
âge: 42
}
}
// access to properties
console.log("prénom personne=", personne.prénom);
console.log("prénom mère=", personne.mère.prénom);
personne.mère.âge = 40;
console.log("âge mère=", personne.mère.âge);
// console.log can display objects
console.log("personne=", personne);
console.log("mère=", personne.mère);
// you can also display the jSON string of the
let json = JSON.stringify(personne);
console.log("jSON=", json);
// you can reread the jSON
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);
Commenti
- riga 24: conversione di un oggetto JavaScript in una stringa JSON;
- riga 27: conversione di una stringa JSON in un oggetto JavaScript;
Esecuzione
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-02.js"
prénom personne= martin
prénom mère= micheline
âge mère= 40
personne= { 'prénom': 'martin',
'âge': 12,
'père': { 'prénom': 'paul', 'âge': 45 },
'mère': { 'prénom': 'micheline', 'âge': 40 } }
mère= { 'prénom': 'micheline', 'âge': 40 }
jSON= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":40}}
père= { 'prénom': 'paul', 'âge': 45 }
Commenti
- riga 10: in una stringa JSON, le proprietà devono essere racchiuse tra virgolette, così come i valori delle stringhe;
5.3. script [obj-03]
Questo script introduce il concetto di getter e setter per le proprietà di un oggetto:
'use strict';
// object getters and setters
const personne = {
// getter
get nom() {
console.log("getter nom");
return this._nom;
},
// setter
set nom(unNom) {
console.log("setter nom");
this._nom = unNom;
}
};
// setter
personne.nom = "Hercule";
// getter
console.log(personne.nom);
// the object itself
console.log("personne=", personne);
// this does not prevent direct access to property [_nom]
personne._nom = "xyz";
console.log("personne=", personne);
Commenti
- righe 5–7: definizione di un [getter], una funzione che generalmente restituisce il valore di una proprietà di un oggetto ma che in realtà può restituire qualsiasi cosa. La parola chiave [function] è sostituita dalla parola chiave [get];
- riga 7: il getter restituisce la proprietà [_name]. Si noti che questa proprietà non deve essere dichiarata;
- righe 10–13: definizione di un [setter], una funzione che generalmente assegna il valore ricevuto a una proprietà dell'oggetto, ma che in realtà può fare qualsiasi cosa. La parola chiave [function] è sostituita dalla parola chiave [set]. Il [setter] può essere utilizzato per convalidare il valore passato come parametro al [setter];
- riga 16: la funzione [set name] verrà chiamata implicitamente;
- riga 18: la funzione [get name] verrà chiamata implicitamente;
- riga 22: mostra che l'uso di getter/setter dipende dalla discrezione dello sviluppatore. Se lo sviluppatore conosce il nome della proprietà gestita da essi, può accedervi direttamente;
Esecuzione
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-03.js"
setter nom
getter nom
Hercule
personne= { nom: [Getter/Setter], _nom: 'Hercule' }
personne= { nom: [Getter/Setter], _nom: 'xyz' }
Nota righe 5–6: [console.log] visualizza anche le proprietà che sono funzioni.
5.4. script [obj-04]
Questo script mostra tre modi per scrivere i nomi delle proprietà di un oggetto e due modi per accedervi.
'use strict';
// object property names may be literal [name], surrounded by apostrophes ['name'], or may have a double quotation mark ['name']
// or quotation marks ["name"]
// literal
const obj1 = {
nom: "martin",
prénom: "jean"
};
console.log("prénom=", obj1.prénom);
// surrounded by apostrophes
const obj2 = {
'nom': "martin",
'prénom': "jean"
};
console.log("nom=", obj2.nom);
// surrounded by quotation marks
const obj3 = {
"nom": "martin",
"prénom": "jean"
};
// two possible syntaxes for accessing the [name] property
console.log("nom=", obj3.nom);
console.log("nom=", obj3['nom']);
Esecuzione
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-04.js"
prénom= jean
nom= martin
nom= martin
nom= martin
5.5. script [obj-05]
Lo script mostra che le proprietà di un oggetto letterale possono essere funzioni. Ciò è molto simile a un oggetto istanza di classe, che possiede proprietà e metodi.
'use strict';
// an object can have properties of type [function]
const personne = {
// properties
prénom: "martin",
âge: 12,
père: {
prénom: "paul",
âge: 45
},
mère: {
prénom: "micheline",
âge: 42
},
// method
toString: function () {
return JSON.stringify(this);
}
}
// use
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());
- righe 17–19: un metodo interno dell'oggetto. In questo metodo, accediamo alle proprietà dell'oggetto utilizzando la parola chiave [this] (riga 18). [this] si riferisce all'oggetto stesso, mentre [this.firstName] si riferisce alla sua proprietà [firstName];
Esecuzione
[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-05.js"
personne= { 'prénom': 'martin',
'âge': 12,
'père': { 'prénom': 'paul', 'âge': 45 },
'mère': { 'prénom': 'micheline', 'âge': 42 },
toString: [Function: toString] }
personne.toString= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":42}}
5.6. script [obj-06]
Questo script mostra come accedere alle proprietà di un oggetto quando i loro nomi non sono noti in anticipo.
'use strict';
// an object can have properties of type [function]
let personne = {
// properties
prénom: "martin",
âge: 12,
père: {
prénom: "paul",
âge: 45
},
mère: {
prénom: "micheline",
âge: 42
},
// method
toString: function () {
return JSON.stringify(this);
}
}
// use
console.log(personne);
// properties
console.log("-----------------------");
for (const key in personne) {
if (personne.hasOwnProperty(key)) {
const element = personne[key];
console.log(key, "=", element);
}
}
// to escape the eslint warning (1)
console.log("-----------------------");
for (const key in personne) {
if (Object.prototype.hasOwnProperty.call(personne, key)) {
const element = personne[key];
console.log(key, "=", element);
}
}
// to escape the eslint warning (2)
console.log("-----------------------");
for (const key in personne) {
// eslint-disable-next-line no-prototype-builtins
if (personne.hasOwnProperty(key)) {
const element = personne[key];
console.log(key, "=", element);
}
}
Commenti
- righe 26–31: il codice che recupera l'elenco delle proprietà (esclusi i metodi) di un oggetto. Questo codice genera un avviso ESLint:
- righe 32–39: il codice che ci permette di ignorare l'avviso di ESLint. Usiamo il prototipo della classe [Object];
- righe 41–47: oppure possiamo semplicemente disabilitare l'avviso (riga 43);
5.7. script [obj-07]
Lo script [obj-07] mostra come si può distruggere un oggetto:
'use strict';
// destructuring
// literal
const obj1 = {
nom: "martin",
prénom: "jean"
};
// destructuring obj1 into variables [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);
// destructure obj1 in variables [n2,p2]
function f({ nom: n2, prénom: p2 }) {
console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);
// destructuring obj1 into variables [last name,first name]
function g({ nom: nom, prénom: prénom }) {
console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);
// destructuring obj1 into variables [last name,first name]
// with shortened notation equivalent to h({name:surname,firstname:firstname})
function h({ nom, prénom }) {
console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);
Commenti
- riga 11: le parentesi graffe {} consentono la destrutturazione. La sintassi
const { nom: n, prénom: p } = obj1
crea due variabili [n] e [p] ed è equivalente a:
const n = obj1.nom
const p = obj1.prénom
La dichiarazione potrebbe essere scritta come segue:
const { nom => n, prénom => p } = obj1
per indicare che i valori degli attributi [lastName, firstName] vengono assegnati alle variabili [n, p];
- l'operazione di destrutturazione viene ripetuta alle righe 15, 21 e 28. Ogni volta, la presenza delle parentesi graffe {} indica che un oggetto verrà destrutturato in variabili;
- La riga 28 potrebbe creare confusione. È una forma abbreviata della notazione:
function h({ nom : nom, prénom : prénom })
I risultati dell'esecuzione sono i seguenti:
5.8. script [obj-08]
Lo script [obj-08] mostra come ottenere una copia di un oggetto:
'use strict'
// object cloning
const obj1 = {
nom: "martin",
prénom: "jean"
};
// clone (copy) of obj1 with the spread operator
const obj2 = { ...obj1 }
// checks
// obj2 points to a copy of obj1
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)
- riga 10: l'operazione per copiare l'oggetto [obj1]. L'operatore ... è chiamato operatore di espansione;
I risultati dell'esecuzione sono i seguenti:
- riga 1: mostra che i riferimenti [obj1] e [obj2] non puntano allo stesso oggetto;
- riga 2: mostra che l'oggetto a cui punta [obj2] è una copia dell'oggetto a cui punta [obj1];
5.9. Conclusione
Gli script in questa sezione hanno dimostrato che l'oggetto letterale JavaScript è simile all'oggetto istanza di classe nei linguaggi orientati agli oggetti. È possibile definire proprietà, metodi e getter/setter su di esso. Si tratta di un oggetto dinamico le cui proprietà possono essere definite in fase di esecuzione. Si comporta quindi come un dizionario i cui elementi possono essere di qualsiasi tipo, incluso il tipo [function].