Javascript forEach Döngü

JavaScript'te diziler üzerinde döngü yapmak için farklı yollar vardır, ancak doğru olanı seçmek zor olabilir.

JavaScript dizilerini yinelemek için farklı yollar öğreneceksiniz, örneğin, istediğiniz değerleri bulmak için ilişkisel dizileri ya da nesneleri nasıl kullanacaksınız.

En temel programlama yapılarından biri de döngüdür. Tüm diller için for döngüsünün bazı uygulamaları vardır ve JavaScript'de forEach döngüsüde farklı değildir.

Dil olgunlaştıkça diziler ve nesneler üzerinde döngü yapma seçeneklerine sahibiz. JavaScript nesneleri de bir anahtar veya ad ile değerleri endekslemek için temiz bir çözüm sağlayan listelerdir.

Döngüler için JavaScript, bir dizideki her öğenin üzerine yinelenir. JavaScript dizileri sıfır temellidir; bu, ilk öğenin 0 diziniyle başvurulduğu anlamına gelir.

Dizilerdeki öğelere başvurma, sıfırdan başlayıp dizi uzunluğu eksi 1 ile biten sayısal bir dizin ile yapılır. Bir dizi üyesine erişim sözdizimi:

Array.forEach() Dizinizdeki bu yöntemi çağırırsınız ve döngünün her yinelemesinde çalışması için geri arama işlevini iletirsiniz. Geri arama iki argüman kabul eder. Birincisi, döngüdeki geçerli öğenin değeri ve ikincisi o öğenin dizinidir.

 
array.forEach(function calback(item, index, array)
{

 /* çalışan kodlar buraya */ 
     
 });
 

İtem : Gereklidir. Mevcut elemanın değeri

index : İsteğe bağlı. Dizide işlenen geçerli öğenin dizini.

Array : İsteğe bağlı. Geçerli elemanın ait olduğu dizi

Dizilerde Klasik Javascript kodu nasıl çalışır:

 

var numbers = [1, 2, 3, 4, 5];

var sum = 0;

for (var i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum);//15

ForEach yardımcı yöntemini kullanarak, kod aşağıdaki gibi olacaktır:

 

var numbers = [1, 2, 3, 4, 5];

var sum = 0;

numbers.forEach(function(number) {
  sum += number;
});

console.log(sum); //15

Yineleyici fonksiyonu anonim bir işlevi olması gerekmez. Bir fonksiyonu ayrı ayrı ilan edebilir ve ardından aşağıdaki gibi ForEach'te iletebiliriz:

 

var numbers = [1, 2, 3, 4, 5];

var sum = 0;

function addNumbers(number) {
  sum += number;
}

numbers.forEach(addNumbers);

console.log(sum); //15

Örnek:

 
var arr = ['a', 'b', 'c', 'd', 'e'];

arr.forEach(function(elem) {
  
  console.log(elem);

}); // a,b,c,d,e

Şimdi, dizinin elemanlarına ek olarak, sayılarını da verelim, Bunu yapmak için, elemanlarımızın sayısını içerecek ikinci indeks değişkeni ekleyeceğiz:

 
var arr = ['a', 'b', 'c', 'd', 'e'];
 
arr.forEach(function(elem, index) {

    console.log(`${index} . ${elem}`);
});

Çıktı:

for Döngü ve forEach yöntemi arasındaki en önemli fark şunlardır:

For için:

• break komutu ile döngüden çıkabilirsiniz.
• Yinelemeden atlamak için continue komutunu kullanabilirsiniz.
• forEach döngüsünden çok daha hızlıdır.
• İ değişkeni döngü dışında değeri geçerlidir.

forEach için:

• Yalnızca forEach öğesine iletilen fonksiyondan return ederek devam etmeyi simüle edebilirsiniz.
• Break komutu ile döngü durmaz.
• for döngüsüne göre yavaştır.
• İ değişkeni yerel kapsamlıdır.

HTML DOM Node Lists Nesnelerinde forEach döngüsü kullanma

NodeLists ve Arrays iki farklı şeydir, çünkü NodeLists aslında bir JavaScript API'si değil, bir tarayıcı API'sidir.

querySelectorAll(), getElementsByTagName() gibi DOM seçicileri JavaScript methodları değil, DOM öğelerine erişmenizi sağlayan tarayıcı API'leridir. Daha sonra DOM öğelerini JavaScript ile değiştirebilirsiniz.

Bu yöntem , NodeLists değil , yalnızca diziler için çalışır. querySelectorAll() öğeleri ve diğer benzer seçici yöntemleri kullanamayacağınız anlamına gelir. Neyse ki bunun için başka bir forEach() için hack yöntemi ve ES6 ile gelen for of iteral(yineleyici) var. NodeLists için daha fazla bilgi

[ ].forEach.call( document.querySelectorAll('a'), function(el) {

   // Geçerli düğümler için yapılacak işler

});

Kodu açıklarsak [ ] dizi demektir. Bu dizi hiç kullanılmaktadır. dizinin kullanılması, örneğin dizinin prototiplerine erişmenizi sağlar Aslında kod şu şekilde, bunu yazmak yukardakine göre uzundur.

Daha kısa haline getirmek için:

 
var forEach = Array.prototype.forEach;

forEach.call(...);

Örnek:

Li öğelerine tek tek tıklayın.

Örnek:

Li öğelerine tek tek tıklayın.

NodeList.forEach() Methodu

NodeList.forEach() Methodu Array.ForEach() bu yeni özelliği edge16 ve modern tarayıcılar desteklemekte.