Contenuto principale
Ripasso: Oggetti
Questo è un ripasso di ciò che abbiamo visto nel tutorial sugli oggetti.
Esistono molti tipi di valori che possiamo memorizzare nelle variabili in JavaScript, e a volte vogliamo memorizzare un gruppo di valori correlati tra loro: ecco dove entrano in gioco gli oggetti!
Un oggetto è un tipo di dati che ci permette di archiviare un insieme di proprietà in una singola variabile. Per creare un oggetto, dichiariamo una variabile come faremmo normalmente e poi usiamo le parentesi graffe per raggruppare le coppie proprietà-valore:
var objectName = {
propertyName: propertyValue,
propertyName: propertyValue,
...
};Ecco un oggetto che descrive Winston: questo oggetto ha due proprietà,
hometown e hair, e i valori delle proprietà sono stringhe:var aboutWinston = {
hometown: "Mountain View, CA",
hair: "no"
};Ecco un oggetto più complesso che descrive un gatto, con quattro proprietà:
age, furColor, likes, e birthday.var lizzieTheCat = {
age: 18,
furColor: "grey",
likes: ["catnip", "milk"],
birthday: {"month": 7, "day": 17, year: 1994}
};Puoi notare che ciascuna proprietà memorizza un tipo di dato diverso:
age memorizza un numero, furColor memorizza una stringa, likes memorizza un array, e birthday memorizza un altro oggetto. Ecco la cosa davvero forte degli oggetti (beh, una delle cose davvero forti): possono memorizzare altri oggetti al loro interno! Quindi puoi avere oggetti annidati in più livelli per descrivere dati complessi.A volte vedrai oggetti dichiarati utilizzando le virgolette per racchiudere i nomi delle proprietà, come:
var aboutWinston = {
"hometown": "Mountain View, CA",
"hair": "no"
};Questo è equivalente a ciò che abbiamo scritto prima senza le virgolette, ma ci vuole di più a digitarlo. L'unica volta in cui devi assolutamente usare le virgolette è se il nome della proprietà contiene uno spazio, come:
var aboutWinston = {
"his hair": "none"
};Qui dobbiamo usare le virgolette perché altrimenti l'interprete di JavaScript si potrebbe confondere. Ecco il mio consiglio: semplicemente, non usare lo spazio dentro ai nomi delle proprietà! Così non sarai mai costretto a usare le virgolette intorno ai nomi delle proprietà.
Accedere alle proprietà di un oggetto
Un oggetto non è utile a meno che non siamo in grado di guardare all'interno di esso e usare i valori delle sue diverse proprietà. Possiamo farlo in due modi: in primo luogo, utilizzando ciò che chiamiamo "notazione puntata", dove si scrive il nome della variabile, seguito da un "." e poi dal nome della proprietà:
var aboutWinston = {
hometown: "Mountain View, CA",
hair: "no"
};
text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + aboutWinston.hair + " hair", 100, 150);Possiamo anche usare la "notazione con le parentesi quadre", che è simile a come accediamo agli elementi di un array. Scriviamo il nome della variabile, poi le parentesi quadre con il nome della proprietà all'interno delle virgolette:
var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];Se proviamo ad accedere a una proprietà che non esiste, vedremo "undefined":
text("Winston's life goal is " + aboutWinston.lifeGoal, 100, 150);Modificare le proprietà di un oggetto
Proprio come quando archiviamo altri tipi di dati nelle variabili, possiamo cambiare i valori delle proprietà dell'oggetto in qualsiasi momento durante un programma, usando la notazione puntata o quella con le parentesi quadre:
aboutWinston.hair = "curly"; // Winston ora ha una parrucca!Possiamo anche aggiungere proprietà completamente nuove!
aboutWinston.lifeGoal = "teach JavaScript";Se abbiamo finito con una proprietà, possiamo eliminarla (ma la maggior parte delle volte probabilmente cambieremo solo il suo valore):
delete aboutWinston.hair;Array di oggetti
Ora che conosci sia gli array che gli oggetti, puoi combinarli per creare array di oggetti, che in realtà è un modo davvero utile per memorizzare dei dati nei programmi. Ad esempio, un array di gatti:
var myCats = [
{name: "Lizzie",
age: 18},
{name: "Daemon",
age: 1}
];
for (var i = 0; i < myCats.length; i++) {
var myCat = myCats[i];
println(myCat.name + ' is ' + myCat.age + ' years old.');
}Puoi notare che scorriamo un array di oggetti esattamente nello stesso modo in cui scorriamo un array di numeri o di stringhe, utilizzando un ciclo for. All'interno di ogni iterazione, accediamo all'elemento corrente dell'array usando la notazione con le parentesi quadre, e poi accediamo alle proprietà di quell'elemento dell'array (che è un oggetto) con la notazione puntata.
Ecco un altro esempio pratico che potresti utilizzare nei tuoi programmi, ovvero un array di coordinate per la posizione:
var positions = [
{x: 200, y: 100},
{x: 200, y: 200},
{x: 200, y: 300}
];
for (var i = 0; i < positions.length; i++) {
var position = positions[i];
ellipse(position.x, position.y, 100, 100);
}Abbastanza carino, eh? Gli oggetti possono crearti confusione all'inizio, ma se continui a utilizzarli, alla fine diventerai dipendente e trasformerai tutto in un oggetto!
Vuoi unirti alla conversazione?
Ancora nessun post.