Articolo di base sui loop in Javascript. Concetti, tipi di cicli, comportamenti ed esempi.

Loop

I loop sono una funzionalità di programmazione che ci aiuta a eseguire ripetutamente un'istruzione di codice o a passare attraverso una struttura di dati, tra gli altri casi.

La maggior parte dei loop sono controllati da variabili e condizioni. Queste condizioni ci aiuteranno ad avere un migliore controllo sul loop ed evitare possibili loop infiniti (un fattore da considerare).

Capire i loop

Per avere una migliore comprensione dei cicli, possiamo vederlo nel seguente diagramma di flusso, dove un'espressione verrà valutata e ripetuta più volte secondo i criteri stabiliti.

Nell'esempio, sullo schermo verrà stampato un numero, che a sua volta verrà aggiunto dall'unità in ogni iterazione, raggiungendo il numero 100.

Notando che la maggior parte dei cicli valuta una condizione che deve essere soddisfatta per eseguire l'istruzione. Queste valutazioni vengono attivate da booleani, dove se la condizione è vera esegue l'istruzione e se è falsa il ciclo viene chiuso.

Dichiarazioni di cicli

In Javascript ci sono diversi modi per definire un ciclo, notando che nel corso degli anni sono state aggiunte sempre più funzionalità attorno ad essi.

Ecco i diversi modi per utilizzare i loop in Javascript:

• per.
• per dentro.
• per di.
• per ciascuno.
• mentre

Per

Il ciclo "for" è un ciclo che ripete un blocco di codice in base a 3 espressioni definite nel momento in cui viene dichiarato.

for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

• Espressione 2 : Definisce la condizione per eseguire il blocco di codice. Se la condizione è soddisfatta, il blocco viene eseguito, altrimenti il ​​ciclo viene interrotto.
• Espressione 3 : viene eseguita ogni volta che il blocco di codice è stato eseguito. Questa espressione viene comunemente utilizzata per aggiornare le variabili definite nell'espressione 1.

for (let i = 1; i <= 5; i++) {
  console.log("the number is " + i);
}

// -- Result --
// the number is 1
// the number is 2
// the number is 3
// the number is 4
// the number is 5

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// -- Result --
// a: 1
// b: 2
// c: 3

Il ciclo "for of" è un ciclo che itera su tipi di dati che appartengono alla categoria degli iterabili, come oggetti, array o insiemi, ottenendo il loro valore.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// -- Result --
// 10
// 20
// 30

Il ciclo "for each" è un ciclo semplificato espresso in modo dichiarativo e funzionale. Funziona tramite callback e appartiene al set di strumenti dell'array.

const array1 = ['a', 'b', 'c'];

array1.forEach(function(element){
  console.log(element);
});
// -- Result --
// "a"
// "b"
// "c"

Il ciclo "while" è un ciclo che itera finché una condizione è vera.

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}
// -- Result --
// 1
// 2
// 3
// 4
// 5

Le istruzioni "break" e "continue" sono strumenti forniti dal linguaggio per interrompere o continuare l'esecuzione di un ciclo. Queste sentenze svolgono il ruolo di supporto per alcuni casi in cui dobbiamo intervenire nel ciclo nella sua esecuzione.

Rompere

L'istruzione "break" interrompe il ciclo e termina la sua esecuzione.

let fruits = ["apple", "orange", "lemon"];
let fruitToSearch = "orange";

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  if (fruit === fruitToSearch) {
    console.log(`has been found the ${fruit}`);
    break;
  }
  console.log(`The fruit ${fruit} don't match with ${fruitToSearch}`)
}
// -- Result --
// The fruit apple don't match with orange
// has been found the orange

L'istruzione "continue" ignora il codice successivo all'interno del ciclo, passando all'iterazione successiva.

let fruits = ["apple", "orange", "lemon"];

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  console.log(`The fruit is ${fruit}`);
  continue;
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
}
// -- Result --
// The fruit is apple
// The fruit is orange
// The fruit is lemon

Ci sono alcune raccomandazioni per utilizzare diversi tipi di cicli a seconda della casistica da affrontare. Ma le raccomandazioni generali possono essere le seguenti:

• Se conosciamo esattamente il numero di elementi e istruzioni da iterare, si consiglia di utilizzare il ciclo "for". Altrimenti, usa il ciclo "while".
• Se hai bisogno di conoscere le proprietà di un particolare oggetto, usa il ciclo "for in".
• Se è necessario eseguire un'operazione aggiuntiva basata su un input di funzione già definito, è un'ottima opzione utilizzare "Per ciascuno".
• Casistica generale e semplicità nell'uso di “Per di”.

Loop risorse in javascript

• Guida generale per i loop
• Guida generale per
• Guida generale per in
• Guida generale per di
• Guida generale per ciascuno
• Guida generale mentre

Se hai bisogno di ulteriore aiuto, contattami .

• ✉️ Inviami una mail
• Contattami su LinkedIn
• Contattami su Twitter