JS Istruzioni condizionali es3 by @AurelianoDC - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<h4>Titolo di intestazione di quarto livello
<label>Mostrare un testo di etichetta per un elemento di input.
idIdentifica univocamente un elemento HTML
<head>Tag primario di un documento HTML
<object>Incorpora risorse varie nella pagina web.
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

FORM PROF DA PROVARE

Analizzatore Exif

curricculum Nicola Pochiero

Lola Harrel CSS Styling Assignment

JS Elementi del linguaggio es2

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

//3. Utilizza un ciclo for per stampare i numeri da 1 a 10. Poi usa un ciclo while per fare lo stesso.

//Utilizzando un ciclo for:
console.log("Utilizzando un ciclo for:");
for (let i = 1; i <= 10; i++) {
    console.log(i);
}

//Utilizzando un ciclo while:
console.log("Utilizzando un ciclo while:");
let j = 1;
while (j <= 10) {
    console.log(j);
    j++;
}

//Entrambi i codici stamperanno i numeri da 1 a 10. Il ciclo for è più adatto quando si conosce il numero esatto di iterazioni, mentre il ciclo while è utile quando si vuole eseguire un'iterazione fino a quando una condizione specifica è vera. Entrambi i modi sono validi e possono essere utilizzati a seconda delle esigenze del tuo programma.

//Utilizzando un ciclo do-while:
console.log("Utilizzando un ciclo do-while:");
let k = 1;
do {
    console.log(k);
    k++;
} while (k <= 10);

//Utilizzando un ciclo for-in per attraversare un array di numeri:
console.log("Utilizzando un ciclo for-in:");
let numeriA = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let index in numeriA) {
    console.log(numeriA[index]);
}

//Tuttavia, è importante notare che l'utilizzo di for-in per attraversare gli array può non essere sempre la scelta migliore, in quanto potrebbe non mantenere l'ordine degli elementi dell'array e potrebbe includere anche le proprietà non numeriche dell'oggetto. Solitamente, for-in è più adatto per attraversare gli oggetti JavaScript piuttosto che gli array. Per attraversare un array, l'utilizzo di for o forEach è solitamente preferibile.

//Un esempio di come utilizzare il ciclo for...of per iterare su un array e stampare i numeri da 1 a 10:

console.log("Utilizzando un ciclo for...of:");

// Definiamo un array di numeri da 1 a 10
let numeriB = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Utilizziamo il ciclo for...of per iterare su ogni elemento dell'array e stampare i numeri
for (var numero of numeriB) {
    console.log(numero);
}

//Il ciclo for...of è una costruzione introdotta in ECMAScript 2015 (ES6) e fornisce un modo più semplice e leggibile per iterare su oggetti iterabili come gli array. In questo esempio, per ogni iterazione del ciclo, la variabile numero assume il valore di ogni elemento dell'array numeri, quindi viene stampato.

//***************************
//Altri metodi per ciclare
//***************************

//Metodo forEach(): 
//Il metodo forEach() viene utilizzato per eseguire una funzione per ogni elemento di un array. È un metodo più moderno e leggibile per attraversare gli array rispetto al ciclo for tradizionale. Ecco un esempio:
let numeriC = [1, 2, 3, 4, 5];
//Funzione Anonima
numeriC.forEach(function(numero) {
    console.log("Ciclare con il forEach FA: "+numero);
});
//Arrow Function
numeriC.forEach(numero => {
    console.log("Ciclare con il forEach AF: "+numero);
});


//Metodo map(): 
//Il metodo map() crea un nuovo array applicando una funzione a ciascun elemento di un array esistente. È simile a forEach(), ma restituisce un nuovo array con i risultati delle chiamate alla funzione. Ecco un esempio:
let numeriD = [1, 2, 3, 4, 5];
//Funzione Anonima
let numeriRaddoppiati = numeriD.map(function(numero) {
    return numero * 2;
});
//Arrow function
let numeriRaddoppiatiAF = numeriD.map(numero => numero * 2);
//In questo caso, poiché la funzione di callback per il metodo map() ha solo una riga di codice che restituisce il risultato della moltiplicazione, puoi utilizzare un'arrow function senza parentesi graffe e senza la parola chiave return per semplificare la sintassi.

console.log("Ciclare con metodo Map FA: "+numeriRaddoppiati); // Output: [2, 4, 6, 8, 10]
console.log("Ciclare con metodo Map AF: "+numeriRaddoppiatiAF); // Output: [2, 4, 6, 8, 10]


//Metodo filter():
// Il metodo filter() crea un nuovo array con tutti gli elementi che superano il test implementato dalla funzione fornita. Ecco un esempio:
let numeriE = [1, 2, 3, 4, 5];
//Funzione anonima
let numeriPari = numeriE.filter(function(numero) {
    return numero % 2 === 0;
});
//Arrow Function
let numeriPariAF = numeriE.filter(numero => numero % 2 === 0);
//Nel caso di una funzione di callback per il metodo filter(), poiché c'è solo una riga di codice che restituisce un valore booleano (senza parentesi graffe), puoi semplificare ulteriormente utilizzando un'arrow function senza le parentesi graffe e senza la parola chiave return.

console.log("Numeri Pari Metodo Filter FA: "+numeriPari); // Output: [2, 4]
console.log("Numeri Pari Metodo Filter AF: "+numeriPariAF); // Output: [2, 4]

//Metodo reduce(): Il metodo reduce() esegue una funzione su ciascun elemento dell'array, risultando in un singolo valore di output. È utile per eseguire calcoli aggregati come somma, media, conteggio, ecc. Ecco un esempio:
let numeriF = [1, 2, 3, 4, 5];
//Funzione anonima
let somma = numeriF.reduce(function(accumulatore, numero) {
    return accumulatore + numero;
}, 0); 
//Arrow function
let sommaAF = numeriF.reduce((accumulatore, numero) => accumulatore + numero, 0);
//In un'arrow function senza parentesi graffe {}, l'espressione a destra della freccia => viene considerata implicitamente come il valore di ritorno della funzione. Quindi, in questo caso, puoi omettere return e scrivere l'espressione direttamente dopo la freccia.

console.log("Somma metodo Reduce FA: "+somma); // Output: 15
console.log("Somma metodo Reduce AF: "+sommaAF); // Output: 15


//*********************************
//FUNZIONI ANONIME
//*********************************

//Nell'esempi precedenti, le funzioni passate come argomenti ai metodi forEach(), map(), filter() e reduce() sono funzioni anonime. Le funzioni anonime sono definite senza un nome specifico e possono essere definite direttamente all'interno del codice, senza la necessità di assegnarle a una variabile.

// //Funzione anonima passata a forEach():
// numeriC.forEach(function(numero) {
//     console.log(numero);
// });
// //Funzione anonima passata a map():
// let numeriRaddoppiati = numeriD.map(function(numero) {
//     return numero * 2;
// });
// //Funzione anonima passata a filter():
// let numeriPari = numeriE.filter(function(numero) {
//     return numero % 2 === 0;
// });
// //Funzione anonima passata a reduce():
// let somma = numeriF.reduce(function(accumulatore, numero) {
//     return accumulatore + numero;
// }, 0);
//Queste funzioni anonime vengono eseguite durante l'iterazione degli elementi dell'array da parte dei rispettivi metodi. La sintassi per definire una funzione anonima è function() { ... }, dove ... rappresenta il corpo della funzione.


//***********************************************
// ARROW FUNCTION e FUNZIONI ANONIME A CONFRONTO
//***********************************************

// Sintassi:

// Le funzioni anonime utilizzano la parola chiave function seguita da parentesi tonde per i parametri e parentesi graffe {} per il corpo della funzione.
// Le arrow function utilizzano una sintassi più concisa con una freccia =>. Possono avere una sintassi compatta senza la necessità di utilizzare la parola chiave function e possono avere una forma più compatta se hanno un solo argomento e una sola espressione.

// Legame del contesto this:

// Nelle funzioni anonime, il valore di this dipende da come viene chiamata la funzione e può variare in base al contesto.
// Nelle arrow function, il valore di this è acquisito dal contesto circostante al momento della definizione della funzione e rimane lo stesso all'interno della funzione, indipendentemente da come viene chiamata.

// Compatibilità con ECMAScript:

// Le funzioni anonime sono state presenti in JavaScript fin dall'inizio e sono compatibili con tutte le versioni di ECMAScript.
// Le arrow function sono state introdotte in ECMAScript 6 (ES6) e non sono supportate da versioni precedenti di JavaScript.


//Ecco come si confrontano le due sintassi:
// Funzione anonima
let anonima = function(parametro) {
    return parametro * 2;
};

// Arrow function
let arrow = parametro => parametro * 2;

//Entrambi i modi sono utilizzati per definire funzioni senza un nome specifico, ma le arrow function offrono una sintassi più concisa e un comportamento diverso per quanto riguarda il legame del contesto this.

//Ecco una breve spiegazione della tecnica utilizzata per trasformare le funzioni anonime in arrow function:

//Sintassi più breve: Le arrow function forniscono una sintassi più breve rispetto alle funzioni anonime tradizionali.

//Eliminazione delle parentesi graffe: Se il corpo della funzione consiste in una singola espressione, è possibile eliminare le parentesi graffe {} e la parola chiave return, se presente.

//Rimozione di function: La parola chiave function viene sostituita con una freccia => che indica che la funzione è una arrow function.

//Possibilità di omittere le parentesi tonde: Se la funzione ha un solo parametro, è possibile omettere le parentesi tonde () intorno al parametro.

//Un esempio di trasformazione:
let array=[];

//Funzione anonima tradizionale:
array.forEach(function(element) {
    console.log(element);
});

//Arrow function:
array.forEach(element => console.log(element));

//In questo esempio, abbiamo eliminato function, sostituito le parentesi graffe con una singola istruzione console.log(element), e utilizzato una freccia => per definire la funzione. Se ci fosse più di un parametro, o se non ci fosse alcun parametro, dovremmo mantenere le parentesi tonde () intorno ai parametri.