JavaScript ile ilgili diziler, programlama dünyasında çok önemli bir yere sahip Bu dersimizde ise JavaScript dizilerini yineleme ve tekrarlama yöntemlerini öğreneceksiniz Çeşitli örneklerle ve açıklayıcı anlatımlarla, JavaScript dizilerini daha iyi anlayacak ve kullanımı kolaylaştıracaksınız Hemen dersimize başlayın ve JavaScript bilginizi güçlendirin!

JavaScript programlama dili ile çalışan web uygulamaları, verileri tutmak ve organize etmek için diziler kullanır. Versatil ve güçlü olan bu dizi veri tipi, birçok farklı yineleme ve tekrarlama yöntemiyle kullanılabilir. Bu makalede, JavaScript dizileri yinelemek ve tekrarlamak için kullanılabilecek farklı yöntemler ele alınacak. Ayrıca, bu yöntemlerden her biri ayrıntılı şekilde açıklanacak ve örneklerle desteklenecektir.
JavaScript dizilerinde yineleme yapmanın en yaygın yöntemi forEach() fonksiyonudur. Bu fonksiyon, dizinin tüm elemanlarını gezerek istenilen işlemi uygulamaya olanak tanır. map() fonksiyonu ise, dizi elemanları üzerinde belirli bir fonksiyon uygulamak için kullanılır. reduce() fonksiyonu ise, dizinin elemanlarını toplamak veya belirli bir şekilde işlemek için kullanılır. Ayrıca, filter() fonksiyonu belirli bir kriteri karşılayan elemanları seçmek için kullanılır. find() fonksiyonu ise, belirli bir koşulu sağlayan ilk elemanı bulmak için kullanılır.
Farklı yineleme yöntemlerinin yanı sıra, klasik for ve while döngüleri de kullanılabilir. Bu döngüler, dizilerin elemanlarının tek tek gezilmesine olanak tanır. Ayrıca, döngü işlemlerini belirli durumlarda durdurmak veya atlamak için break ve continue ifadeleri kullanılabilir.
Birçok farklı yineleme ve tekrarlama yöntemi sayesinde JavaScript dizilerinde verilerin işlenmesi ve manipüle edilmesi daha kolay hale gelir. Bu sebeple, güncel web programlama uygulamalarında dizilerin tam anlamıyla öğrenilmesi ve kullanılması oldukça önemlidir.
forEach() Yöntemi
Javascript dizilerinde her bir elemanın üzerinde teker teker işlem yapmak için kullanılan forEach() yöntemi oldukça kullanışlı bir yöntemdir. Bu yöntem sayesinde diziler üzerindeki öğeleri tek tek inceleyebilir ve her bir öğe için özel bir işlem yapabilirsiniz.
forEach() yöntemi, bir dizi ve bir fonksiyon alır. Dizi, üzerinde işlem yapılacak olan dizi, fonksiyon ise her bir öğenin üzerinde yapılacak işlemi içerir. Fonksiyonun içinde, her bir eleman ve onun yerini belirleyen index gibi bilgiler de kullanılabilir.
Dizi | Fonksiyon | Yapılan İşlem |
---|---|---|
[1, 2, 3, 4, 5] | function(eleman) {console.log(eleman*2)} | Dizinin her bir elemanı 2 ile çarpılır ve konsola yazdırılır. |
forEach() yöntemi ile yapılan işlemler esnasında, dizi üzerindeki öğelerin sırası korunur ve her bir eleman üzerinde yapılan işlemler, sırayla gerçekleştirilir.
- Örneğin, bir kullanıcının favori filmlerini içeren bir dizi oluşturabilirsiniz.
- Daha sonra, bu dizideki her bir film için bir HTML etiketi oluşturabilirsiniz.
- forEach() yöntemi, her bir film için bir etiket oluşturur ve bu etiketleri ana sayfaya ekler.
Bu örnekte, forEach() yöntemi, dizideki her bir elemana tek tek erişir ve bunu HTML etiketleriyle kullanıcının görebileceği şekilde dönüştürür.
map() Yöntemi
Dizilerin en önemli özelliklerinden biri elemanları üzerinde işlemler yapabilmektedir. Bu işlemlerde map() yöntemi oldukça yaygın olarak kullanılır. Map() yöntemi, dizi elemanlarının her birine belirli bir fonksiyon uygulayarak yeni bir dizi oluşturur. Bu işlem yapılırken orijinal dizi değiştirilmez ve yeni bir dizi oluşturulur. Aşağıdaki örnekte, bir dizi oluşturulmuş ve elemanlarına map() metodu uygulanarak yeni bir dizi elde edilmiştir:
var sayilar = [1, 2, 3, 4, 5];var yenileri = sayilar.map(function(x){ return x * 2; });console.log(yenileri); // [2, 4, 6, 8, 10]
Bu örnekte, sayilar adlı bir dizi oluşturulmuş ve bu dizinin her elemanı callback fonksiyonuna gönderilerek iki katına çıkarılmıştır. Daha sonra, çıktı olarak elde edilen yeni dizi yenileri olarak adlandırılmıştır.
Map() yöntemi, sadece sayılardan oluşan dizilerle sınırlı değildir. İster string, ister boolean olsun, dizi elemanları herhangi bir tipte olabilir. Örneğin, aşağıdaki örnekte bir dizinin elemanları küplerine yükseltilmiştir:
var rakamlar = [1, 2, 3, 4];var kobuleri = rakamlar.map(function(y){ return Math.pow(y, 3); });console.log(kobuleri); // [1, 8, 27, 64]
Math.pow() fonksiyonu Math kütüphanesi üzerinden kullanılarak, yine her bir elemandaki işlem yapılarak küpü hesaplanmış ve yeni bir dizi oluşturulmuştur. Map() yöntemi kullanılarak, diziler üzerinde belirli hesaplama işlemleri yapmak oldukça kolay ve etkilidir.
reduce() Yöntemi
JavaScript dizileri işlemlerinde kullanabileceğimiz bir diğer yöntem ise reduce() yöntemidir. Bu yöntem, dizideki elemanları toplamak ya da belirli bir şekilde işlemek için kullanılır.
Bu yöntem, öncelikle bir işlem fonksiyonu alır. Bu fonksiyon iki parametre alır: accumulator ve current value. accumulator, işlem sonucunu tutar ve her adımda güncellenir. current value ise o anki elemanı ifade eder.
Aşağıdaki örnekte, reduce() yöntemi kullanılarak bir dizi elemanlarının toplamı hesaplanmaktadır:
Dizi | Toplam Değeri |
---|---|
[1, 2, 3, 4, 5] | 15 |
- accumulator, ilk olarak 0 değerini alır.
- current value, dizi elemanları sırayla gezerken her bir elemanı alır.
- İşlem fonksiyonu, accumulator ve current value değerlerini toplar ve sonucu accumulator olarak günceller.
- Bu işlem tüm elemanlar gezilene kadar sürer ve son olarak accumulator değeri toplam değerini verir.
Bu örnekteki gibi, reduce() yöntemi çeşitli işlemler yapmak için kullanılabilir. Örneğin, bir dizi elemanlarının çarpımını hesaplamak için de aynı yöntem kullanılabilir.
reduce() yöntemi, özellikle büyük boyutlu dizilerde performans açısından daha avantajlıdır çünkü her bir eleman için yeni bir array nesnesi oluşturmaktan kaçınır.
filter() Yöntemi
JavaScript dizileri, birçok durumda elemanların tek tek işlenmesi gerektiğinden, yineleme ve tekrarlama yöntemleriyle kullanılır. Bu yöntemler, her bir elemanı tek tek işlemek ve belirli kriterleri sağlayanları seçmek için kullanılır. Bu makalede, JavaScript dizilerindeki filter() yöntemi ele alınacak.
Dizi elemanlarının belirli bir kriteri sağlayanları seçmek için filter() yöntemi kullanılır. Bu yöntem, bir fonksiyon kullanarak her elemanı kontrol eder ve koşula uyanları yeni bir diziye ekler. Bu sayede, orijinal dizideki elemanlar korunurken, sadece istenen elemanlar seçilmiş olur.
filter() yöntemi, bir veya daha fazla parametre alabilir. İlk parametre, her elemanı kontrol etmek için kullanılacak fonksiyondur. Bu fonksiyon, elemanların koşulu sağlayıp sağlamadığını kontrol eder ve true veya false değeri döndürür. İkinci parametre ise, dönen elemanları filtrelendikten sonra kullanacağımız diziye aittir.
Örnek Kod | Açıklama |
---|---|
let sayilar = [1, 2, 3, 4, 5];let tek_sayilar = sayilar.filter(function(sayi) { return sayi % 2 !== 0;});console.log(tek_sayilar); | Bu kod, sayilar dizisindeki tek sayıları filtreler ve yeni bir dizi olarak tek_sayilar değişkenine kaydeder. Bu yeni dizi, [1, 3, 5] elemanlarını içerir. |
Bir dizideki elemanları filtrelemek için filter() yöntemi oldukça kullanışlıdır. Bu yöntem sayesinde, belirli koşullara uyan elemanlar geniş bir veri setinden kolayca seçilebilir.
find() Yöntemi
JavaScript'de dizi elemanlarının belirli bir koşulu sağlayan ilk öğesini bulmak için kullanılan find() yöntemi oldukça kullanışlıdır. Bu yöntem, bir dizi üzerinde her eleman için belirli bir koşulu kontrol eder ve bu koşulu sağlayan ilk elemanı döndürür.
Find() yöntemi, bir dizi kullanırken belirli bir elemanı bulmak için kullanılan en yaygın yöntemlerden biridir. Kodumuzda, örneğin bir dizi insan objesi olduğunda ve bizim belirli bir özelliği olan birisini bulmamız gerektiğinde, find() yöntemini kullanarak hızlı ve basit bir şekilde özelliklere göre arama yapabiliriz. Ayrıca find() yöntemi, belirli bir koşulu sağlayan ilk elemanı çıkarıp sonrasında dizi üzerinde işleme devam etmenize olanak tanır.
Find() yöntemi, kullanımı oldukça basit bir yöntemdir. Dizi üzerinde sadece bir tane eleman döndürür ve elemanı dizi içinde kullanabileceğimiz bir şekilde geri verir. Bu gereksinimi karşılamak için, find() yöntemi ise uygun koşulları belirlememize yardımcı olur.
Örnek Kod: |
---|
let dizi = [20, 30, 40, 50]; let sonuc = dizi.find(function(eleman){ return eleman>30; }); console.log(sonuc); // 40 |
Yukarıdaki örnekte, dizi elemanları arasında 30'dan büyük olan ilk öğesi arıyoruz. Bu koşulu karşılayan ilk eleman, yani 40, find() yöntemi ile kullanılmak üzere bize geri döner.
Aşağıdaki örnek ise, bir nesne dizisi oluşturur ve bu dizideki ilk kişiyi bulmak için find() yöntemini kullanarak bir örnek sunar:
Örnek Kod: |
---|
let insanlar = [ { ad: 'Ali', yas: 25 }, { ad: 'Ayşe', yas: 30 }, { ad: 'Mehmet', yas: 45 }, { ad: 'Fatma', yas: 35 } ]; let ilkKisi = insanlar.find(function(insan){ return insan.yas > 30; }); console.log(ilkKisi); // { ad: 'Ayşe', yas: 30 } |
Burada, insanlar dizisi üzerinde her bir insanı kontrol ediyoruz ve 30 yaşından büyük olan ilk insana erişmek için find() yöntemini kullanıyoruz. İlk insana erişmek için, yukarıdaki örnekte olduğu gibi, bir fonksiyonu kullanarak koşulu belirledik.
unutmayın ki find() yöntemi, herhangi bir koşulu sağlayan ilk öğeyi döndürür ve bundan sonra döngü işlemine devam etmez.
some() ve every() Yöntemleri
JavaScript dizilerinde kullanılan some() ve every() yöntemleri, dizi elemanlarının belirli bir koşulu sağlayıp sağlamadığını kontrol etmek için oldukça kullanışlıdır. Bu yöntemler, koşulun her eleman için kontrol edilmesini sağlar ve sonucu boolean olarak döndürür. Bu sayede, dizi elemanlarının belirli bir koşulu sağlayıp sağlamadığı hızlı bir şekilde kontrol edilebilir.
some() yöntemi, dizideki herhangi bir elemanın koşulu sağlayıp sağlamadığını kontrol eder. Eğer koşulu sağlayan bir eleman varsa true değerini, yoksa false değerini döndürür. Örneğin;
Dizi | some() Sonucu |
---|---|
[2, 4, 6, 8] | true |
[1, 3, 5, 7] | false |
every() yöntemi ise, dizideki tüm elemanların koşulu sağlayıp sağlamadığını kontrol eder. Eğer tüm elemanlar koşulu sağlıyorsa true değerini, en az bir tanesi sağlamıyorsa false değerini döndürür. Örneğin;
Dizi | every() Sonucu |
---|---|
[2, 4, 6, 8] | true |
[2, 4, 6, 7] | false |
some() ve every() yöntemleri, özellikle büyük dizilerde koşulun tüm elemanlar üzerinde döngü yaparak kontrol edilmesi gerektiğinde oldukça kullanışlıdır. Bunun yanı sıra, bu yöntemler bir dizi içindeki elemanların belli bir koşulu sağlayıp sağlamadığını hızlı ve kolay bir şekilde kontrol etmek için de idealdir.
for ve while Döngüleri
JavaScript dizileri yinelemenin birçok yolu olduğu gibi, klasik for ve while döngüleri ile de yineleyebiliriz. Bu yöntemler daha yaygın olarak kullanılır ve daha eski bir yöntemdir. Bu yöntemler, foreach () veya map () yöntemleri gibi alternatiflere kıyasla daha az okunaklı kodlara sahip olabilir ve neredeyse herhangi bir türde yineleme işleminde kullanılabilir.
örneğin, bir dizi öğelerini dışarı çıkarmak ve konsola yazdırmak için aşağıdaki for döngüsü kullanılabilir:
```javascript let dizi = [1, 2, 3, 4, 5]; for (let i = 0; i < dizi.length; i++) { console.log(dizi[i]); }```Bu kod, 1'den 5'e kadar tüm öğeleri konsola yazdırır. for döngüsü, dizilerin her elemanına ulaşmak için dizi uzunluğunu kullanır ve her öğesi için belirtilen işlemi gerçekleştirir.
Alternatif olarak, while döngüsü ile de yineleme işlemini gerçekleştirebiliriz. Örneğin, aşağıdaki kod, 1'den 5'e kadar olan sayıları içeren bir dizi oluşturur ve while döngüsüyle bu öğeleri konsola yazar:
```javascript let dizi = [1, 2, 3, 4, 5]; let i = 0; while (i < dizi.length) { console.log(dizi[i]); i++; }```Bu kod, for döngüsünel benzer şekilde çalışır, fakat dizi elemanı sayısı denetlenir ve değişkenler sıfırlanır.
İster for döngüsü, ister while döngüsü kullanalım, her ikisi de hemen hemen aynı işlevi görür ve herhangi bir sayıda öğeyle çalışabilir. Bu yöntemlerin kullanılması, dizilerdeki elemanların sırasının izlenmesi gerektiği zamanlarda faydalıdır.
break ve continue İfadeleri
JavaScript dizilerinde döngü yaparken bazen işlemi durdurmak veya devam ettirmek gerekebilir. Bu gibi durumlarda break ve continue ifadeleri kullanılır.
break İfadesiBir döngü içinde kullanıldığında, break ifadesi döngüyü tamamen durdurur. Örneğin, bir dizi içinde belirli bir elemanı bulmak için bir for döngüsü kullanıyorsunuz ve istenilen elemanı bulduğunuzda döngü işlemlerini tamamen durdurmak istiyorsunuz. Bu gibi durumlarda, break ifadesini kullanabilirsiniz.
continue İfadesiBir döngü içinde kullanıldığında, continue ifadesi döngünün sadece o anki adımını atlar ve diğer adımlara geçer. Örneğin, bir dizi içinde bulunan tüm çift sayıları bulmak istiyorsunuz ve eğer bir sayı tek ise, sadece o adımı atlamak istiyorsunuz. Bu gibi durumlarda, continue ifadesini kullanabilirsiniz.
Aşağıdaki örnek kod bloğunda, bir dizinin tüm elemanlarını döngü ile geziyoruz. Eğer elemanın değeri 5 ise, işlemi durdurmak istiyoruz. Eğer elemanın değeri 3 ise, sadece o adımı atlamak istiyoruz.
var dizi = [1, 2, 3, 4, 5];for (var i = 0; i < dizi.length; i++) {
if (dizi[i] === 5) { break; // Döngüyü durdur } if (dizi[i] === 3) { continue; // Bu adımı atla } console.log(dizi[i]); // Elemanları yazdır}
Yukarıdaki örnekte görüldüğü gibi, break ve continue ifadeleri döngü işlemlerini durdurmak veya atlamak için oldukça kullanışlıdır. Ancak, çok fazla kullanımı kodun okunurluğunu azaltabilir.