Oggetti e ciclo for in

In questa lezione parleremo di oggetti e del ciclo for in in JavaScript, risolvendo alcuni semplici esercizi.

Esercizio su oggetti e ciclo for in

Progettare un array automobili che contiene alcuni oggetti e ogni oggetto contiene delle proprietà, ad esempio: marca, modello, alimentazione, tipo, colore, anno.
Inserire poi alcuni dati a piacere e visualizzare con un ciclo tutti i dati. Dopo visualizzare le caratteristiche solo delle auto a benzina. Poi visualizzare solo la marca ed il modello delle auto dell’anno 2014 o superiore. Infine visualizzare le auto che non sono di colore bianco.

Innanzitutto costruiamo il nostro array di oggetti in JavaScript, inserendo alcuni valori:

var auto = [
  {
    marca: 'Fiat',
    modello: '500',
    colore: 'bianco',
    alimentazione: 'benzina',
    anno: 2010
  },
  {
    marca: 'Fiat',
    modello: 'tipo',
    colore: 'grigio',
    alimentazione: 'diesel',
    anno: 2012
  },
  {
    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
  }
];

Adesso visualizziamo tutti i dati con un ciclo for che serve semplicemente a scorrere tutti gli elementi dell’array.

for (var i = 0; i < auto.length; i++){
  console.log(auto[i]);
}

Se vogliamo poi visualizzare singolarmente gli elementi di ciascun oggetto possiamo anche fare in questo modo:

for (var i = 0; i < auto.length; i++){
  console.log('oggetto ' + i);
  for (var k in auto[i]){
    console.log(auto[i][k]);
  }
}

Quindi per ciascun oggetto realizzo un ciclo for in che stampa tutte le proprietà.

Adesso dobbiamo visualizzare tutti i dati ma delle soli auto a benzina, dunque agiamo in questo modo:

for (var i = 0; i < auto.length; i++){
  if (auto[i].alimentazione == 'benzina'){
    for (var k in auto[i]){
      console.log(auto[i][k]);
    }
  }
}

Quindi controllo semplicemente che il valore dell’oggetto che ha la proprietà alimentazione contenga il valore benzina. Se è così allora stampo tutti gli elementi.

Per visualizzare solo la marca ed il modello delle auto dell’anno 2014 o superiore devo utilizzare un’altra istruzione condizionale.

In questo caso non mi serve il for in in quanto conosco già le proprietà che devo andare a stampare quindi posso scrivere semplicemente in questo modo.

for (var i = 0; i < auto.length; i++){
  if (auto[i].anno >= 2014){
      console.log(auto[i]['marca'] + ' ' + auto[i]['modello']);
  }
}

Ho dunque utilizzato soltanto il ciclo for.

Adesso dobbiamo visualizzare tutte le proprietà delle auto che hanno il colore diverso dal bianco. Dunque similmente a prima scrivo:

for (var i = 0; i < auto.length; i++){
  if (auto[i].colore != 'bianco'){
    for (var k in auto[i]){
      console.log(auto[i][k]);
    }
  }
}

In questa lezione abbiamo illustrato un semplice esempio di utilizzo degli oggetti e del ciclo for in, nelle prossime lezione proporrò altri esempi.

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

Come creare PDF con JavaScript

PDF da un form con JavaScript

Proprietà di un PDF con JavaScript

Libreria jsPDF