JavaScript

JavaScript Dizileri ve Fonksiyonları

Şüphesiz, diziler en kullanışlı ve son derece popüler veri yapılarından biridir. Her programlama dilinde olduğu gibi JavaScript programlama dilinde de durum böyledir. Bu indekslenmiş koleksiyonlar, çeşitli kullanım durumları için hala en iyi tercih olduklarını tekrar tekrar kanıtlamaktadır.  Ancak diziler kendi başına, son derece etkileyici API’leri olmadan o kadar değerli olmaları mümkün değil. Bu yazının amacı bu apilerden bir kaç tanesinin kullanımını göstermek olacaktır.

Dizilerde kullanılan API’ler dizilerin yapısına doğal olarak dahil edilen fonksiyonlardan başka bir şey değildir. Bazı fonksiyonları sıklıkla duymuş olabilirsiniz. Ancak yazının devamında da hiç duymadığınız fonksiyon isimleri de karşınıza çıkacaktır.  Bazıları şaşırtıcı derecede çok eskilere dayanıyor! Bu fonksiyonların yardımıyla, daha temiz, daha işlevsel ve bazen daha da performanslı JS kodu yazabilirsiniz. Bazıları daha kolay olabilir, bazıları daha zor olabilir, ancak bu makale kesinlikle yeni başlayanlara yönelik değil! Elbette, hepsini bilmiyorsanız okumayacaksınız anlamına gelmiyor. Anlamak ve anlamlandırmak için biraz zaman ayırıp kodları yazarak değerlendirmeye çalışın.

.filter()

Sanırım filitrelemek diziler için ne kadar önemli olduğunu biliyordur. .filter() ile sadece bunu(filitrelemek) yapabilirsiniz! Tek yapmanız gereken, geçerli öğenin değeri, dizini ve kaynak dizisi verildiğinde, verilen öğenin sonuç dizisine dahil edilip edilmemesi gerektiğini belirten bir boolean değeri vermesi gereken bir süzme işlevini iletmektir. Dizinin değeri değişmemektedir. filter() işleminden sonra yeni bir dizi döndürülür. Lafı fazla karıştırmışsın be diyorsanız.

Buyrun örneğe; sayilar dizini filter() fonksiyonu içinde arrow fonksiyon ile sayının ikiye bölümünden kalan işlemine tabi tutuyor. Bu şart ile eşleşen tüm değerlerden yeni bir dizi oluşturuluyor.

Arrow fonksyion bana karışık geldi diyorsanız. Daha basit bir örnek yapalım. Yine sayilar dizi içindeki sayılardan 7den büyük olanlardan yeni bir dizi oluşturuyoruz.

Şöyle bir de nesne örneği olsa onun üzerinde incelesek fena olmaz diyorsanız. Sizi aşağıdaki örneği incelemeye alalım.

 

.map()

.map() muhtemelen Front Page JS programlamasında en sevilen dizi fonksiyonlarından biridir. Bildiğiniz gibi diziyi işleyip, bu diziden yeni bir dizi döndürür. Sözü edilen fonksiyon, standart bir eleman kümesi parametresi, onun indeksi ve kaynak dizisi parametrelerini sağlar ve sonuca dahil edilecek değeri döndürmelidir. Yani, tüm bu verilerle, dizinizi istediğiniz gibi değiştirmek için ihtiyacınız olan her şeye sahip olmalısınız! Genellikle verilen örnek sayıları alıp, bu sayıların karelerinden oluşan yeni bir dizi döndürmek şeklinde olur. Hadi örneğe bakalım.

Bir tane de nesneli örnek yapalım. Yine filtre için kullandığımız nesne örneğinden faydalanarak. Kişilerin adlarının başına

 

.flat()

İç içe geçmiş diziler, günümüzde oldukça yaygın kullanılmaktadır.  2D veya 3D veri formatlarını temsil ederken özellikle yararlı olduklarını biliriz. Bu boyutlarls daha da derine inmek tamamen mümkün, ancak hepimizin bildiği gibi, daha sonra bu verileri takip etmek ve bunlara erişmek zorlaşıyor.

