Javascript e la modellazione degli array: ovvero quando non sai quale GM invitare al prossimo torneo di scacchi che si terrà a Nocera Ombrosa

seo specialist umbria

web developer UmbriaGli armadi e i cassetti in essi contenuti pieni di dati che formano un array si possono analizzare, modellare e modificare dinamicamente. Javascript mette a disposizioni molti metodi utili per individuare elementi di un array, separarli, aggiungere dati e rimuoverli in cima o in testa all’ armadio etc etc. Si tratta di prendere familiarità con questi metodi prima di poter dare una risposta alla domanda del titolo nella nostra esercitazione finale: posso invitare qualche GM al mio prossimo torneo di scacchi ma quali tra loro mi assicurà più risonanza pubblicitaria visto che devo ospitarli a mie spese? Vedremo di affrontare questa spinosa questione nella parte finale, al momento limitiamoci a risolvere questioni secondarie, mattoni che se risolti consentono di mettere in piedi autentici grattacieli. Primo quesito: come faccio a stampare i dati a video? Evocando il nome dell’ array dal nostro metodo di stampa.

// inizio script

var numeri= [12, 6, 9, 32, 14, 9, 5];

document.write(numeri);
document.write(“<br><br>”);

in questo modo a browser vedrò tutta la mia lista di soldatini allineati partendo da INDICE ZERO. Se volessi sapere quale indice contrassegna per esempio l’informazione racchiusa nel numero nove, posso capire in quale cassetto di memoria ho archiviato il nostro dato? Si usando il metodo dell’ oggetto array indexOf

document.write(“Indice di 9 … “+numeri.indexOf(9));
document.write(“<br><br>”);

in questo modo dopo aver mandato in esecuzione il codice a video ottengo due, visto che si inizia a contare da zero quindi vedrò il mio bel Indice di 9 … 2 come risultato finale. E se dovessi cercare l’indice di un dato inesistente?

document.write(“Indice di 87 … “+numeri.indexOf(87));
document.write(“<br><br>”);

riceverei un bel -1 come risposta che equivale a falso. Se volessi separare tutto il contenuto dei cassetti con un separatore come faccio? Usando il metodo join:

document.write(numeri.join(” ; “));
document.write(“<br><br>”);

in questo modo ottengo 12 ; 6 ; 9 ; 32 ; 14 ; 9 ; 5. Ipotizziamo ora di trovarci nella necessità di aggiungere un elemento all’ inizio del nostro array, come faccio? Usando il metodo unshift

numeri.unshift(77);
document.write(numeri);
document.write(“<br><br>”);

ottenendo 77,12,6,9,32,14,9,5

e se volessi rimuovere l’ultimo elemento inserito lo posso fare? Si con shift()

numeri.shift();
document.write(numeri);
document.write(“<br><br>”);

tornando alle condizioni originarie con 12,6,9,32,14,9,5 Ma posso anche concatenare delle stringhe? Certo con concat:

var altroNumeri = [112, 99, 7, 28];
document.write(numeri.concat(altroNumeri));
document.write(“<br><br>”);

ottenendo a video: 12,6,9,32,14,9,5,112,99,7,28

e se volessi filtrare i dati che so magari tirare fuori solo i numeri pari che una volta divisi per due danno come resto zero? Uso il metodo filter in combinazione con l’operatore matematico %:

pari = numeri.filter(function(e) {return e%2 == 0; });
document.write(pari);
document.write(“<br><br>”);

per ottenere a video 12,6,32,14 . E se volessi raddoppiare il valore dell’ array di partenza?

raddoppiati = numeri.map(function(e) {return e*2; });
document.write(raddoppiati);
document.write(“<br><br>”);

ottenendo a video 24,12,18,64,28,18,10 rispetto all’ originale 12,6,9,32,14,9,5 . Se volessi invertire i valori dell’ array lo posso fare con il metodo reverse():

document.write(numeri.reverse());
document.write(“<br><br>”);

ottenendo a video 5,9,14,32,9,6,12 . Con le ultime versioni di ecma script abbiamo anche includes per capire se un elemento esiste o meno, utilizza il booleano per dire se un numero esiste con TRUE oppure no (False)

document.write(numeri.includes(32));
document.write(“<br><br>”);

darà vero , mentre

