JavaScript'te Döngüler Nasıl Kullanılır

Döngü, bir dizideki her bir öğeyi yinelemenize olanak tanır, böylece her birini istediğiniz gibi özelleştirebilir ve çıktısını alabilirsiniz. Her programlama dilinde olduğu gibi, döngüler de JavaScript'te dizileri oluşturmak için çok önemli bir araçtır.

Bazı pratik örneklerin yardımıyla JavaScript'te döngüleri kullanmanın çeşitli yollarına daha derinden dalalım.

JavaScript'te Döngü için Artan ve Azalan

artımlı için döngü, JavaScript'te yinelemenin temelidir.

Bir değişkene atanmış bir başlangıç ​​değerini varsayar ve basit bir koşullu uzunluk kontrolü yapar. Ardından, bu değeri kullanarak artırır veya azaltır. ++ veya -- operatörler.

Genel sözdizimi şöyle görünür:

for (var i = başlangıç ​​değeri; i < dizi.uzunluk; ben++) {
dizi[i]}

Şimdi yukarıdaki temel sözdizimini kullanarak bir diziyi yineleyelim:

anArray = [1, 3, 5, 6];
için (i = 0; i < anArray.length; ben++) {
konsol.log (anArray[i])
}
Çıktı:
1
3
5
6 

Şimdi JavaScript'i kullanarak yukarıdaki dizideki her öğe üzerinde işlem yapacağız. için döngü:

