Mövzunu Açan
#0
Array Metotları Tam Rehber
Yazılım geliştirme serüvenimizde, veri yapılarıyla çalışmak kaçınılmaz bir gerçek. Özellikle diziler (array'ler), hemen hemen her uygulamada karşımıza çıkıyor ve bu dizileri etkin bir şekilde manipüle edebilmek, kod kalitemizi ve verimliliğimizi doğrudan etkiliyor. Geleneksel döngüleriyle her şeyi halletmeye çalışmak, özellikle modern JavaScript gibi dillerde, hem okunabilirliği düşürüyor hem de gereksiz karmaşıklığa yol açabiliyor. İşte tam bu noktada, dilin bize sunduğu güçlü array metotları devreye giriyor. Bu metotlar, diziler üzerinde karmaşık işlemleri bile tek satırda, deklaratif bir yaklaşımla gerçekleştirmemizi sağlıyor.
Peki, neden döngüler yerine metotları tercih etmeliyiz? Birincisi, kodun niyeti çok daha açık hale geliyor. gördüğünüzde, bir dönüşüm olduğunu anlarsınız; gördüğünüzde, bir eleme işlemi beklersiniz. Bu, kodun sadece "nasıl" çalıştığını değil, aynı zamanda "ne" yaptığını da anlatır. İkincisi, hata yapma olasılığımız azalır. Döngülerde başlangıç, bitiş koşulları, artırım gibi detayları manuel yönetmek zorundayız; bu da off-by-one hataları gibi klasik sorunlara davetiye çıkarır. Metotlar ise bu detayları bizim için soyutlar.
Şimdi gelin, bu güçlü array metotlarını yakından inceleyelim. Her birinin ne işe yaradığını, nasıl kullanıldığını ve hangi senaryolarda hayat kurtarıcı olabileceğini örneklerle görelim.
1. İterasyon ve Dönüşüm Metotları: Dizileri Anlama ve Şekillendirme
Bu grup, dizilerin üzerinde gezinmek, elemanlarını dönüştürmek veya belirli koşullara göre yeni diziler oluşturmak için kullanılır. Belki de en sık kullandığımız metotlar bu kategoridedir.
2. Diziyi Değiştiren (Mutating) Metotlar: Dikkatli Olun!
Bu metotlar, orijinal diziyi doğrudan değiştirir. Bu durum, özellikle referans tipi değişkenlerle çalışırken beklenmedik yan etkilere yol açabileceği için dikkatli kullanılmalıdır.
[list]
ve :
, dizinin sonuna bir veya daha fazla eleman ekler ve dizinin yeni uzunluğunu döndürür.
, dizinin son elemanını kaldırır ve kaldırılan elemanı döndürür.
ve :
, dizinin ilk elemanını kaldırır ve kaldırılan elemanı döndürür. Dizinin uzunluğunu değiştirir ve diğer elemanların indekslerini günceller.
, dizinin başına bir veya daha fazla eleman ekler ve dizinin yeni uzunluğunu döndürür.
:
Bu metot, dizinin belirli bir bölümünü kaldırabilir, yerine yeni elemanlar ekleyebilir veya her ikisini birden yapabilir. Çok yönlüdür ve dikkatli kullanılmalıdır. Kaldırılan elemanları içeren bir dizi döndürür.
[code]
const renkler = ['kırmızı', 'yeşil', 'mavi', 'sarı'];
// 1. indeksten başlayarak 2 eleman sil:
const silinenRenkler
Yazılım geliştirme serüvenimizde, veri yapılarıyla çalışmak kaçınılmaz bir gerçek. Özellikle diziler (array'ler), hemen hemen her uygulamada karşımıza çıkıyor ve bu dizileri etkin bir şekilde manipüle edebilmek, kod kalitemizi ve verimliliğimizi doğrudan etkiliyor. Geleneksel
CODE
1forPeki, neden döngüler yerine metotları tercih etmeliyiz? Birincisi, kodun niyeti çok daha açık hale geliyor.
CODE
1.map()CODE
1.filter()Şimdi gelin, bu güçlü array metotlarını yakından inceleyelim. Her birinin ne işe yaradığını, nasıl kullanıldığını ve hangi senaryolarda hayat kurtarıcı olabileceğini örneklerle görelim.
1. İterasyon ve Dönüşüm Metotları: Dizileri Anlama ve Şekillendirme
Bu grup, dizilerin üzerinde gezinmek, elemanlarını dönüştürmek veya belirli koşullara göre yeni diziler oluşturmak için kullanılır. Belki de en sık kullandığımız metotlar bu kategoridedir.
- :CODE
1
.forEach(callbackFunction)
Bu metot, dizinin her bir elemanı üzerinde bir işlem yapmak için kullanılır. Genellikle bir yan etki (side effect) yaratmak istediğinizde tercih edilir; örneğin, her elemanı konsola yazdırmak veya her elemana göre DOM'da bir değişiklik yapmak gibi. Yeni bir dizi döndürmez, orijinal diziyi değiştirmez.
CODE1234567891011
const sayilar = [1, 2, 3, 4, 5]; sayilar.forEach(sayi => { console.log([icode]Sayı: ${sayi}[/icode]); // Her sayıyı konsola yazar }); // Çıktı: // Sayı: 1 // Sayı: 2 // Sayı: 3 // Sayı: 4 // Sayı: 5
- :CODE
1
.map(callbackFunction)
, orijinal dizinin her bir elemanı üzerinde bir dönüşüm işlemi uygulayarak yeni bir dizi oluşturur. Orijinal dizi değişmez. Bu, bir dizinin içeriğini başka bir formata dönüştürmeniz gerektiğinde vazgeçilmez bir araçtır. Örneğin, bir sayı dizisini karelerini içeren yeni bir diziye dönüştürmek...CODE1
.map()
CODE12345
const fiyatlar = [10, 20, 30]; const kdvliFiyatlar = fiyatlar.map(fiyat => fiyat * 1.18); console.log(kdvliFiyatlar); // Çıktı: [11.8, 23.6, 35.4] console.log(fiyatlar); // Çıktı: [10, 20, 30] (Orijinal dizi değişmedi)
- :CODE
1
.filter(callbackFunction)
Adından da anlaşılacağı gibi,dizideki elemanları belirli bir koşula göre filtreleyerek yeni bir dizi oluşturur. Geriye dönen callback fonksiyonuCODE1
.filter()olan elemanlar yeni dizide yer alır,CODE1
trueolanlar ise atılır.CODE1
false
CODE123456789101112131415
const urunler = [ { ad: 'Laptop', fiyat: 5000 }, { ad: 'Klavye', fiyat: 500 }, { ad: 'Mouse', fiyat: 200 }, { ad: 'Monitör', fiyat: 2500 } ]; const pahaliUrunler = urunler.filter(urun => urun.fiyat > 1000); console.log(pahaliUrunler); /* Çıktı: [ { ad: 'Laptop', fiyat: 5000 }, { ad: 'Monitör', fiyat: 2500 } ] */
- :CODE
1
.reduce(callbackFunction, initialValue)
Belki de array metotları arasında en esnek ve en güçlü olanı'dur. Dizideki tüm elemanları tek bir değere indirgemek (reduce) için kullanılır. Bu değer bir sayı, bir nesne, hatta yeni bir dizi bile olabilir.CODE1
.reduce()iki ana parametre alır: accumulator (birikici) ve currentValue (mevcut değer). initialValue ise accumulator'ın başlangıç değeridir.CODE1
callbackFunction
CODE12345678910
const sepet = [ { urun: 'A', adet: 2, fiyat: 10 }, { urun: 'B', adet: 1, fiyat: 25 }, { urun: 'C', adet: 3, fiyat: 5 } ]; const toplamTutar = sepet.reduce((toplam, urun) => { return toplam + (urun.adet * urun.fiyat); }, 0); // Başlangıç değeri 0 console.log([icode]Toplam Tutar: ${toplamTutar} TL[/icode]); // Çıktı: Toplam Tutar: 60 TL
- veCODE
1
.some(callbackFunction):CODE1
.every(callbackFunction)
Bu metotlar, dizideki elemanların belirli bir koşulu karşılayıp karşılamadığını kontrol eder ve boolean bir değer döndürür.
, en az bir eleman koşulu sağlıyorsaCODE1
.some()döndürür.CODE1
true
, tüm elemanlar koşulu sağlıyorsaCODE1
.every()döndürür.CODE1
true
CODE1234567
const notlar = [45, 60, 80, 30, 90]; const basariliVarMi = notlar.some(not => not >= 50); console.log([icode]Başarılı öğrenci var mı? ${basariliVarMi}[/icode]); // Çıktı: Başarılı öğrenci var mı? true const hepsiGectiMi = notlar.every(not => not >= 50); console.log([icode]Herkes geçti mi? ${hepsiGectiMi}[/icode]); // Çıktı: Herkes geçti mi? false
2. Diziyi Değiştiren (Mutating) Metotlar: Dikkatli Olun!
Bu metotlar, orijinal diziyi doğrudan değiştirir. Bu durum, özellikle referans tipi değişkenlerle çalışırken beklenmedik yan etkilere yol açabileceği için dikkatli kullanılmalıdır.
[list]
CODE
1.push(element1, ...)CODE
1.pop()CODE
1.push()CODE
1.pop()CODE
12345678
const meyveler = ['elma', 'armut'];
meyveler.push('muz', 'çilek');
console.log(meyveler); // Çıktı: ['elma', 'armut', 'muz', 'çilek']
const cikanMeyve = meyveler.pop();
console.log(meyveler); // Çıktı: ['elma', 'armut', 'muz']
console.log(cikanMeyve); // Çıktı: çilek
CODE
1.shift()CODE
1.unshift(element1, ...)CODE
1.shift()CODE
1.unshift()CODE
12345678
const sira = ['ali', 'veli', 'can'];
const ilkCikan = sira.shift();
console.log(sira); // Çıktı: ['veli', 'can']
console.log(ilkCikan); // Çıktı: ali
sira.unshift('ayşe', 'fatma');
console.log(sira); // Çıktı: ['ayşe', 'fatma', 'veli', 'can']
CODE
1.splice(start, deleteCount, item1, ...)Bu metot, dizinin belirli bir bölümünü kaldırabilir, yerine yeni elemanlar ekleyebilir veya her ikisini birden yapabilir. Çok yönlüdür ve dikkatli kullanılmalıdır. Kaldırılan elemanları içeren bir dizi döndürür.
[code]
const renkler = ['kırmızı', 'yeşil', 'mavi', 'sarı'];
// 1. indeksten başlayarak 2 eleman sil:
const silinenRenkler