Döngü için JavaScript

İçindekiler

    İçindekiler tablosunu göster

Döngüler bir kod bloğunu birkaç kez çalıştırabilir.

JavaScript Döngüleri

Aynı kodu tekrar tekrar çalıştırmak istiyorsanız döngüler kullanışlıdır. zaman farklı bir değere sahiptir.

Dizilerle çalışırken genellikle durum böyledir:

Yazmak yerine:

 text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
 text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
 text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Yazabilirsin:

for (let i = 0; i < cars.length; i++) { 
  text += cars[i] + "<br>";
 }

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

let text = "";
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Farklı Döngü Çeşitleri

JavaScript farklı türdeki döngüleri destekler:

  • for - bir kod bloğunda birkaç kez döngü yapar

  • for/in - bir nesnenin özellikleri arasında döngü yapar

  • for/of - bir değerin değerleri arasında döngü yapar yinelenebilir nesne

  • while - belirtilen koşul doğruyken bir kod bloğu boyunca döngü yapar

  • do/while - ayrıca belirtilen bir koşul doğruyken bir kod bloğu boyunca döngü yapar

for Döngüsü

for ifadesi, isteğe bağlı 3 ifadeden oluşan bir döngü oluşturur:

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

İfade 1, kod bloğunun yürütülmesinden önce (bir kez) yürütülür.

İfade 2, kod bloğunun yürütülmesine ilişkin koşulu tanımlar.

İfade 3, kod bloğu yürütüldükten sonra (her zaman) yürütülür.

Örnek

for (let i = 0; i < 5; i++) {
   text += "The number is " + i + "<br>";
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
let text = "";

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Yukarıdaki örnekten şunları okuyabilirsiniz:

İfade 1, döngü başlamadan önce bir değişken belirler (i=0 olsun).

İfade 2, döngünün çalışması için gereken koşulu tanımlar (i'den küçük olmalıdır) 5).

İfade 3, döngüdeki kod bloğu her değiştirildiğinde bir değeri (i++) artırır. idam edildi.

İfade 1

Normalde döngüde kullanılan değişkeni başlatmak için ifade 1'i kullanırsınız (i=0 olsun).

Bu her zaman böyle değildir. JavaScript umursamıyor. İfade 1: isteğe bağlı.

İfade 1'de (virgülle ayrılmış olarak) birçok değeri başlatabilirsiniz:

Örnek

for (let i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";
 }

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Ve ifade 1'i atlayabilirsiniz (örneğin, değerleriniz ayarlandığında) döngü başlamadan önce):

Örnek

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
 }

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

for (; i < len; i++) {
  text += cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

İfade 2

Çoğunlukla ifade 2, başlangıç değişkeninin durumunu değerlendirmek için kullanılır.

Bu her zaman böyle değildir. JavaScript umursamıyor. İfade 2: ayrıca isteğe bağlı.

Eğer ifade 2 true değerini döndürürse döngü yeniden başlayacaktır. Yanlış döndürürse, döngü sona erecektir.

İfade 2'yi atlarsanız, içinde bir ara sağlamanız gerekir. döngü. Aksi takdirde döngü hiçbir zaman bitmeyecektir. Bu, tarayıcınızın çökmesine neden olur. Bu eğitimin sonraki bölümlerinde molalar hakkında bilgi edinin.

İfade 3

Genellikle ifade 3, başlangıç değişkeninin değerini artırır.

Bu her zaman böyle değildir. JavaScript umursamıyor. İfade 3: isteğe bağlı.

İfade 3, negatif artış (i--), pozitif gibi her şeyi yapabilir artış (i=i + 15) veya başka bir şey.

İfade 3 de atlanabilir (örneğin, döngü içindeki değerlerinizi artırdığınızda):

Örnek

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) { 
  text += cars[i] + "<br>";
   
 i++;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let len = cars.length;
let text = "";

for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Döngü Kapsamı

var'ı döngüde kullanma:

Örnek

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

Döngüde let kullanımı:

Örnek

let i = 5;

for (let i = 0; i < 10; i++) {
    // some code
}

// Here i is 5

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

İlk örnekte, var kullanılarak, içinde bildirilen değişken döngü, döngünün dışındaki değişkeni yeniden bildirir.

İkinci örnekte, let kullanılarak, içinde bildirilen değişken döngü, döngü dışındaki değişkeni yeniden bildirmez.

Bir döngüde i değişkenini bildirmek için let kullanıldığında, i değişken yalnızca döngü içinde görünür olacaktır.

For/Of ve For/In Döngüleri

for/in döngüsü ve for/of döngüsü bir sonraki bölümde açıklanacaktır.

while Döngüleri

while döngüsü ve do/while sonraki bölümlerde açıklanacaktır.