anArray = [1, 3, 5, 6];
için (i = 0; i < anArray.length; ben++) {
konsol.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Çıktı:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Döngü, dizi boyunca artımlı olarak yinelenir. ++ Operatör, sıralı bir çıktı üretir.

Ama olumsuzu kullanmak (--) operatörü, çıktıyı tersine çevirebilirsiniz.

Sözdizimleri aynıdır, ancak mantık, yukarıdaki artan döngüden biraz farklıdır.

Azaltma yöntemi şu şekilde çalışır:

anArray = [1, 3, 5, 6];
for (izin i = anArray.length-1; ben > = 0; i--) {
konsol.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Çıktı:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Yukarıdaki kodun arkasındaki mantık çok uzak değil. Dizi indeksleme sıfırdan başlar. çok aramak birArray[i] yukarıdaki dizi dört öğe içerdiğinden normalde indeks sıfırdan üçe yinelenir.

Bu nedenle, dizi uzunluğundan birini çıkarmak ve koşulu bizim yaptığımız gibi sıfırdan büyük veya sıfıra ayarlamak oldukça kullanışlıdır - özellikle diziyi yinelemenizin temeli olarak kullanırken.

Dizi indeksini uzunluğundan bir eksikte tutar. Kondisyon ben >= 0 ardından sayıyı dizideki son öğede durmaya zorlar.

İlgili: Bugün Ustalaşmanız Gereken JavaScript Dizi Yöntemleri

Her biri için JavaScript

JavaScript'leri kullanarak azaltamasanız da her biri için, genellikle ham olandan daha az ayrıntılıdır için döngü. Bir öncekini ezberlemeden birbiri ardına bir öğe seçerek çalışır.

İşte JavaScript'in genel sözdizimi her biri için:

array.forEach (eleman => {
eylem
})

Pratikte nasıl çalıştığına bir göz atın:

olsun birArray = [1, 3, 5, 6];
anArray.forEach (x => {
konsol.log (x)
});
Çıktı:
1
3
5
6 

Şimdi bunu, önceki bölümde yaptığınız gibi her bir öğe üzerinde basit bir matematiksel işlem yapmak için kullanın:

olsun birArray = [1, 3, 5, 6];
anArray.forEach (x => {
konsol.log("5", "x", x, "=", x * 5)
});
Çıktı:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

JavaScript'in for...in Döngüsü Nasıl Kullanılır

NS için...içinde JavaScript'teki döngü, bir diziyi yineler ve dizinini döndürür.

Kullanımı kolay bulacaksınız için...içinde aşina iseniz Python'un for döngüsü çünkü basitlik ve mantık açısından benzerler.

Genel sözdizimine bir göz atın:

for (dizideki elemana izin verin){
eylem 
}

Böylece için...içinde loop, bir dizideki her öğeyi parantez içinde bildirilen değişkene (eleman) atar.

Bu nedenle, öğeyi doğrudan döngü içinde günlüğe kaydetmek, öğelerin kendilerini değil, bir dizi dizini döndürür:

olsun birArray = [1, 3, 5, 6];
for (anArray'de i olsun){
konsol.log (i)
}
Çıktı:
0
1
2
3 

Bunun yerine her bir öğenin çıktısını almak için:

olsun birArray = [1, 3, 5, 6];
for (anArray'de i olsun){
konsol.log (anArray[i])
}
Çıktı:
1
3
5
6 

Azaltma döngüsünü kullanırken yaptığınız gibi, çıktıyı aşağıdakileri kullanarak tersine çevirmek de kolaydır. için...içinde:

olsun birArray = [1, 3, 5, 6];
// Dizinin uzunluğundan birini çıkarın ve bunu bir değişkene atayın:
v = anArray.length - 1; 
// Diziyi aşağı doğru yinelerken yukarıdaki değişkeni dizin temeli olarak kullanın:
for (anArray'de i olsun){
konsol.log (anArray[v])
v -=1;
}
Çıktı:
6
5
3
1 

Yukarıdaki kod, azalan döngüyü kullanırken yaptığınıza mantıksal olarak benzer. Yine de daha okunabilir ve açıkça özetlenmiştir.

Döngü için JavaScript...

NS için... döngü şuna benzer için...içinde döngü.

Ancak, aksine için...içinde, dizi dizinini değil, öğelerin kendilerini yineler.

Genel sözdizimi şöyle görünür:

for (diziden i olsun) {
eylem 
}

Nasıl çalıştığını görmek için bir diziyi aşamalı olarak yinelemek için bu döngü yöntemini kullanalım:

olsun birArray = [1, 3, 5, 6];
for (anArray'den i olsun) {
konsol.log (i)
}
Çıktı:
1
3
5
6 

Bu yöntemi, diziyi yinelemek ve çıktıyı tersine çevirmek için de kullanabilirsiniz. Bunu kullanarak nasıl yaptığınıza benzer için...içinde:

olsun birArray = [1, 3, 5, 6];
v = anArray.length - 1;
for (anArray'in x'i olsun) {
konsol.log (anArray[v])
v -=1;
}
Çıktı:
6
5
3
1

Döngü içinde çalışmak için:

olsun birArray = [1, 3, 5, 6];
v = anArray.length - 1;
for (anArray'in x'i olsun) {
konsol.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Çıktı:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Süre Döngüsü

NS süre döngü, belirtilen bir koşul doğru kaldığı sürece sürekli çalışır. Genellikle sonsuz döngü olarak kullanılır.

Örneğin, sıfır her zaman ondan küçük olduğu için aşağıdaki kod sürekli çalışır:

ben = 0 olsun;
süre (i < 10) {
konsol.log (4)
}

Yukarıdaki kod, sonsuza kadar "4" kaydeder.

kullanarak bir diziyi yineleyelim. süre döngü:

ben = 0 olsun;
while (i < anArray.length) {
konsol.log (anArray[i])
ben +=1
}
Çıktı:
1
3
5
6 

JavaScript do...while Döngüsü

NS yaparken döngü, bir dizi eylemi açıkça bir dizi içinde kabul eder ve yürütür. yapmak sözdizimi. Daha sonra bu eylemin koşulunu süre döngü.

İşte nasıl göründüğü:

yapmak{
hareketler
}
süre (
durum
)

Şimdi bu döngü yöntemini kullanarak bir diziyi yineleyelim:

yapmak{
konsol.log (anArray[i])
ben +=1
}
süre (
i < anArray.length
)
Çıktı:
1
3
5
6 

JavaScript Döngülerine Aşina Olun

Burada çeşitli JavaScript döngü yöntemlerini vurgulamış olmamıza rağmen, programlamada yinelemenin temellerine hakim olmak, bunları programlarınızda esnek ve güvenle kullanmanızı sağlar. Bununla birlikte, bu JavaScript döngülerinin çoğu, genel anahatları ve sözdizimlerinde yalnızca birkaç farklılıkla aynı şekilde çalışır.

Ancak döngüler, çoğu istemci tarafı dizi oluşturmanın temelidir. Bu döngü yöntemlerini istediğiniz gibi ayarlamaktan çekinmeyin. Örneğin, bunları daha karmaşık dizilerle kullanmak, JavaScript döngülerini daha iyi anlamanızı sağlar.

JavaScript if-else Bildirimi Nasıl Kullanılır

if-else ifadesi, mantığınızı uygulamalarınıza programlamaya yönelik ilk adımınızdır.

Sonrakini Oku

Yazar hakkında