Esercizi sugli oggetti

In questa lezione risolveremo degli esercizi sugli oggetti in JavaScript.

Continuiamo innanzitutto con l’esempio che abbiamo visto nella precedente lezione e facciamo altre operazioni, come ad esempio la cancellazione di una proprietà o l’eliminazione di un oggetto dall’array di oggetti.

Esercizi sugli oggetti – primo esercizio

Progettare un array di automobili che contiene alcuni oggetti. Ogni oggetto contiene delle proprietà: marca, modello, colore, alimentazione, anno e cavalli (quest’ultima proprietà la inseriamo solo in alcune auto).
Inserire poi alcuni dati a piacere e visualizzare con un ciclo tutti i dati. Dopo cancellare da tutte le auto la proprietà cavalli e modificare la proprietà anno solo nelle auto di colore bianco, impostando il valore a 2020.

Quindi innanzitutto costruiamo il nostro array di oggetti, come abbiamo fatto nella lezione precedente:

var auto = [
  {
    marca: 'Fiat',
    modello: '500',
    colore: 'bianco',
    alimentazione: 'benzina',
    anno: 2010,
    cavalli: 69
  },
  {
    marca: 'Fiat',
    modello: 'tipo',
    colore: 'grigio',
    alimentazione: 'diesel',
    anno: 2012,
    cavalli: 95
  },
  {
    marca: 'Porche',
    modello: 'Cayenne',
    colore: 'grigio',
    alimentazione: 'diesel',
    anno: 2019
  },
  {
    marca: 'Jeep',
    modello: 'Compass',
    colore: 'bianco',
    alimentazione: 'diesel',
    anno: 2016
  },
  {
    marca: 'Lancia',
    modello: 'Y',
    colore: 'verde',
    alimentazione: 'benzina',
    anno: 2014
  }
];

Dopo con un ciclo for sull’array auto cancelliamo la proprietà cavalli. In seguito, dopo aver controllato che il colore dell’auto sia bianco, modifichiamo l’anno in 2020.

for (var i = 0; i < auto.length; i++){
  delete auto[i].cavalli;
  if (auto[i].colore == 'bianco'){
      auto[i].anno = 2020;
  }
}

Esercizi sugli oggetti – secondo esercizio

Eliminare dall’array di oggetti precedentemente creato tutti gli oggetti con marca fiat, utilizzando un ciclo.

Possiamo eliminare gli elementi di un array in vari modi. Possiamo ad esempio utilizzare delete oppure slice. Se utilizziamo delete non variamo la lunghezza del nostro array, e al posto degli elementi verrà lasciato un posto vuoto. Se invece utilizziamo splice la lunghezza dell’array cambia ed inoltre una volta eliminato un elemento, quello successivo pernde il suo posto.

Vediamo dunque entrambe le soluzioni per questo esercizio sugli array e oggetti in JavaScript. La prima che utilizza delete è questa:

for (var i = 0; i < auto.length; i++){
  if (auto[i].marca == 'Fiat'){
    delete auto[i];
  }
}

Chiaramente senza ciclo conoscendo l’array potevo anche scrivere:

delete auto[0];
delete auto[1];

Ma immaginate un array con tantissimi oggetti, sarebbe impensabile utilizzare questo metodo.

Risolviamo adesso lo steso algoritmo utilizzando splice.

Per eliminare tutti gli elementi che soddisfano quel criterio parto dalla fine dell’array, dato che questo metodo, dopo l’eliminazione, sposta l’elemento successivo in quello precedente.

Ecco dunque il codice completo:

var lunghezza = auto.length - 1;

for (var i = lunghezza; i >= 0; i--){
  if (auto[i].marca == 'Fiat'){
    auto.splice(auto[i],1);
  }
}

Al posto di inserire auto.splice(auto[i],1), si può determinare anche la posizione dell’indice in questo modo:

for (var i = lunghezza; i >= 0; i--){
  var index = auto.indexOf(auto[i]);
  if (auto[i].marca == 'Fiat'){
    auto.splice(index,1);
  }
}

In questa lezione ho proposto dei semplici esercizi sugli oggetti in JavaScript, nelle prossime lezioni continueremo ancora ad esercitarci.

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale