Javascript .filter() Array Fonksiyonu — Örneği — Kullanımı
Bir önceki yazımda .filter() fonksiyonunın kardeşi olan .find() fonksiyonundan bahsetmiştim. Bu yazıda ise aslında benzer şeylerden biraz daha farklı şekilde bahsediyor olacağım.
Özet olarak şöyle başlayabiliriz; .filter() fonksiyonu bize bir liste / dizi / array dönecek. Yani dizi içerisinden yeni bir diziyi bize dönmüş olacak. .find() ise sadece array / dizi içerisinden bir eleman dönüyordu. İşte bu kadar basit. Elbette ikisi de undefined dönebilir, buna daha önceden değinmiştim. Bunu da unutmamak gerekiyor.
Array fonksiyonları konusuna ilk girişte bir örnek vermiştim, bunu tekrar etmek gerekirse;
.find() ve .filter() Farkı
Hemen aklımızda kalması için basit bir örnek ile başlayalım. Eğer array içerisinden sadece bir elemanı seçeceksek, .find() kullanıyoruz. Eğer ki birden fazla elemanı olan bir liste döndüreceksek ise .filter() kullanıyoruz. [C#’taki] First() ve ToList() arasındaki fark kadar temiz :)
Unutmadan hemen söyleyeyim, find() ile array içerisinden bir sonuç çıkartamazsak, sonucumuz undefined olacaktır. Bu yüzden de
console.log(yas100 || 'sonuç yok')sonucumuzu console.log ile yazdırırken, sonuç bulunamazsa ekrana ne döneceğimizi de belirtebiliriz. Örneğin biz burada sonuç yoksa sonuç yok demişiz :)
Array Functions: filter() Örneği
https://github.com/mustafacagri/javascript-array-functions adresinde Array fonksiyonlarının tamamının olduğu bir proje oluşturmuştum. Öyle ki burada yazdıkça oraya da aynılarını ekliyorum.
Ayrıca, kisiler dizisine ve örnek verilere de Github reposu üzerinden ulaşabilirsiniz.
Şimdi gelin örneğimizi tek tek inceleyelim.
C# ile haşır neşir olanların bu konuda çok büyük bir avantajı var çünkü Linq ile neredeyse birebir aynı mantıkla ve kod yazım şekliyle ilerliyoruz.
- const yas40 = kisiler.filter( kisi => kisi.yas < 40 ) burada dizi içerisindeki yas objesinin değeri 40’tan küçük olanları yeni bir diziye atıyoruz. Ve sonrasında da console.log ile bu yeni diziyi ekrana getiriyoruz. Burada arrow functions kullanmış olduk. Eski haliyle de kullanılabilir ancak tercih etmeseniz daha iyi olacaktır. O da şu şekilde olacaktı:
const yas40 = kisiler.filter(function (kisi){
return kisi.yas < 40
}
)Arrow function ile daha kolay, hızlı ve akılda kalıcı, değil mi?
Yaşı 50’den küçük, göz rengi kahve olanlar?
Bir başka örnekte de koşul sayımızı ikiye çıkartalım mı?
const yas40GozKahve = kisiler.filter(kisi => kisi.yas < 40 && kisi.gozRengi == 'kahve')Javascript’teki && (and / ve) işareti ile koşullarımızın ikisinin de aynı anda sağlandığı durumları görmek istedik. Böylece karşımıza göz rengi kahve ve yaşı da 50’den küçük olanlar gelmiş oldu.
Boyu 160’dan büyük, Balıkesir’de yaşayan erkekler?
const balikesir50Erkek = kisiler.filter(kisi => kisi.yas > 50 && kisi.cinsiyet == 'erkek' && kisi.sehir == 'Balıkesir')Yaşı 30 üzerinde olanlar veya kadınlar?
Şimdi işler biraz karışmış olabilir. Az önce AND (&&) operatörü kullanırken şimdi OR (veya ||) operatörü kullanacağız.
const yas30VeyaKadinlar = kisiler.filter(aaaa => aaaa.yas > 30 || aaaa.cinsiyet == 'kadin')Burada fark ettiyseniz kisi yerine aaaa demişim. Aslında burada dizi içerisindeki elemanları hangi isimle gezeceğinizi belirtmiş oluyorsunuz. Bu nedenle de istediğiniz ismi vermekte özgürsünüz.
Genel olarak Javascript’te .filter() array fonksiyonu bu şekilde kullanılıyor. Aklınıza takılan bir kısım olursa lütfen sormaktan çekinmeyin. Ayrıca, Github’taki repoya da aklınıza gelen farklı örnekleri ekleyebilirsiniz. Repoyu forkladıktan sonra Pull Request göndermeniz yeterli olacaktır.
Bir sonraki yazıda görüşmek üzere…
Kaynak: https://www.mustafacagri.com/filter-javascript-array
