Kubilay Kahil
YazarKubilay Kahil
2 dakika okuma süresi
Eki 19, 2019

Javascript: #Dizilerden Objelere forEach Kullanımı


  Javascript üzerinde dizi değerlerini kolay bir şekilde yazdırmak amacıyla for each döngüsü kullanılabilir. Bu döngünün en muazzam yanı herhangi bir sayısal değerle uğraşmadan kullandığımız eleman üzerindeki değerleri döndürebiliyor olması(var i=0; ile bizi uğraştırmaması):))...

  Bu ne demek oluyor? Misal, bir manavın 15 adet farklı sebzesi olduğunu farz edelim. sebzeReyonu dizisi üzerinde sebze[“roka”,”domates”, “kabak”…] şeklinde gidiyor olsun. Bu değerleri alabilmek için for veya while döngüsünde sebze[donenSayi] gibi donenSayi adında bir değer belirleyerek bunu her seferinde arttirma islemi ile istediğimiz verilere erişebiliriz. Senaryoyu bir de kodlar üzerinde görelim:

//array
var sebzeReyonu = [“kabak”, “patlican”, “brokoli”, “lahana”, “havuç”, “ıspanak”, “kereviz”, “soğan”, “marul”, “roka”, “mantar”, “patates”, “kereviz”, “salatalık”, “sarımsak”];//for döngüsü
for(var i=0 ; idocument.getElementById(“sebzeListesi”).innerHTML +=

” + sebzeReyonu[i] + “

”;
}
//while döngüsü
i=0;
while(i document.getElementById(“sebzeListesi”).innerHTML +=
 “” + sebzeReyonu[i] + “”;
i++;
 }document.getElementById(“sebzeListesi”).innerHTML +=
“” + sebzeReyonu[i] + “”;
}
//forEach döngüsü
 sebzeReyonu.forEach(function(sebze, element, deneme){
document.getElementById(“sebzeListesi”).innerHTML +=
“” + sebze +””;
});

Objeler Üzerinde Kullanımı

Objeler üzerinde mantığı neredeyse aynı, yapı üzerinde ufak değişiklikler var.

Yukarıdaki döngüde obje değişkenlerine erişmek için kod bloğu üzerinde tanımladığımız element değişkenini döndürebiliriz. Değişkenlerin değerine ulaşmak içinse objeAdi içerisinde element’i tanımlamalıyız (objeAdi[element] gibi..). Bir örnek ile nasıl kullanıldıklarını görelim:

//bir bisikletin özelliklerini obje içerisinde tanımlicam
var bisiklet = new Object();
bisiklet = {
 adi: ”TREK FUEL EX 8 PLUS”,
 kadro: “Alpha Platinum Alüminyum, ABP, Boost148, Knock Block steerer durağı, Full Floater, EVO bağlantısı, E2 konik kafa tüpü, Mino Bağlantısı, Kontrol Freak iç rotası, aşağı tüp koruması, PF92, ISCG 05, G2 Geometri, 130 mm seyahat”,
 jant: “SUNringlé Duroc 40 SL 28 delikli, boru içermeyen şeritler ve valfler dahildir”,
 vites: “SRAM GX Kartal, 12 hızlı”
 }//forEach yapisi
Object.keys(bisiklet).forEach(function(element){
 document.getElementById(“bisikletOz”).innerHTML += “

” + element + “: “ + bisiklet[element] + “

”;
 })

HTML’i düzenlendikten sonra, Javascript kodlarını tarayıcı üzerinde çalıştırdığınızda, şu şekilde bir çıktı verecek:

                                      

Bunlar İlginizi Çekebilir