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.

İçindekiler

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


const sayilar= [1,2,3,4,5,6,7,8,9];
const yeniDizi = sayilar.filter(sayi => sayi % 2 === 0);
console.log(yeniDizi); //[2, 4, 6, 8]

const sayilar= [1,2,3,4,5,6,7,8,9];

const yeniDizi = sayilar.filter(sayi => sayi % 2 === 0);

console.log(yeniDizi); //[2, 4, 6, 8]

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.


var sayilar = [1, 3, 6, 8, 11];
var secim = sayilar.filter(function(sayi) {
  return sayi > 7;
});

console.log(secim);// [ 8, 11 ]

var sayilar = [1, 3, 6, 8, 11];

var secim = sayilar.filter(function(sayi) {

return sayi > 7;

});

console.log(secim);// [ 8, 11 ]

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


const kisiler = [
	{isim: "Ahmet",soyad:"Can",yas:38},
	{isim: "Hayri",soyad:"Koç",yas:25},
	{isim: "Hüseyin",soyad:"Öz",yas:32},
	{isim: "Recep",soyad:"Orta",yas:36},
	{isim: "Ufuk",soyad:"İlk",yas:18}
];

const buyukYas =  kisiler.filter(function(kisi) {
	return kisi.yas > 35; //yaşı 35den büyük olanları filtreler
});
console.log(buyukYas)
/*
0: {isim: "Ahmet", soyad: "Can", yas: 38}
1: {isim: "Recep", soyad: "Orta", yas: 36}
*/

const kisiler = [

{isim: "Ahmet",soyad:"Can",yas:38},

{isim: "Hayri",soyad:"Koç",yas:25},

{isim: "Hüseyin",soyad:"Öz",yas:32},

{isim: "Recep",soyad:"Orta",yas:36},

{isim: "Ufuk",soyad:"İlk",yas:18}

];

const buyukYas = kisiler.filter(function(kisi) {

return kisi.yas > 35; //yaşı 35den büyük olanları filtreler

});

console.log(buyukYas)

0: {isim: "Ahmet", soyad: "Can", yas: 38}

1: {isim: "Recep", soyad: "Orta", yas: 36}

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


const sayilar = [1,2,3,4];
const kareleri = sayilar.map(sayi => sayi*sayi); 
console.log(kareleri);//[1, 4, 9, 16]

const sayilar = [1,2,3,4];

const kareleri = sayilar.map(sayi => sayi*sayi);

console.log(kareleri);//[1, 4, 9, 16]

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


const kisiler = [
	{isim: "Ahmet",soyad:"Can",yas:38},
	{isim: "Hayri",soyad:"Koç",yas:25},
	{isim: "Hüseyin",soyad:"Öz",yas:32},
	{isim: "Recep",soyad:"Orta",yas:36},
	{isim: "Ufuk",soyad:"İlk",yas:18}
];

const yeniDizi=kisiler.map(function(kisi){
    kisi.isim =  kisi.isim.toUpperCase();
    return kisi;
});
    
console.log(yeniDizi)
/*
0: {isim: "AHMET", soyad: "Can", yas: 38}
1: {isim: "HAYRI", soyad: "Koç", yas: 25}
2: {isim: "HÜSEYIN", soyad: "Öz", yas: 32}
3: {isim: "RECEP", soyad: "Orta", yas: 36}
4: {isim: "UFUK", soyad: "İlk", yas: 18}

*/

const kisiler = [

{isim: "Ahmet",soyad:"Can",yas:38},

{isim: "Hayri",soyad:"Koç",yas:25},

{isim: "Hüseyin",soyad:"Öz",yas:32},

{isim: "Recep",soyad:"Orta",yas:36},

{isim: "Ufuk",soyad:"İlk",yas:18}

];

const yeniDizi=kisiler.map(function(kisi){

kisi.isim = kisi.isim.toUpperCase();

return kisi;

});

console.log(yeniDizi)

0: {isim: "AHMET", soyad: "Can", yas: 38}

1: {isim: "HAYRI", soyad: "Koç", yas: 25}