ECMAScript spesifikasyon geliştirmesinin arkasındaki çocuklar bu sorunlar için deneysel taryıcılarda bize bu imkanı sunan fonksiyonları geliştirdiler. İşte bu işlemi iç içe diziler ile işlem yapabileceğimiz .flat() metodunu kullanarak iç içe olan dizileri düzleştirme imkanı buluruz. Kuralları basittir – iç içe dizinizi, belirtilen derinliklere göre (varsayılan olarak 1’e kadar) düzleştirir, etkili bir şekilde sizi her zamankinden daha düz bir diziyle bırakır!

 

.reverse()

Kesinlikle basit, ama biraz az bilinen bir yöntem olan .reverse() (ters çevir) tam olarak adının ima ettiği şeyi yapar.

Dizinizin içindeki öğelerin sırasını tersine çevirir. Yani sonuncusu ilk olacak. Bu, büyük olasılıkla, farklı türdeki kuyruklarla çalışırken kullanışlı olacaktır. Bu yöntemin diziyi değiştirdiğini unutmayın.

 

.reduce()

Dizinizi hızlı bir şekilde tek bir değere dönüştürmek (“azaltmak”) istiyorsanız, .reduce() yöntemiyle serbestçe yapabilirsiniz.  Bir dizideki sayıların karelerinin toplamını döndüren bir örnek yapalım.

reduce() ile bir fonksiyon çalıştırılıp 4 tane parametre gönderilebilir.  Daha detaylı örnek için MDN üzerindeki örneği ekliyorum.

callbackakumulatormevcutDegerindexarrayreturn degeri
1. çağrı1000[0, 1, 2, 3, 4]10
2. çağrı1011[0, 1, 2, 3, 4]11
3. çağrı1122[0, 1, 2, 3, 4]12
4. çağrı1233[0, 1, 2, 3, 4]15
5. çağrı1544[0, 1, 2, 3, 4]19

.reduceRight()

Yeri gelmişken yazayım. recude() fonksiyonu ilk index ile başlayıp son endekse doğru ilerlemektedir. Son indexten başlayıp ilk indexe doğru gitmek isterseniz. reduceRight() fonksiyonunu kullanabilirsiniz. Yine yukarıdaki örneği reduceRight ile aşağıdaki gibi işlediğimizde kodlar ve sonuç aşağıdaki gibi olacaktır.

callbackaccumulatorcurrentValueindexarrayreturn value
1. çağrı1044[0, 1, 2, 3, 4]14
2. çağrı1433[0, 1, 2, 3, 4]17
3. çağrı1722[0, 1, 2, 3, 4]19
4. çağrı1911[0, 1, 2, 3, 4]20
5. çağrı2000[0, 1, 2, 3, 4]20

 

.find()

Dizideki belirli bir öğeyi bulmak, elbette ilk veya sonuncusu olmadığı sürece zor bir iş olabilir .find () yöntemi gerçekten yardımcı olabilir. (Bu arada, ES6’da eklendi ) Standart parametre setini idare eden kontrol fonksiyonunu alır ve verilen diziden ilk eşleşen değeri, aksi tanımlanmamış olarak döndürür.

Aşağıdaki örnekte arrow fonksiyon içinde çift sayı kontrolü yapılmatadır. find() ile dizi elemanlarına çift mi fonksiyonu uygulanıp ilk eşleşen değer döndürülmektedir.

 

.findIndex()

.find() fonksiyonunun bir de yani kayıt eşleştiğinde index değerini döndüren fonksiyonu vardır. Başlıktan anlaşılacağı gibi bu fonksiyonunun adı .findIndex() tir.

 

.every()

Şöyle bir ifade kullanırsak .every() için hatalı olacaktır. Belirtilen dizinin elemanını basitçe çalıştırır dersek hatalı olacağını söylemiştim. Bunun yerine .every() aslonda her öğeyi belirtilen fonksiyon ile çalıştırır ve belirtilen şarta uygun değerler döndürüyorsa boolean olarak true döndüren bir fonksiyondur.

