Lär dig datavetenskap med JavaScript Del 3, Loops

Introduktion

Antag att du har fått uppgiften att skriva ett program som visar numren 1-100. Ett sätt att göra detta är att skriva 100 console.log-uttalanden. Men jag är säker på att du inte skulle för att du skulle bli trött på den 9: e eller 10: e raden.  

Den enda delen som ändras i varje uttalande är numret, så det borde finnas ett sätt att skriva enbart ett uttalande. Och det finns med loopar. Loops gör att vi utför en uppsättning steg i ett kodblock flera gånger.  

Innehåll

  • Medan slingor
  • Gör-medan slingor
  • För slingor
  • arrayer
  • In-loopar
  • För-loopar
  • Recension
  • Medel

Medan slingor

Medan slingor kommer att genomföra en uppsättning uttalanden upprepade gånger, medan vissa villkor är sanna. När tillståndet är felaktigt, kommer programmet att avsluta slingan. Denna slinga testar tillståndet innan det gör en iteration. En iteration är ett utförande av slingans kropp. Följande exempel visar inte något eftersom vårt tillstånd är felaktigt.

låt hungrig = false; medan (hungrig) console.log ("eat"); 

Detta är den allmänna formen av en stundslinga:

medan (villkor) uttalande; påstående; etc. 

En sak att vara försiktig med när du använder medan slingor skapar slingor som aldrig slutar. Detta händer eftersom tillståndet aldrig blir falskt. Om det händer dig kommer ditt program att krascha. Exempel:

låt hungrig = sant; medan (hungrig) console.log ("eat"); 

Uppgift

Hur många gånger kommer kroppen i denna loop att utföras:

låt jag = 0; medan jag < 10)  console.log("Hello, World"); i += 1; 

Gör-medan slingor

En stund-loop kommer att exekvera kroppen av uttalanden först och sedan kontrollera tillståndet. Denna slinga är användbar när du vet att du vill köra koden minst en gång. Följande exempel kommer att visa "äta" en gång, även om villkoret är felaktigt.

låt hungrig = false; gör console.log ("eat");  medan (hungrig);

Det här är den allmänna formen för en stund-loop:

gör uttalande; påstående; etc. medan (villkor);

Uppgift

Skriv en do-while-loop som visar numren 1-10.

För slingor

En för-loop kommer att upprepa exekveringen av ett kodblock för ett visst antal gånger. Följande exempel visar numren 1-10:

för (låt jag = 1; i <= 10; i++)  console.log(i);  

Detta är den allmänna formen av en för-loop:

för (initial; villkor; steg) statement; påstående; etc. 

Första är ett uttryck som anger värdet av vår variabel. Tillstånd är ett uttryck som måste vara sant för de uttalanden som ska utföras. Och steg är ett uttryck som ökar värdet av vår variabel.

Ett programmeringsmönster är att använda en för loop för att uppdatera värdet av en variabel med sig själv och ett nytt värde. Detta exempel summerar numren 1-10:

låt x = 0; för (låt jag = 1; i <= 10; i++)  x += i;  console.log(x) //55

De += är en uppdragsoperatör som lägger till ett värde tillbaka till en variabel. Detta är en lista över alla uppdragsoperatörer:

Operatör
Exempel
Likvärdig
+= 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

Uppgift 

Skriv en för loop som beräknar faktorn av ett tal. Faktorn för ett tal n är produkten av alla heltal från 1 till n. Till exempel 4! (4 factorial) är 1 x 2 x 3 x 4 vilket är lika med 24.

arrayer

En matris är ett objekt som innehåller en lista över objekt, kallade element, vilka nås av deras index. Indexet är läget för elementet i matrisen. Det första elementet är på 0-indexet. Följande är några vanliga array-operationer.

Skapa en tom array:

låt arr = [];

Initiera en array med värden:

låt arr = [1, 2, "Hello", "World"]; 

Hämta ett element från en array:

låt arr = [1, 2, "Hello", "World"]; arr [0] // 1 arr [2] // "Hej" 

Uppdatera ett element i en array:

låt arr = [1, 2, "Hello", "World"]; ar [2] = 3; // [1, 2, 3, "World"] 

Loop över en array:

låt arr = [1, 2, "Hello", "World"]; för (låt jag = 0; i < arr.length; i++)  console.log(arr[i]); 

En tvådimensionell array är en array vars element är arrays. Exempel:

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

Så här skulle du gå över arrayen och visa varje element:

för (låt jag = 0; i < arr.length; i++)  for (let j = 0; j < arr[i].length; j++)  console.log(arr[ i ][ j ]);  

Uppgift 

Vilket element visas när jag = 1 och j = 0 i ovanstående för slinga?

In-Loop

Den här slingan låter oss slingra igenom nycklarna i ett objekt. Ett objekt är en datastruktur som har nycklar mappade till värden. Här är några vanliga operationer som kan utföras på ett objekt.

Skapa ett tomt objekt:

låt obj = ;

Initiera ett objekt med värden:

låt obj = foo: "Hej", bar: "World";

Hämta en egenskap från ett objekt:

låt obj = foo: "Hej", bar: "World"; obj.foo; // "Hej" obj ["foo"]; //"Hej"

Uppdatera en egenskap i ett objekt:

låt obj = foo: "Hej", bar: "World"; obj.foo = "hi" obj ["foo"] = "hej"

Loop över ett objekts nycklar:

för (låt nyckeln obj) console.log (key); 

Uppgift

Vad gör den ovanstående för loop-visning visad obj = foo: "Hej", stapel: "World"?

For-Of Loop

Den här slingan gör att vi kan slingra över värdena på iterbara objekt. Exempel på iterbara objekt är arrays och strängar.

Loop över en array:

låt arr = ["foo", "bar", "baz"]; för (låt elem of arr) console.log (elem);  // foo bar baz

Loop över en sträng:

låt str = "Hej"; för (låt char av str) console.log (char);  //'Hej'

Uppgift

Använd ett av looparna, skriv ett program som visar detta trappmönster:

# # # # #

Recension

Loops gör att vi kan minska dubbelarbete i vår kod. Medan slingor låt oss upprepa en åtgärd tills ett villkor är felaktigt. En genomgångslinga kommer att utföras åtminstone en gång. För loopar låt oss upprepa en åtgärd tills vi når slutet av ett räkning. Inloppslingan är utformad så att vi kan komma åt nycklarna i ett objekt. Förbandet är utformat så att vi kan få värdet av ett iterbart objekt. 

Därefter kommer vi i del 4 att lära oss om funktioner.

Medel

  • repl.it
  • ES6-specifikation
  • Du vet inte JS: ES6 och Beyond