2: {isim: "HÜSEYIN", soyad: "Öz", yas: 32}

3: {isim: "RECEP", soyad: "Orta", yas: 36}

4: {isim: "UFUK", soyad: "İlk", yas: 18}

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


const dizi = [1,[2,[3,[4]]]];
const duzdizi = dizi.flat(3); // [1,2,3,4]

const dizi = [1,[2,[3,[4]]]];

const duzdizi = dizi.flat(3); // [1,2,3,4]


const hayvanlar = [['🐕', '🐶'], ['😺', '🐈']];
const duzDizi = hayvanlar.flat();
console.log(duzDizi); // ['🐕', '🐶', '😺', '🐈']

const hayvanlar = [['🐕', '🐶'], ['😺', '🐈']];

const duzDizi = hayvanlar.flat();

console.log(duzDizi); // ['🐕', '🐶', '😺', '🐈']

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


const dizi = [1,2,3,4];
dizi.reverse(); // [4,3,2,1]

const dizi = [1,2,3,4];

dizi.reverse(); // [4,3,2,1]

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


    const dizi=[1,2,3,4,5];
    const sonuc = dizi.reduce((toplam, sayi) => toplam + sayi*sayi);
    console.log(sonuc); //55

const dizi=[1,2,3,4,5];

const sonuc = dizi.reduce((toplam, sayi) => toplam + sayi*sayi);

console.log(sonuc); //55

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


[0, 1, 2, 3, 4].reduce(function(akumulator, mevcutDeger, index, array) {
  return akumulator + mevcutDeger;
}, 10);

[0, 1, 2, 3, 4].reduce(function(akumulator, mevcutDeger, index, array) {

return akumulator + mevcutDeger;

}, 10);

callback	akumulator	mevcutDeger	index	array	return degeri
1. çağrı	10	0	0	[0, 1, 2, 3, 4]	10
2. çağrı	10	1	1	[0, 1, 2, 3, 4]	11
3. çağrı	11	2	2	[0, 1, 2, 3, 4]	12
4. çağrı	12	3	3	[0, 1, 2, 3, 4]	15
5. çağrı	15	4	4	[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.


[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
  return accumulator + currentValue;
}, 10);

[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {

return accumulator + currentValue;

}, 10);

