Podstawowy artykuł na temat pętli w JavaScript. Pojęcia, rodzaje cykli, zachowania i przykłady.

Pętle

Pętle to funkcja programistyczna, która pomaga nam między innymi wielokrotnie wykonywać instrukcje kodu lub przechodzić przez strukturę danych.

Większość pętli jest kontrolowana przez zmienne i warunki. Te warunki pomogą nam mieć lepszą kontrolę nad pętlą i uniknąć możliwych nieskończonych pętli (czynnik do rozważenia).

Zrozumienie pętli

Aby lepiej zrozumieć cykle, możemy to zobaczyć na poniższym schemacie blokowym, na którym wyrażenie zostanie ocenione i powtórzone kilka razy zgodnie z ustalonymi kryteriami.

W przykładzie na ekranie zostanie wydrukowana liczba, która z kolei będzie dodawana przez jednostkę w każdej iteracji, osiągając liczbę 100.

Należy zauważyć, że większość pętli ocenia warunek, który musi być spełniony, aby wykonać instrukcję. Oceny te są wyzwalane przez wartości logiczne, gdzie jeśli warunek jest prawdziwy, instrukcja jest wykonywana, a jeśli jest fałszywy, pętla jest zamykana.

Deklaracje pętli

W JavaScript istnieje wiele sposobów definiowania pętli, zwracając uwagę, że z biegiem lat dodano wokół nich coraz więcej funkcji.

Oto różne sposoby używania pętli w JavaScript:

• dla.
• dla w.
• dla z.
• dla każdego.
• podczas gdy

Do

Pętla „for” to pętla, która powtarza blok kodu w zależności od 3 wyrażeń zdefiniowanych w momencie jej zadeklarowania.

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

• Wyrażenie 2 : Definiuje warunek wykonania bloku kodu. Jeśli warunek jest spełniony, blok jest wykonywany, w przeciwnym razie cykl jest zatrzymywany.
• Wyrażenie 3 : Uruchamia się za każdym razem po wykonaniu bloku kodu. To wyrażenie jest często używane do aktualizowania zmiennych zdefiniowanych w wyrażeniu 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

Pętla „for of” to pętla, która iteruje po typach danych należących do kategorii obiektów iterowalnych, takich jak obiekty, tablice lub zbiory, uzyskując ich wartość.

let iterable = [10, 20, 30];

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

Pętla „for each” jest uproszczoną pętlą wyrażoną deklaratywnie i funkcjonalnie. Działa poprzez wywołania zwrotne i należy do zestawu narzędzi tablicy.

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

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

Pętla „while” to pętla, która wykonuje iterację, dopóki warunek jest prawdziwy.

let count = 1;

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

Instrukcje „break” i „continue” są narzędziami dostarczanymi przez język do przerywania lub kontynuowania wykonywania pętli. Zdania te spełniają rolę wsparcia dla określonych przypadków, w których musimy ingerować w cykl w jego wykonaniu.

Przerwanie

Instrukcja „break” przerywa pętlę i kończy jej wykonywanie.

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

Instrukcja „continue” ignoruje kolejny kod w pętli, przechodząc do następnej iteracji.

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

Istnieją pewne zalecenia dotyczące stosowania różnych rodzajów cykli w zależności od kazuistyki, którą należy się zająć. Ale ogólne zalecenia mogą być następujące:

• Jeśli znamy dokładnie liczbę elementów i instrukcji do iteracji, zaleca się użycie pętli „for”. W przeciwnym razie użyj pętli „while”.
• Jeśli potrzebujesz poznać właściwości konkretnego obiektu, użyj pętli „for in”.
• Jeśli potrzebujesz wykonać dodatkową operację na podstawie już zdefiniowanego wejścia funkcji, bardzo dobrym rozwiązaniem jest użycie opcji „Dla każdego”.
• Ogólna kazuistyka i prostota użycia „For of”.

Zapętla zasoby w javascript

• Ogólny przewodnik po pętlach
• Ogólny przewodnik dot
• Ogólny przewodnik po in
• Ogólny przewodnik dla
• Ogólny przewodnik dla każdego
• Ogólny przewodnik podczas

Jeśli potrzebujesz dodatkowej pomocy, skontaktuj się ze mną .

• ✉️ Wyślij mi e-mail
• Skontaktuj się ze mną na LinkedIn
• Skontaktuj się ze mną na Twitterze