document.write(numeri.includes(329));
document.write(“<br><br>”);

stamperà falso. A questo punto dobbiamo investigare il modo in cui questi dati vengono ciclati e con quali numerose risorse messe a disposizione da JS. Vediamo quindi il caso di partenza di un ciclo normale con while e stampa verticale con l’aggiunta del tag <br>:

var numeri = [12, 6, 9, 32, 14, 9, 5];
document.write(numeri);
document.write(“<br><br>”);

che stamperà a video quello visto sopra cioé 12,6,9,32,14,9,5 . Per mettere in moto il ciclo utilizzo una variabile contatore da incrementare in sincronia con l’operatore di incremento ++ che faràù scorrere tutto l’array fino a quando si verificherà la condizione di false, ossia quando la lunghezza degli elementi finisce:

cont = 0;
while (cont<numeri.length)
document.write(numeri[cont++]+”<br>”);
document.write(“<br><br>”);

A video vedrò quello di cui sopra solamente esteso verticalmente

Avrei anche potuto scrivere diversamente usando la formula classica inizializzazione, condizione incremento usando FOR al posto del WHILE:

for (i=0; i<numeri.length; i++)
document.write(numeri[i]+”<br>”);
document.write(“<br><br>”);

e nel browser vedrei quanto sopra, oppure per tottenere lo stesso risultato potrei semplificarmi ulteriormente la vita con:

for (n in numeri)
document.write(numeri[n]+”<br>”);
document.write(“<br><br>”);

per ottenere lo stesso effetto o ancora sempre con lo stesso scopo:

for (n of numeri)
document.write(n+”<br>”);
document.write(“<br><br>”);

e se proprio mi sento un purista del codice potrei ciclare il tutto su una riga di codice usando una e ad indicare l’elemento da scorrere come argomento di una funzione:

numeri.forEach( function(e){document.write(e+”<br>”);} );

insomma a questo punto possiamo tornare alla nostra questione iniziale. Sono l’organizzatore di un grande torneod i scacchi e per dare risonanza all’ evento posso far soggiornare a mie spese tre forti GM che serviranno a creare risonanza pubblicitaria, con quale criterio scelgo questi fortunati nomi? Supponiamo di avere questo array di nome grandimaestri che contiene al suo interno il nominativo e il cv di conoscenze che li hanno resi famosi:

var grandimaestri= [
{ nominativo:”Magnus Carlsen”,
competenze: “aperture indiane, partita di re, partita ortodossa”},
{ nominativo:”Ivan Sbrodolov”,
competenze: “berlinese”},
{ nominativo:”Michele Godena”,
competenze: “svesnikov, arcangelo, partita di donna”},
{ nominativo:”Miriam Rossi”,
competenze: “owen”},
{ nominativo:”Eva Bianchi”,
competenze: “pirc”},
{ nominativo:”Fabiano Caruana”,
competenze: “benoni, francese, reti”},
];

ora supponiamo che vogliamo invitare solo i grandi maestri che hanno più conoscenze consolidate nell’ ambito della teoria delle aperture e che decidessimo di invitare solo quei giocatori famosi per conoscere almeno tre aperture diverse. Va da sè che chi nel nostro elenco ha solo una competenza verrà automaticamente scartato dalla nostra selezione, quindi applicherò filtri e cicli per risolvere il dilemma, mi creerò una variabile contenitore battezzata selezionati e applicando un metodo filter tipico dell’ oggetto array andrò a farmi ritornare il valore dell’ argomento e (che sta per elemento dell’ array) splittato da una virgola e che segua il criterio dell’ almeno tre competenze:

selezionati = grandimaestri.filter(
function (e)
{
return e.competenze.split(“,”).length>=3;
}
);

dopodichè usando i cicli visti in precedenza posso stampare a video questi fortunati per contattarli:

selezionati.forEach(
function(e)
{
document.write(e.nominativo+”<br>”);
}
);

mandando in esecuzione a video il nostro script mi ritroverò la soluzione di tutti i miei dilemmi esistenziali, ossia le tre persone da contattare per invitarle a giocare il nostro torneo pagando loro le spese di soggiorno, dopo aver escluso quei GM che avevano poche competenze nel loro curriculum vitae:

Magnus Carlsen
Michele Godena
Fabiano Caruana

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: