38.4 FOR OF

Pubblicato il di

Un altro metodo per fare un loop ad un array con un ciclo è il metodo FOR OF. Possiamo trasformare un ciclo for in modo più semplice con for of ed è utilizzabile per tutti gli elementi iterabili di js tipo un array, una map, un set. Vediamo l’esempio con un array, partiamo da questo codice HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="CICLO FOR ESEMPIO">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="for.css" rel="stylesheet" type="text/css">
    <title>for</title>
</head>
<body>
<div class="main">
    <h1>Programming languages</h1>
    <form id="dati">

    </form>
</div>
<script src="for.js"></script>
</body>
</html>

un po’ di stile

html{
    background:#000;
    color: #fff;
    font-family: Helvetica;
}
h1{
    color :green;
}

adesso passiamo al js, abbiamo questo array

let progLanguages =['C','C++','JAVA','PYTHON','SWIFT','PHP','C SHARP'];

andiamo a memorizzare nella variabile formId l’elemento del <form> con id dati, tramiti getElementById

let formId = document.getElementById('dati');

Inizializziamo queste 3 variabili di servizio

let cont = 0;
let totLang = progLanguages.length;
let htmlContent = '';

ora cicliamo l’array con il ciclo for per inserire il contenuto HTML nel form inserendo anche dei checkbox

for (;cont < totLang; cont ++){
    htmlContent += '<div><input type="checkbox" value="'+progLanguages[cont]+'">'+progLanguages[cont]+'</div>';
}

Infine inseriamo il contenuto con innerHTML

formId.innerHTML = htmlContent;

Vediamo lo stesso esempio utilizzando il for of,  inserito da jsES6 prima di tutto iniziamo col for in cui dobbiamo dichiarare una variabile che andrà a prendere il contenuto dell’array seguito dalla keyword of e l’array interessato

for ( let variabileDiServizio of arrayDaIterare );

nel nostro esempio:

for ( let program of progLanguages ) { ... }

ad ogni iterazione la variabile program prenderà il contenuto di ogni valore dell’array progLanguages

for ( let program of progLanguages ) {
    htmlContent += '<div><input type="checkbox" value="' + program +'">' + program + '</div>';
}

l’effetto finale è lo stesso, ma la leggibilità del codice è migliorata.

For of è da utilizzare solo quando ci interessano solo i valori dell’array e non la chiave.