Come leggere le proprietà degli oggetti JavaScript?

Nel precedente articolo abbiamo parlato degli Oggetti in JavaScript. Oggi vediamo come richiamare i valori delle varie proprietà.

I valori di un oggetto possono essere recuperati racchiudendo una stringa tra parentesi quadre ([ ]). Se la stringa è un nome JavaScript valido e non è una parola riservata, puoi utilizzare la dot-notation ..

dog["name"] // "Argo"
dog.age     // 1

Se la stringa non è un nome di proprietà valido, viene restituito undefined:

dog.breed // undefined

Per avere dei valori di default è possibile utilizzare l'operatore ||:

var breed = dog.breed || "meticcio";

Perché utilizzare la notazione con le parentesi quadre? Quando i nomi delle proprietà contengono degli spazi, è l'unica soluzione:

dog["gioco preferito"] // "nodo di corda"

Le parentesi quadre possono essere utilizzate anche utilizzare variabili come nomi di proprietà:

var prop = "name";
dog.prop  // undefined
dog[prop] // "Argo"

Gli oggetti in JavaScript: introduzione

Il tipo Object è uno dei più utilizzati in JavaScript.

Un Object in JavaScript è semplicemente un insieme di proprietà, in cui ogni proprietà è una coppia chiave-valore

Ci sono due modi per creare un'istanza di Object. Il primo metodo è quello di utilizzare l'operatore new con Object come costruttore:

var dog = new Object();
dog.name = 'Argo';
dog.age = 1;

L'altro metodo è quello di utilizzare la notazione object literal. Grazie a questa notazione è possibile creare facilmente oggetti con molte proprietà. L'esempio che segue crea lo stesso oggetto dell'esempio precedente:

var dog = {
    name: 'Argo',
    age: 1
};

L'object literal inizia con una parentesi graffa aperta, poi c'è la proprietà name, seguita dai due punti, seguiti dal valore della proprietà. Per separare le proprietà di un oggetto viene utilizzata una virgola, che però non deve essere inserita dopo l'ultima proprietà-

I nomi delle proprietà possono essere anche specificati come stringhe (anzi, è necessario in caso di parole chiave, oppure nomi contenenti spazi):

var dog = {
    "name": "Argo",
    "age": 1
}

È anche possibile creare un oggetto vuoto:

var dog = {}; // Identico a new Object

Come creare una funzione con parametri in JavaScript?

Nell'ultimo articolo ti ho spiegato come creare una funzione in JavaScript. Le funzioni in JavaScript possono accettare dei parametri, che possono essere utilizzati per influenzare il comportamento della funzione.

Come passare dei parametri ad una funzione?

Ti basta dichiarare i parametri tra le parentesi tonde alla dichiarazione della funzione. All'invocazione, passa i valori che vuoi utilizzare:

function saluta(nome) {
    return "Ciao, " + nome;
}

saluta("Giustino");
// "Ciao, Giustino"

Come creare una funzione in JavaScript?

Problema

Vuoi creare una funzione in JavaScript, ovvero un blocco di codice da poter riutilizzare a tuo piacimento.

Soluzione

Crea una funzione utilizzando l'istruzione function:

function salutaMondo() {
    alert("Hello, World");
}

sempliceFunzione();

Approfondimento

Una funzione creata utilizzando la parloa chiave function è chiamata static function. La struttura di base è:

function nomefunzione() {
    // istruzione 1
    // istruzione 2
    // ecc.
}

Puoi dare alla funzione un qualsiasi nome valido per le variabili in JavaScript. Però, dato che le funzioni effettuano un'azione, è comune inserire un verbo nel nome, come nell'esempio salutaMondo.

Esercizi

1.Sapresti scrivere una funzione che effettua la somma di due numeri?

Eliminare gli spazi da una stringa in JavaScript

Problema

Vuoi eliminare gli spazi iniziali e finali da una stringa.

Soluzione

Utilizza il metodo trim:

var stringa_con_spazi = "      ciccio       ";
var stringa_senza_spazi = stringa_con_spazi.trim(); // "ciccio"

Discussione

Questo metodo è stato introdotto in ECMAScript5: prima era necessario utilizzare le espressioni regolari ed il metodo replace per poter effettuare la stessa operazione.

Tutti i browser moderni supportano il metodo trim: l'unica eccezione è Internet Explorer 8. Se dovesse essere necessario supportare questo browser, puoi integrare nel tuo codice una funzione di fallback, tipo la seguente:

if (typeof String.trim === "undefined") {
    String.prototype.trim = function() {
        //(^\s*) -> tutti gli spazi all'inizio, zero o più volte
        //(\s*$) -> tutti gli spazi alla fine, zero o più volte
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }
}

Una volta eseguito questo codice, potrai utilizzare il metodo trim come per ogni altra stringa.

Con ECMAScript5 sono stati introdotti anche i metodi trimLeft e trimRight che eliminano gli spazi a sinistra e a destra, rispettivamente.

Come suddividere una stringa in JavaScript?

Problema

Hai una stringa composta da varie parole, separate da virgole. Vuoi dividere la stringa nelle singole parole.

Soluzione

Usa il metodo split sulla stringa.

var stringa = "uno, due, tre, quattro, cinque";
var lista = stringa.split(',');

console.log(lista); 
// ["uno", " due", " tre", " quattro", " cinque"]

Discussione

Il metodo split prende in ingresso due parametri: un primo parametro obbligatorio che rappresenta il separatore (ovvero in base a quale carattere suddividere la stringa) ed un secondo parametro opzionale che indica il numero di divisioni da eseguire. Ad esempio, potremmo scrivere:

var stringa = "uno, due, tre, quattro, cinque";
var lista = stringa.split(',', 2);

console.log(lista); 
// ["uno", " due"]

split può essere utilizzato per suddividere una stringa in singoli caratteri: basta semplicemente passare la stringa vuota come primo parametro:

"divisione".split(""); 
//["d", "i", "v", "i", "s", "i", "o", "n", "e"]

Estrarre una sottostringa in JavaScript

Problema

Hai una stringa da cui vuoi estrarre una porzione delimitata da < e >.

Soluzione

Utilizzando il metodo indexOf puoi recuperare l'indice del carattere < e quello del carattere >. Poi puoi passare questi due indici al metodo substring per estrarre la stringa.

var frase = "Sai che 4 > 3? Queste sono le <cose che sto scrivendo> in questa frase."

var inizio = frase.indexOf('<');
var fine = frase.indexOf('>', inizio+1);

var extract = frase.substring(inizio+1, fine);

Discussione

La porzione di stringa che vogliamo estrarre è delimitata dai caratteri < >. Nella prima ricerca il metodo indexOf è utilizzato senza il secondo parametro. Nella seconda ricerca invece, il secondo parametro (che denota l'indice da cui comincia la ricerca) è necessario, altrimenti il metodo avrebbe restituito l'indice del primo >.

Una volta recuperati gli indici dell'inizio e della fine della sottostringa, utilizziamo il metodo substring per l'estrazione. Il primo parametro è l'indice del primo carattere da estrarre, il secondo parametro rappresenta l'ultimo.