callback	accumulator	currentValue	index	array	return value
1. çağrı	10	4	4	[0, 1, 2, 3, 4]	14
2. çağrı	14	3	3	[0, 1, 2, 3, 4]	17
3. çağrı	17	2	2	[0, 1, 2, 3, 4]	19
4. çağrı	19	1	1	[0, 1, 2, 3, 4]	20
5. çağrı	20	0	0	[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.


const dizi = [1,2,3,4];
const eslesen = dizi.find(sayi => sayi % 2 === 0); // 2
console.log(eslesen); //2

const dizi = [1,2,3,4];

const eslesen = dizi.find(sayi => sayi % 2 === 0); // 2

console.log(eslesen); //2

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


const dizi = [1,2,3,4];
const eslesen = dizi.findIndex(sayi => sayi % 2 === 0); // 1

const dizi = [1,2,3,4];

const eslesen = dizi.findIndex(sayi => sayi % 2 === 0); // 1

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


let sayilar = [2, 4, 6, 60, 10, 10];
    
const durum = sayilar.every(function(sayi){
    return sayi%2===0;
});
    
console.log(durum); //true
    
//diziye bir tane tek sayı atalaım ve tekrar kontrol edelim.
sayilar.push(3);
const durum2 = sayilar.every(function(sayi){
    return sayi%2===0;
});
    
console.log(durum2); //false

let sayilar = [2, 4, 6, 60, 10, 10];

const durum = sayilar.every(function(sayi){

return sayi%2===0;

});

console.log(durum); //true

//diziye bir tane tek sayı atalaım ve tekrar kontrol edelim.

sayilar.push(3);

const durum2 = sayilar.every(function(sayi){

return sayi%2===0;

});

console.log(durum2); //false

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


var isimler = ['Ali', 'Ahmet', 'Fatma', 'Ayşe', 'Nermin'];
console.log(isimler.copyWithin(1, 2, 4));
["Ali", "Fatma", "Ayşe", "Ayşe", "Nermin"]

var isimler = ['Ali', 'Ahmet', 'Fatma', 'Ayşe', 'Nermin'];

console.log(isimler.copyWithin(1, 2, 4));

["Ali", "Fatma", "Ayşe", "Ayşe", "Nermin"]

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;


var isimler = ['Nermin', 'Ahmet', 'Fatma', 'Ayşe', 'Ali'];
console.log(isimler.sort());
//["Ahmet", "Ali", "Ayşe", "Fatma", "Nermin"]

var isimler = ['Nermin', 'Ahmet', 'Fatma', 'Ayşe', 'Ali'];

console.log(isimler.sort());

//["Ahmet", "Ali", "Ayşe", "Fatma", "Nermin"]

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


    const kisiler = [
        {isim: "Ahmet",soyad:"Can",yas:38},
        {isim: "Hayri",soyad:"Koç",yas:25},
        {isim: "Hüseyin",soyad:"Öz",yas:32},
        {isim: "Recep",soyad:"Orta",yas:36},
        {isim: "Ufuk",soyad:"İlk",yas:18}
    ];

    //kişileri yaşa göre sıralayalım
    kisiler.sort(function(a,b){
        return a.yas - b.yas;
    })
    
    console.log(kisiler)
    /*
    0: {isim: "Ufuk", soyad: "İlk", yas: 18}
    1: {isim: "Hayri", soyad: "Koç", yas: 25}
    2: {isim: "Hüseyin", soyad: "Öz", yas: 32}
    3: {isim: "Recep", soyad: "Orta", yas: 36}
    4: {isim: "Ahmet", soyad: "Can", yas: 38}
    */

const kisiler = [

{isim: "Ahmet",soyad:"Can",yas:38},

{isim: "Hayri",soyad:"Koç",yas:25},

{isim: "Hüseyin",soyad:"Öz",yas:32},

{isim: "Recep",soyad:"Orta",yas:36},

{isim: "Ufuk",soyad:"İlk",yas:18}

];

//kişileri yaşa göre sıralayalım

kisiler.sort(function(a,b){

return a.yas - b.yas;

})

console.log(kisiler)

0: {isim: "Ufuk", soyad: "İlk", yas: 18}

1: {isim: "Hayri", soyad: "Koç", yas: 25}

2: {isim: "Hüseyin", soyad: "Öz", yas: 32}

3: {isim: "Recep", soyad: "Orta", yas: 36}

4: {isim: "Ahmet", soyad: "Can", yas: 38}

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


    let sayilar=[5,3,4,8,3,7,10,11];
    sayilar.sort(function(a,b){
        if(a%2===0) 
            return -1;
    }) 
    //[10, 8, 4, 5, 3, 3, 7, 11]

let sayilar=[5,3,4,8,3,7,10,11];

sayilar.sort(function(a,b){

if(a%2===0)

return -1;

})

//[10, 8, 4, 5, 3, 3, 7, 11]

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


const dizi = [1,2,3,4];
dizi.some((sayi) => {
    return sayi % 5 === 0;
}); // false

const dizi = [1,2,3,4];

dizi.some((sayi) => {

return sayi % 5 === 0;

}); // false

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


var dizi = ['a', 'b', 'c'];

dizi.forEach(function(element) {
  console.log("sonuc:"+element);
});
/*
sonuc:a
sonuc:b
sonuc:c
*/

var dizi = ['a', 'b', 'c'];

dizi.forEach(function(element) {

console.log("sonuc:"+element);

});

sonuc:a

sonuc:b

sonuc:c

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.

EtiketlerJavaScript Dizi Fonksiyonları JavaScript Diziler

JavaScript Dizileri ve Fonksiyonları

.filter()

.map()

.flat()

.reverse()

.reduce()

.reduceRight()

.find()

.findIndex()

.every()

.copyWithin()

.sort()

.some()

.forEach()

Sonuç

1 Yorum

İptal Et

Sonuç

Bunları da beğenebilirsiniz

1 Yorum