JavaScript Basic - loops, for loop, for in, for of, forEach, while...

Sløjfer

Sløjfer evaluerer en tilstand. Et sandt udtryk kører en kodeblok. Sløjfer gentager processen, indtil udtrykket er falsk .

for loop

for loop er den mest brugte loop.

Syntaks

for(initialisation; condition; update) {
  // body
  // code block to be ran
}

Lad os lære betydningen af ​​disse dele ved eksempel. Sløjfen nedenfor kører console.log(i) for i fra 0 op til (men ikke inklusive) 5:

for (let i = 0; i < 5; i++) { 
  // shows 0, then 1, then 2, then 3, then 4
  console.log(i)
}

Lad os tjekke ovenstående kode del for del.
initialisering => lad i =0
:Dette udføres én gang, når du går ind i løkken.
tilstand => i <5
:Kontrolleres før hver loop-iteration. Hvis falsk, stopper løkken.
body(kodeblok, der skal køres) => console.log(i)
:Løber igen og igen, mens tilstanden er sand.
opdatering(trin) => i++
:Udføres efter kroppen ved hver iteration.

Inline variabel erklæring

Variablen i erklæres lige i løkken. Dette kaldes en *“inline” variabel * erklæring. Sådanne variable er kun synlige inde i løkken .

for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}
console.log(i); // error, no such variable
let i = 0;

for (i = 0; i < 3; i++) { // use an existing variable
  console.log(i); // 0, 1, 2
}
console.log(i); // 3, visible, because declared outside of the loop

Spring over dele

Enhver del af for kan springes over.
For eksempel kan vi udelade start, hvis vi ikke skal gøre noget ved loop-starten.

let i = 0; // we have i already declared and assigned
for (; i < 3; i++) { 
  // no need for "initialisation(begin)" so it can be done with ';'
  console.log(i); // 0, 1, 2
}

update(trin) kan også udelades.

let i = 0;
for (; i < 3;) {
  console.log( i++ );
}
// this makes the loop identical to while (i < 3).

for in

Syntaks

for (key in object) {
  // code block to be executed
}

for in statement kan også sløjfe(interates) over egenskaberne for et array:

let array = [10, 20, 30, 40, 50];

for (let index in array) {
  console.log(array[index], index);
}

for in statement sløjfer(itererer) gennem egenskaberne for et objekt.

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

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

for af

for...of statement opretter en løkke, der itererer over gentagelige objekter, inklusive:indbygget streng, array, array-lignende objekter.

let array = [10, 20, 30, 40, 50];

for (let value of array) {
  console.log(value);
}

mens

Syntaks

while(expression) {
  //statement to execute
}

Mens tilstanden er sand , udføres koden fra løkketeksten .
For eksempel giver sløjfen nedenfor score, mens score <5

let score = 0;
while(score < 5) {
  console.log(score);
  score++;
}
// 0
// 1
// 2
// 3
// 4
// it runs while score < 5 is true and then exit the loop.


Så længe udtrykket er sandt, vil det gå ind i kodeblokken igen og igen. Denne løkke vil køre, så længe udtrykket er sandt.

En enkelt udførelse af loop-kroppen kaldes en iteration . Sløjfen i eksemplet ovenfor laver fem iterationer.
Hvis i++ manglede i eksemplet ovenfor, ville løkken gentage sig (i teorien) for evigt (uendeligt), fordi i er 0, og den bliver aldrig større end 5, da den ikke stiger.
Ethvert udtryk eller variabel kan være en sløjfebetingelse, ikke kun sammenligninger:betingelsen evalueres og konverteres til en boolsk værdi af while .

let i = 5;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
  alert( i );
  i--;
}

gør mens

Syntaks

do {
  // loop body
} while (condition);

Løkken vil først udføre kroppen, derefter kontrollere tilstanden, og mens den er sand, udføre den igen og igen.

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

Denne form for syntaks bør kun bruges, når du ønsker, at løkkens krop skal udføres mindst én gang, uanset om betingelsen er sand. (Normalt foretrækkes den anden form, som er while-løkke)

let value = 5;
do {
  console.log(value);
  value++;
} while(value < 3);
// this is false. because the value = 5 but it tells you to iterate while(value < 3). However, it will still print 5(because of do { console.log(value); }) and when it checks the condition - while(value < 3), it will exit the loop.

forHver

let todos = ["clean room", "make lunch", "walk my dog", "study JS",]
todos.forEach(function(todo, i) {
  console.log(todo, i);
})

Ovenstående kode er den samme som denne kode bruger for loop

for(let i=0; i < todos.length; i++) {
  console.log(todos[i], i);
}

pause

At bryde løkken
Normalt afsluttes en sløjfe, når dens tilstand bliver falsk, men vi kan tvinge udgangen til enhver tid ved at bruge den særlige pause direktiv.
For eksempel beder løkken nedenfor brugeren om en række tal, der "bryder", når der ikke indtastes et tal

let sum = 0;

while (true) {
  let value = +prompt("Enter a number", '');
  if (!value) break; // if the user enters an empty line or cancels the input. It stops the loop immediately, passing control to the first line after the loop.
  sum += value;
}
alert('Sum: ' + sum);

fortsæt

Fortsæt-direktivet er en "lettere version" af pause. Det stopper ikke hele løkken . I stedet stopper den den aktuelle iteration og tvinger løkken til at starte en ny (hvis betingelsen tillader det).
Vi kan bruge det, hvis vi er færdige med den nuværende iteration og gerne vil gå videre til den næste.

// The loop below uses continue to output only odd values.
for (let i = 0; i < 10; i++) {
  // if true, skip the remaining part of the body (so it doesn't console.log if it's even number)
  if (i % 2 == 0) continue;
  console.log(i); // 1, then 3, 5, 7, 9 (only console.log odd numbers)
}