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

forEach sadece diziler üzerinde çalışır, Bir düğüm listesi bir dizi değil, eşleşen öğelerin her birini içeren bir numaralandırma nesnesidir.

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ı:

0. a
1. b
2. c
3. d
4. e

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

For için:

forEach için:

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.

Array.prototype.forEach.call(...);

Daha kısa haline getirmek için:

 
var forEach = Array.prototype.forEach;

forEach.call(...);

Bu Kodun böyle kullanımı jQuery'de each() methodu ile aynıdır.

Ö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.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5699

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.