Burada tüm dizi öğelerini bir fonksiyon ile kontrol etmemizi sağlar. Örneğin boş geçilemez türünde bir formdaki tüm alanların dolu olup olmadığını kontrol etmek gibi. Aşağıdaki örnekte dizideki sayıların hepsinin çift olup olmadığı kontrol edilmektedir.

.copyWithin()

Verileri tek bir dizinin sınırları içinde kopyalamak, bazıları için biraz karmaşık ve anlamsız olabilir. Fakat yüksek performans gerektirdiği durumlarda basit fonksiyonlar daha kurtarmaktadır. Bu fonksiyon da bunlardan bir tanesidir.

Yukarıdaki örnekte index numarası 1 olan değerden başlayıp, yine index numarası 2 ile 4 arasındaki (4 dahil değil) değerleri kopyalar.

 

.sort()

.sort(), adından da açıkça anlaşılacağı şekilde açıkça yapan bu yöntemlerden biridir. Bu durumda – sadece dizinizi sıralar. Sağlanan bir karşılaştırma fonksiyonu ile de sıralama yapılabileceği gibi karşılaştırma fonksiyonu olmadan da yapılabilir. Varsayılan olarak, tüm değerler dizgelere dönüştürülür ve artan bir şekilde UTF-16 kod  değerleri ile sıralanır, bu sayılar daha küçükten büyüğe ve dizelerin alfabetik olarak sıralanmasıdır. Ayrı parametreler olarak karşılaştırma için iki eleman alan bir fonksiyon da sağlayabilirsiniz. Bu karşılaştırma işlevi bir sayı döndürmelidir, daha sonra sağlanan değerleri verilen yolla sıralamak için kullanılır:

eğer fonksiyon 0’dan küçük bir sayı verirse, ilk parametre olarak verilen değer önce gelir;
eğer fonksiyon 0’a eşit bir sayı döndürürse, değerler değişmeden kalacaktır;
eğer fonksiyon 0’dan daha büyük bir sayı verirse, ikinci parametre olarak verilen değer önce gelir;

Nesnelerin özelliklerine göre sıralama yapalım.

Size yorumlamanız için bir örnek. Aşağıdaki sayilar çift sayılar önde olacak şekilde sıralanmıştır.

 

.some()

some () .every () fonksiyonuna benzer bir yöntemdir. Kaynak dizinin içindeki öğelerin belirli kurallara uyup uymadığını kontrol eder Aradaki fark, .some() ‘nun testi geçmesi için sadece bir element gerektirmesi,  .every ()’da ise her element testi geçmesi gerekir. Verilen özelliklere sahip en az bir değer olup olmadığını kontrol edin. Sağlanan test fonksiyonu standart bir parametre seti alır (eleman, indeks ve kaynak dizisi)

.forEach()

diziler ile işlem yaparken en çok kullandığım fonksiyon ile yazıyı sonlandırayım. Çoğu fonksiyon için yazdığım gibi adı neyse onu yapar. her öğeyi belirtilen fonksiyon ile işleme sokar. Yukarıdaki fonksiyonlardan farklı olarak sonuç döndürmez. Belirtilen işlemi gerçekleştirilir.

C tabanlı diğer programlama dillerinde olduğu gibi forEach kullanımına benzer bir kullanımı vardır. Biraz daha detaylı kullanımı olmasına rağmen yukarıdaki kullanım fazlası ile yeterli olacaktır.

 

Sonuç

Yukarıdaki dizi fonksiyonları benim hazırladığım uygulamalarda hayat kurtarıcı olarak kullandığım ilginç fonksiyonlardan bazılarıdır. Şüphesiz bunların dışında da fonksiyonlar var (concat, push, pop). Ancak sizler bunları biliyorsunuzdur.

Umarım bu yazı yazacağınız javascript kodlarında yardımcı olur. Yazıyı beğendiyseniz Facebook, Twitter, Instagram gibi sosyal medya platformlarında paylaşırsanız daha çok kişiye ulaşmasına yarımcı olursunuz.

 

 

 

 

Yorum bırak