Impara l'informatica con JavaScript parte 3, cicli

introduzione

Supponiamo che ti sia stato assegnato il compito di scrivere un programma che visualizza i numeri 1-100. Un modo per farlo è scrivere 100 istruzioni su console.log. Ma sono sicuro che non lo faresti perché ti saresti stufato della nona o decima linea.  

L'unica parte che cambia in ogni istruzione è il numero, quindi dovrebbe esserci un modo per scrivere solo una dichiarazione. E c'è con i loop. I loop consentono di eseguire ripetutamente una serie di passaggi in un blocco di codice.  

Contenuto

  • Mentre i loop
  • Cicli Do-While
  • Per i loop
  • Array
  • Cicli For-in
  • For-of loops
  • Revisione
  • risorse

Mentre cicli

Mentre i loop eseguiranno ripetutamente un insieme di istruzioni mentre alcune condizioni sono vere. Quando la condizione è falsa, il programma uscirà dal ciclo. Questo tipo di loop verifica la condizione prima di eseguire un'iterazione. Un'iterazione è un'esecuzione del corpo del loop. L'esempio seguente non mostrerà nulla perché la nostra condizione è falsa.

lascia fame = falso; while (affamato) console.log ("eat"); 

Questa è la forma generale di un ciclo while:

while (condition) statement; economico; eccetera. 

Una cosa a cui prestare attenzione quando si usano cicli while sta creando loop che non finiscono mai. Questo accade perché la condizione non diventa mai falsa. Se ti succede, il tuo programma andrà in crash. Esempio:

lascia hungry = true; while (affamato) console.log ("eat"); 

Compito

Quante volte verrà eseguito il corpo di questo ciclo:

sia io = 0; mentre io < 10)  console.log("Hello, World"); i += 1; 

Cicli Do-While

Un ciclo do-while eseguirà prima il corpo delle dichiarazioni, quindi verificherà la condizione. Questo tipo di ciclo è utile quando sai che vuoi eseguire il codice almeno una volta. L'esempio seguente mostrerà "eat" una volta, anche se la condizione è falsa.

lascia fame = falso; do console.log ("eat");  mentre (affamato);

Questa è la forma generale per un ciclo while:

do dichiarazione; economico; ecc. mentre (condizione);

Compito

Scrivi un ciclo do-while che visualizzerà i numeri 1-10.

Per loop

Un ciclo for ripeterà l'esecuzione di un blocco di codice per un numero specifico di volte. Nell'esempio seguente vengono visualizzati i numeri 1-10:

per (let i = 1; i <= 10; i++)  console.log(i);  

Questa è la forma generale di un ciclo for:

per (iniziale; condizione; passo) istruzione; economico; eccetera. 

Iniziale è un'espressione che imposta il valore della nostra variabile. Condizione è un'espressione che deve essere vera per le istruzioni da eseguire. E passo è un'espressione che aumenta il valore della nostra variabile.

Uno schema di programmazione consiste nell'usare un ciclo for per aggiornare il valore di una variabile con se stesso e un nuovo valore. Questo esempio riassume i numeri 1-10:

sia x = 0; per (let i = 1; i <= 10; i++)  x += i;  console.log(x) //55

Il += è un operatore di assegnazione che aggiunge un valore a una variabile. Questa è una lista di tutti gli operatori di assegnazione:

Operatore
Esempio
Equivalente
+= x + = 2
 x = x + 2
-= x - = 2
x = x - 2
* = x * = 2
x = x * 2
/ = x / = 2
x = x / 2
% = x% = 2
x = x% 2

Compito 

Scrivi un ciclo for che calcola il fattoriale di un numero. Il fattore di un numero n è il prodotto di tutti gli interi da 1 a n. Ad esempio, 4! (4 fattoriale) è 1 x 2 x 3 x 4 che è uguale a 24.

Array

Un array è un oggetto che contiene un elenco di elementi, chiamati elementi, ai quali si accede dal loro indice. L'indice è la posizione dell'elemento nell'array. Il primo elemento è l'indice 0. Le seguenti sono alcune operazioni di array comuni.

Crea un array vuoto:

let arr = [];

Inizializza una matrice con valori:

let arr = [1, 2, "Hello", "World"]; 

Ottieni un elemento da un array:

let arr = [1, 2, "Hello", "World"]; arr [0] // 1 arr [2] // "Ciao" 

Aggiorna un elemento in un array:

let arr = [1, 2, "Hello", "World"]; arr [2] = 3; // [1, 2, 3, "Mondo"] 

Loop su un array:

let arr = [1, 2, "Hello", "World"]; for (let i = 0; i < arr.length; i++)  console.log(arr[i]); 

Un array bidimensionale è un array i cui elementi sono array. Esempio:

let arr = [[1, 2], ["Hello", "World"]]; console.log (arr [0] [1]); // 2

Questo è il modo in cui eseguiresti il ​​ciclo sull'array e visualizzerai ogni elemento:

for (let i = 0; i < arr.length; i++)  for (let j = 0; j < arr[i].length; j++)  console.log(arr[ i ][ j ]);  

Compito 

Quale elemento viene visualizzato quando i = 1 e j = 0 nel ciclo sopra per?

Ciclo For-In

Questo tipo di loop ci consente di scorrere le chiavi in ​​un oggetto. Un oggetto è una struttura dati con chiavi mappate ai valori. Ecco alcune operazioni comuni che possono essere eseguite su un oggetto.

Crea un oggetto vuoto:

let obj = ;

Inizializza un oggetto con valori:

let obj = foo: "Ciao", bar: "Mondo";

Ottieni una proprietà da un oggetto:

let obj = foo: "Ciao", bar: "Mondo"; obj.foo; // "Ciao" obj ["foo"]; //"Ciao"

Aggiorna una proprietà in un oggetto:

let obj = foo: "Ciao", bar: "Mondo"; obj.foo = "hi" obj ["foo"] = "ciao"

Passa sopra le chiavi di un oggetto:

for (let key in obj) console.log (chiave); 

Compito

Cosa offre la visualizzazione del ciclo precedente a obj = foo: "Hello", bar: "World"?

Per-Of Loop

Questo tipo di loop ci consente di eseguire il loop sui valori degli oggetti iterabili. Esempi di oggetti iterabili sono array e stringhe.

Loop su un array:

let arr = ["foo", "bar", "baz"]; per (lascia elem di arr) console.log (elem);  // foo bar baz

Loop su una stringa:

let str = "Ciao"; for (let char of str) console.log (char);  //'Ciao'

Compito

Usando uno qualsiasi dei loop, scrivi un programma che visualizzerà questo motivo di scala:

# # # # #

Revisione

I cicli ci permettono di ridurre la duplicazione nel nostro codice. Durante i loop, ripetiamo un'azione finché una condizione non è falsa. Un ciclo di do-while verrà eseguito almeno una volta. Per i loop, ripetiamo un'azione fino alla fine del conteggio. Il ciclo for-in è progettato in modo da poter accedere alle chiavi in ​​un oggetto. Il ciclo for-of è progettato in modo da poter ottenere il valore di un oggetto iterabile. 

Successivamente, nella parte 4, impareremo le funzioni.

risorse

  • repl.it
  • Specifica ES6
  • Non sai JS: ES6 e oltre