JavaScript Eğitimi #6: Diziler ve Array Metodları - Veri Koleksiyonlarıyla Çalışma
JavaScript dizilerini ve güçlü array metodlarını öğrenin. map, filter, reduce, find, sort ve daha fazlasıyla veri manipülasyonunda ustalaşın.
JavaScript Eğitimi #6: Diziler ve Array Metodları
Önceki derslerde fonksiyonları öğrendik. Şimdi sıra programlamanın en önemli veri yapılarından birinde: diziler. Diziler, birden fazla veriyi tek bir değişkende saklamanızı sağlar. Öğrenci listesi, ürün kataloğu, sipariş geçmişi - hepsi dizilerle temsil edilir.
JavaScript'in dizi metodları son derece güçlüdür. map, filter, reduce gibi metodlar veri işlemeyi çok kolaylaştırır. Modern JavaScript'te bu metodlar olmadan kod yazmak neredeyse imkansız. Bu derste hem temel dizi işlemlerini hem de bu güçlü metodları öğreneceğiz.
İçindekiler
- Dizi Nedir?
- Dizi Oluşturma ve Erişim
- Temel Dizi Metodları
- Arama Metodları
- Dönüştürme Metodları
- map() Metodu
- filter() Metodu
- reduce() Metodu
- Sıralama ve Ters Çevirme
- Dizi Birleştirme ve Ayırma
- Spread Operatörü ile Diziler
- Pratik Örnekler
- Sık Sorulan Sorular
- Sonuç
Dizi Nedir?
Dizi (Array), sıralı veri koleksiyonudur. Her elemana index numarasıyla erişilir. Index 0'dan başlar.
// Tek tek değişkenler - verimsiz
const ogrenci1 = "Ali";
const ogrenci2 = "Veli";
const ogrenci3 = "Ayşe";
// Dizi - verimli
const ogrenciler = ["Ali", "Veli", "Ayşe"];
// Erişim
console.log(ogrenciler[0]); // "Ali"
console.log(ogrenciler[1]); // "Veli"
console.log(ogrenciler[2]); // "Ayşe"JavaScript dizileri farklı tipleri barındırabilir:
const karisik = [
"metin",
42,
true,
null,
{ isim: "Ali" },
[1, 2, 3],
function() { return "Fonksiyon"; }
];
console.log(karisik[4].isim); // "Ali"
console.log(karisik[5][0]); // 1
console.log(karisik[6]()); // "Fonksiyon"Dizi Oluşturma ve Erişim
Dizi Oluşturma Yöntemleri
// 1. Literal syntax (önerilen)
const meyveler = ["elma", "armut", "muz"];
// 2. Array constructor
const sayilar = new Array(1, 2, 3);
const bos = new Array(5); // 5 elemanlık boş dizi
// 3. Array.of()
const dizi = Array.of(1, 2, 3);
// 4. Array.from() - iterable'dan dizi oluşturma
const harfler = Array.from("merhaba");
console.log(harfler); // ["m", "e", "r", "h", "a", "b", "a"]
// Belirli uzunlukta dizi oluşturma
const sifirlar = Array(5).fill(0);
console.log(sifirlar); // [0, 0, 0, 0, 0]
// Index bazlı dizi oluşturma
const indexli = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(indexli); // [0, 2, 4, 6, 8]Elemanlara Erişim
const renkler = ["kırmızı", "mavi", "yeşil", "sarı"];
// Index ile erişim
console.log(renkler[0]); // "kırmızı"
console.log(renkler[2]); // "yeşil"
// Son eleman
console.log(renkler[renkler.length - 1]); // "sarı"
// at() metodu (ES2022) - negatif index destekler
console.log(renkler.at(-1)); // "sarı"
console.log(renkler.at(-2)); // "yeşil"
// Olmayan index
console.log(renkler[10]); // undefined
// Eleman değiştirme
renkler[0] = "turuncu";
console.log(renkler); // ["turuncu", "mavi", "yeşil", "sarı"]
// Dizi uzunluğu
console.log(renkler.length); // 4Çok Boyutlu Diziler
// 2 boyutlu dizi (matris)
const matris = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matris[0][0]); // 1
console.log(matris[1][2]); // 6
console.log(matris[2][1]); // 8
// 3 boyutlu dizi
const kup = [
[[1, 2], [3, 4]],
[[5, 6], [7, 8]]
];
console.log(kup[0][1][0]); // 3Temel Dizi Metodları
push() ve pop()
Dizinin sonuna ekleme ve çıkarma:
const dizi = [1, 2, 3];
// push - sona ekle
dizi.push(4);
console.log(dizi); // [1, 2, 3, 4]
dizi.push(5, 6);
console.log(dizi); // [1, 2, 3, 4, 5, 6]
// pop - sondan çıkar
const sonEleman = dizi.pop();
console.log(sonEleman); // 6
console.log(dizi); // [1, 2, 3, 4, 5]unshift() ve shift()
Dizinin başına ekleme ve çıkarma:
const dizi = [2, 3, 4];
// unshift - başa ekle
dizi.unshift(1);
console.log(dizi); // [1, 2, 3, 4]
dizi.unshift(-1, 0);
console.log(dizi); // [-1, 0, 1, 2, 3, 4]
// shift - baştan çıkar
const ilkEleman = dizi.shift();
console.log(ilkEleman); // -1
console.log(dizi); // [0, 1, 2, 3, 4]splice()
Dizinin herhangi bir yerinden ekleme, çıkarma veya değiştirme:
const dizi = ["a", "b", "c", "d", "e"];
// splice(başlangıç, silinecekSayı, ...eklenecekler)
// Silme
const silinen = dizi.splice(2, 1);
console.log(silinen); // ["c"]
console.log(dizi); // ["a", "b", "d", "e"]
// Ekleme (0 eleman sil, yeni ekle)
dizi.splice(2, 0, "yeni");
console.log(dizi); // ["a", "b", "yeni", "d", "e"]
// Değiştirme (1 sil, 1 ekle)
dizi.splice(1, 1, "degisti");
console.log(dizi); // ["a", "degisti", "yeni", "d", "e"]
// Çoklu silme ve ekleme
const dizi2 = [1, 2, 3, 4, 5];
dizi2.splice(1, 3, "a", "b");
console.log(dizi2); // [1, "a", "b", 5]slice()
Dizinin bir bölümünü kopyalar (orijinali değiştirmez):
const dizi = ["a", "b", "c", "d", "e"];
// slice(başlangıç, bitiş) - bitiş dahil değil
console.log(dizi.slice(1, 3)); // ["b", "c"]
console.log(dizi.slice(2)); // ["c", "d", "e"]
console.log(dizi.slice(-2)); // ["d", "e"]
console.log(dizi.slice(1, -1)); // ["b", "c", "d"]
// Tam kopya
const kopya = dizi.slice();
console.log(kopya); // ["a", "b", "c", "d", "e"]
// Orijinal değişmedi
console.log(dizi); // ["a", "b", "c", "d", "e"]Arama Metodları
indexOf() ve lastIndexOf()
const dizi = [1, 2, 3, 2, 1];
// indexOf - ilk bulunan index
console.log(dizi.indexOf(2)); // 1
console.log(dizi.indexOf(5)); // -1 (bulunamadı)
// lastIndexOf - son bulunan index
console.log(dizi.lastIndexOf(2)); // 3
console.log(dizi.lastIndexOf(1)); // 4
// Başlangıç indexi belirtme
console.log(dizi.indexOf(2, 2)); // 3 (index 2'den itibaren ara)includes()
Elemanın varlığını kontrol eder:
const meyveler = ["elma", "armut", "muz"];
console.log(meyveler.includes("armut")); // true
console.log(meyveler.includes("kiraz")); // false
// NaN kontrolü (indexOf ile yapılamaz)
const sayilar = [1, 2, NaN, 4];
console.log(sayilar.indexOf(NaN)); // -1 (bulamaz!)
console.log(sayilar.includes(NaN)); // true (bulur)find() ve findIndex()
Koşula uyan ilk elemanı bulur:
const kullanicilar = [
{ id: 1, isim: "Ali", yas: 25 },
{ id: 2, isim: "Veli", yas: 30 },
{ id: 3, isim: "Ayşe", yas: 28 }
];
// find - elemanı döner
const kullanici = kullanicilar.find(k => k.id === 2);
console.log(kullanici); // { id: 2, isim: "Veli", yas: 30 }
// findIndex - indexi döner
const index = kullanicilar.findIndex(k => k.yas > 26);
console.log(index); // 1 (Veli'nin indexi)
// Bulunamazsa
console.log(kullanicilar.find(k => k.id === 99)); // undefined
console.log(kullanicilar.findIndex(k => k.id === 99)); // -1findLast() ve findLastIndex()
Sondan arama (ES2023):
const sayilar = [1, 2, 3, 4, 5, 6];
// Son çift sayıyı bul
const sonCift = sayilar.findLast(s => s % 2 === 0);
console.log(sonCift); // 6
// Son çift sayının indexi
const sonCiftIndex = sayilar.findLastIndex(s => s % 2 === 0);
console.log(sonCiftIndex); // 5Dönüştürme Metodları
forEach()
Her eleman için fonksiyon çalıştırır (değer döndürmez):
const sayilar = [1, 2, 3, 4, 5];
sayilar.forEach((sayi, index) => {
console.log(`Index ${index}: ${sayi}`);
});
// Index 0: 1
// Index 1: 2
// ...
// Toplam hesaplama
let toplam = 0;
sayilar.forEach(sayi => {
toplam += sayi;
});
console.log(toplam); // 15some() ve every()
const sayilar = [1, 2, 3, 4, 5];
// some - en az biri koşulu sağlıyor mu?
console.log(sayilar.some(s => s > 4)); // true
console.log(sayilar.some(s => s > 10)); // false
// every - hepsi koşulu sağlıyor mu?
console.log(sayilar.every(s => s > 0)); // true
console.log(sayilar.every(s => s > 3)); // false
// Pratik örnek
const formVerileri = [
{ alan: "isim", dolu: true },
{ alan: "email", dolu: true },
{ alan: "telefon", dolu: false }
];
const formGecerli = formVerileri.every(v => v.dolu);
console.log(formGecerli); // falsemap() Metodu
Her elemanı dönüştürüp yeni dizi oluşturur. Orijinal diziyi değiştirmez.
const sayilar = [1, 2, 3, 4, 5];
// Her elemanın karesini al
const kareler = sayilar.map(sayi => sayi * sayi);
console.log(kareler); // [1, 4, 9, 16, 25]
// İkiye katla
const ikiKat = sayilar.map(sayi => sayi * 2);
console.log(ikiKat); // [2, 4, 6, 8, 10]
// Orijinal değişmedi
console.log(sayilar); // [1, 2, 3, 4, 5]Nesne Dizileriyle map
const kullanicilar = [
{ isim: "Ali", yas: 25 },
{ isim: "Veli", yas: 30 },
{ isim: "Ayşe", yas: 28 }
];
// Sadece isimleri al
const isimler = kullanicilar.map(k => k.isim);
console.log(isimler); // ["Ali", "Veli", "Ayşe"]
// Yeni özellik ekle
const guncelKullanicilar = kullanicilar.map(k => ({
...k,
yetiskin: k.yas >= 18
}));
console.log(guncelKullanicilar);
// [
// { isim: "Ali", yas: 25, yetiskin: true },
// { isim: "Veli", yas: 30, yetiskin: true },
// { isim: "Ayşe", yas: 28, yetiskin: true }
// ]
// HTML oluşturma
const htmlListe = kullanicilar.map(k =>
`<li>${k.isim} (${k.yas})</li>`
).join("\n");
console.log(htmlListe);
// <li>Ali (25)</li>
// <li>Veli (30)</li>
// <li>Ayşe (28)</li>map ile Index Kullanımı
const harfler = ["a", "b", "c", "d"];
const indexli = harfler.map((harf, index) => ({
index,
harf,
buyuk: harf.toUpperCase()
}));
console.log(indexli);
// [
// { index: 0, harf: "a", buyuk: "A" },
// { index: 1, harf: "b", buyuk: "B" },
// ...
// ]filter() Metodu
Koşula uyan elemanlardan yeni dizi oluşturur:
const sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Çift sayıları filtrele
const ciftler = sayilar.filter(sayi => sayi % 2 === 0);
console.log(ciftler); // [2, 4, 6, 8, 10]
// 5'ten büyükleri al
const buyukler = sayilar.filter(sayi => sayi > 5);
console.log(buyukler); // [6, 7, 8, 9, 10]
// Orijinal değişmedi
console.log(sayilar); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]Nesne Dizileriyle filter
const urunler = [
{ isim: "Laptop", fiyat: 15000, stok: 5 },
{ isim: "Telefon", fiyat: 8000, stok: 0 },
{ isim: "Tablet", fiyat: 5000, stok: 12 },
{ isim: "Kulaklık", fiyat: 500, stok: 50 }
];
// Stokta olanlar
const stoktaOlanlar = urunler.filter(u => u.stok > 0);
console.log(stoktaOlanlar.map(u => u.isim));
// ["Laptop", "Tablet", "Kulaklık"]
// Fiyatı 5000'den düşük olanlar
const ucuzlar = urunler.filter(u => u.fiyat < 5000);
console.log(ucuzlar); // [{ isim: "Kulaklık", ... }]
// Birden fazla koşul
const uygunUrunler = urunler.filter(u =>
u.stok > 0 && u.fiyat < 10000
);
console.log(uygunUrunler.map(u => u.isim));
// ["Tablet", "Kulaklık"]filter ile Silme İşlemi
const todos = [
{ id: 1, text: "Alışveriş", done: true },
{ id: 2, text: "Spor", done: false },
{ id: 3, text: "Çalışma", done: true }
];
// ID'ye göre silme
const silinecekId = 2;
const yeniTodos = todos.filter(todo => todo.id !== silinecekId);
console.log(yeniTodos);
// [{ id: 1, ... }, { id: 3, ... }]
// Tamamlanmışları silme
const aktifTodos = todos.filter(todo => !todo.done);
console.log(aktifTodos); // [{ id: 2, text: "Spor", done: false }]reduce() Metodu
Diziyi tek bir değere indirger. En güçlü ve esnek dizi metodudur.
// Sözdizimi: array.reduce((akümülatör, mevcut, index, dizi) => {}, başlangıçDeğeri)
const sayilar = [1, 2, 3, 4, 5];
// Toplama
const toplam = sayilar.reduce((acc, sayi) => acc + sayi, 0);
console.log(toplam); // 15
// Adım adım:
// acc = 0, sayi = 1 => 0 + 1 = 1
// acc = 1, sayi = 2 => 1 + 2 = 3
// acc = 3, sayi = 3 => 3 + 3 = 6
// acc = 6, sayi = 4 => 6 + 4 = 10
// acc = 10, sayi = 5 => 10 + 5 = 15
// Çarpma
const carpim = sayilar.reduce((acc, sayi) => acc * sayi, 1);
console.log(carpim); // 120
// En büyük değer
const enBuyuk = sayilar.reduce((max, sayi) =>
sayi > max ? sayi : max
, sayilar[0]);
console.log(enBuyuk); // 5reduce ile Nesneler
const siparisler = [
{ urun: "Laptop", fiyat: 15000, adet: 1 },
{ urun: "Mouse", fiyat: 200, adet: 2 },
{ urun: "Klavye", fiyat: 500, adet: 1 }
];
// Toplam tutar
const toplamTutar = siparisler.reduce((toplam, siparis) =>
toplam + (siparis.fiyat * siparis.adet)
, 0);
console.log(toplamTutar); // 15900
// Gruplama
const meyveler = ["elma", "armut", "elma", "muz", "elma", "armut"];
const sayim = meyveler.reduce((acc, meyve) => {
acc[meyve] = (acc[meyve] || 0) + 1;
return acc;
}, {});
console.log(sayim); // { elma: 3, armut: 2, muz: 1 }
// Kategoriye göre gruplama
const urunler = [
{ isim: "Laptop", kategori: "Elektronik" },
{ isim: "Telefon", kategori: "Elektronik" },
{ isim: "Masa", kategori: "Mobilya" },
{ isim: "Sandalye", kategori: "Mobilya" }
];
const kategoriler = urunler.reduce((acc, urun) => {
const kategori = urun.kategori;
if (!acc[kategori]) {
acc[kategori] = [];
}
acc[kategori].push(urun.isim);
return acc;
}, {});
console.log(kategoriler);
// { Elektronik: ["Laptop", "Telefon"], Mobilya: ["Masa", "Sandalye"] }reduce ile flat
const icIce = [[1, 2], [3, 4], [5, 6]];
const duz = icIce.reduce((acc, dizi) => acc.concat(dizi), []);
console.log(duz); // [1, 2, 3, 4, 5, 6]
// Veya flat() metodu (ES2019)
console.log(icIce.flat()); // [1, 2, 3, 4, 5, 6]Sıralama ve Ters Çevirme
sort()
Diziyi yerinde sıralar (orijinali değiştirir):
// String sıralama (alfabetik)
const isimler = ["Zeynep", "Ali", "Mehmet", "Canan"];
isimler.sort();
console.log(isimler); // ["Ali", "Canan", "Mehmet", "Zeynep"]
// Sayı sıralama - DİKKAT!
const sayilar = [10, 2, 30, 21, 100];
sayilar.sort();
console.log(sayilar); // [10, 100, 2, 21, 30] - YANLIŞ!
// Doğru sayı sıralama
sayilar.sort((a, b) => a - b);
console.log(sayilar); // [2, 10, 21, 30, 100] - Küçükten büyüğe
sayilar.sort((a, b) => b - a);
console.log(sayilar); // [100, 30, 21, 10, 2] - Büyükten küçüğeNesne Sıralama
const ogrenciler = [
{ isim: "Ali", puan: 85 },
{ isim: "Veli", puan: 92 },
{ isim: "Ayşe", puan: 78 }
];
// Puana göre sırala (yüksekten düşüğe)
ogrenciler.sort((a, b) => b.puan - a.puan);
console.log(ogrenciler);
// [{ isim: "Veli", puan: 92 }, { isim: "Ali", puan: 85 }, { isim: "Ayşe", puan: 78 }]
// İsme göre sırala
ogrenciler.sort((a, b) => a.isim.localeCompare(b.isim, 'tr'));
console.log(ogrenciler.map(o => o.isim)); // ["Ali", "Ayşe", "Veli"]reverse()
Diziyi ters çevirir:
const dizi = [1, 2, 3, 4, 5];
dizi.reverse();
console.log(dizi); // [5, 4, 3, 2, 1]
// Kopyalayarak ters çevir (orijinali korumak için)
const orijinal = [1, 2, 3];
const ters = [...orijinal].reverse();
console.log(orijinal); // [1, 2, 3]
console.log(ters); // [3, 2, 1]toSorted() ve toReversed() (ES2023)
Orijinali değiştirmeden sıralama:
const sayilar = [3, 1, 4, 1, 5, 9];
const sirali = sayilar.toSorted((a, b) => a - b);
console.log(sirali); // [1, 1, 3, 4, 5, 9]
console.log(sayilar); // [3, 1, 4, 1, 5, 9] - değişmedi
const ters = sayilar.toReversed();
console.log(ters); // [9, 5, 1, 4, 1, 3]
console.log(sayilar); // [3, 1, 4, 1, 5, 9] - değişmediDizi Birleştirme ve Ayırma
concat()
Dizileri birleştirir:
const dizi1 = [1, 2, 3];
const dizi2 = [4, 5, 6];
const birlesik = dizi1.concat(dizi2);
console.log(birlesik); // [1, 2, 3, 4, 5, 6]
// Çoklu birleştirme
const dizi3 = [7, 8, 9];
const hepsi = dizi1.concat(dizi2, dizi3, [10]);
console.log(hepsi); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// Orijinaller değişmez
console.log(dizi1); // [1, 2, 3]join()
Diziyi stringe çevirir:
const kelimeler = ["Merhaba", "Dünya", "!"];
console.log(kelimeler.join(" ")); // "Merhaba Dünya !"
console.log(kelimeler.join("-")); // "Merhaba-Dünya-!"
console.log(kelimeler.join("")); // "MerhabaDünya!"
console.log(kelimeler.join()); // "Merhaba,Dünya,!" (varsayılan virgül)
// URL oluşturma
const pathParts = ["api", "users", "123"];
const url = pathParts.join("/");
console.log(url); // "api/users/123"split() (String metodu)
Stringi diziye çevirir:
const cumle = "JavaScript çok güzel bir dil";
const kelimeler = cumle.split(" ");
console.log(kelimeler); // ["JavaScript", "çok", "güzel", "bir", "dil"]
const csv = "Ali,25,İstanbul";
const veriler = csv.split(",");
console.log(veriler); // ["Ali", "25", "İstanbul"]flat() ve flatMap()
İç içe dizileri düzleştirir:
const icIce = [1, [2, 3], [4, [5, 6]]];
console.log(icIce.flat()); // [1, 2, 3, 4, [5, 6]] - 1 seviye
console.log(icIce.flat(2)); // [1, 2, 3, 4, 5, 6] - 2 seviye
console.log(icIce.flat(Infinity)); // Tüm seviyeler
// flatMap - map + flat(1)
const cumleler = ["Merhaba Dünya", "JavaScript güzel"];
const kelimeler = cumleler.flatMap(c => c.split(" "));
console.log(kelimeler); // ["Merhaba", "Dünya", "JavaScript", "güzel"]Spread Operatörü ile Diziler
const dizi1 = [1, 2, 3];
const dizi2 = [4, 5, 6];
// Birleştirme
const birlesik = [...dizi1, ...dizi2];
console.log(birlesik); // [1, 2, 3, 4, 5, 6]
// Kopyalama
const kopya = [...dizi1];
kopya.push(4);
console.log(dizi1); // [1, 2, 3] - değişmedi
console.log(kopya); // [1, 2, 3, 4]
// Araya ekleme
const yeni = [0, ...dizi1, 4];
console.log(yeni); // [0, 1, 2, 3, 4]
// Fonksiyona argüman olarak
const sayilar = [5, 2, 8, 1, 9];
console.log(Math.max(...sayilar)); // 9
console.log(Math.min(...sayilar)); // 1
// String'i diziye
const harfler = [..."merhaba"];
console.log(harfler); // ["m", "e", "r", "h", "a", "b", "a"]Pratik Örnekler
Örnek 1: Alışveriş Sepeti
const sepet = [
{ urun: "Laptop", fiyat: 15000, adet: 1 },
{ urun: "Mouse", fiyat: 200, adet: 2 },
{ urun: "Klavye", fiyat: 500, adet: 1 },
{ urun: "Monitor", fiyat: 3000, adet: 2 }
];
// Toplam ürün sayısı
const toplamUrun = sepet.reduce((t, u) => t + u.adet, 0);
console.log("Toplam ürün:", toplamUrun); // 6
// Ara toplam
const araToplam = sepet.reduce((t, u) => t + (u.fiyat * u.adet), 0);
console.log("Ara toplam:", araToplam); // 21900
// KDV hesaplama
const kdv = araToplam * 0.18;
const genelToplam = araToplam + kdv;
console.log("KDV:", kdv); // 3942
console.log("Genel Toplam:", genelToplam); // 25842
// En pahalı ürün
const enPahali = sepet.reduce((max, u) =>
u.fiyat > max.fiyat ? u : max
);
console.log("En pahalı:", enPahali.urun); // Laptop
// Fatura detayı
const fatura = sepet.map(u => ({
...u,
toplamFiyat: u.fiyat * u.adet
}));
console.log(fatura);Örnek 2: Öğrenci Not Sistemi
const ogrenciler = [
{ isim: "Ali", notlar: [80, 90, 75] },
{ isim: "Veli", notlar: [60, 55, 70] },
{ isim: "Ayşe", notlar: [95, 88, 92] },
{ isim: "Fatma", notlar: [45, 50, 55] }
];
// Ortalama hesapla
const ortalamaEkle = ogrenciler.map(ogr => ({
...ogr,
ortalama: ogr.notlar.reduce((t, n) => t + n, 0) / ogr.notlar.length
}));
console.log(ortalamaEkle);
// Geçenleri filtrele (ortalama >= 60)
const gecenler = ortalamaEkle.filter(o => o.ortalama >= 60);
console.log("Geçenler:", gecenler.map(o => o.isim)); // ["Ali", "Ayşe"]
// Kalanları filtrele
const kalanlar = ortalamaEkle.filter(o => o.ortalama < 60);
console.log("Kalanlar:", kalanlar.map(o => o.isim)); // ["Veli", "Fatma"]
// En başarılı öğrenci
const enBasarili = ortalamaEkle.reduce((max, o) =>
o.ortalama > max.ortalama ? o : max
);
console.log("En başarılı:", enBasarili.isim); // Ayşe
// Sınıf ortalaması
const sinifOrt = ortalamaEkle.reduce((t, o) => t + o.ortalama, 0) / ogrenciler.length;
console.log("Sınıf ortalaması:", sinifOrt.toFixed(2)); // 71.67Örnek 3: Kelime Frekansı
function kelimeFrekans(metin) {
return metin
.toLowerCase()
.replace(/[.,!?;:'"]/g, "")
.split(/\s+/)
.filter(k => k.length > 0)
.reduce((acc, kelime) => {
acc[kelime] = (acc[kelime] || 0) + 1;
return acc;
}, {});
}
const ornek = "JavaScript çok güzel. JavaScript öğrenmek çok eğlenceli!";
console.log(kelimeFrekans(ornek));
// { javascript: 2, çok: 2, güzel: 1, öğrenmek: 1, eğlenceli: 1 }
// En sık kullanılan kelime
function enSikKelime(metin) {
const frekans = kelimeFrekans(metin);
return Object.entries(frekans)
.sort((a, b) => b[1] - a[1])[0];
}
console.log(enSikKelime(ornek)); // ["javascript", 2]Örnek 4: Unique Değerler
// Benzersiz değerler
const tekrarli = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
// Set ile
const benzersiz1 = [...new Set(tekrarli)];
console.log(benzersiz1); // [1, 2, 3, 4]
// filter ile
const benzersiz2 = tekrarli.filter((deger, index, dizi) =>
dizi.indexOf(deger) === index
);
console.log(benzersiz2); // [1, 2, 3, 4]
// reduce ile
const benzersiz3 = tekrarli.reduce((acc, deger) => {
if (!acc.includes(deger)) acc.push(deger);
return acc;
}, []);
console.log(benzersiz3); // [1, 2, 3, 4]Sık Sorulan Sorular
forEach ile for döngüsü arasındaki fark?
forEach daha okunabilir ama break ve continue kullanılamaz. Erken çıkış gerekiyorsa for veya for...of tercih edin.
map mi forEach mi?
Yeni dizi oluşturuyorsanız map, sadece işlem yapıyorsanız (console.log gibi) forEach. map her zaman yeni dizi döner, forEach undefined döner.
filter mi splice mi?
filter orijinal diziyi değiştirmez (immutable), splice değiştirir (mutate). Fonksiyonel programlama ve React gibi frameworklerde filter tercih edilir.
reduce ne zaman kullanılır?
Diziyi tek bir değere indirgerken (toplam, ortalama), gruplama yaparken, map+filter kombinasyonu gerektiğinde. Çok güçlü ama karmaşık, basit işler için map/filter yeterli.
sort neden beklendiği gibi çalışmıyor?
sort varsayılan olarak elemanları stringe çevirip sıralar. Sayılar için karşılaştırma fonksiyonu gerekli: arr.sort((a, b) => a - b).
Sonuç
Bu derste JavaScript'in güçlü dizi yapısını ve metodlarını öğrendik. Temel metodlardan (push, pop, splice) arama metodlarına (find, filter, includes), oradan dönüştürme metodlarına (map, filter, reduce) kadar geniş bir yelpaze gördük.
Bu metodlar modern JavaScript geliştirmenin temelini oluşturur. Veri işleme, API yanıtlarını manipüle etme, liste görüntüleme - her yerde kullanacaksınız.
Pratik için:
- Bir dizi sayıdan ortalamanın üstündekileri filtreleyin
- Bir nesne dizisini birden fazla kritere göre sıralayın
- reduce ile kendi map fonksiyonunuzu yazın
- İç içe diziyi tek seviyeli diziye düzleştirin
Sonraki Ders
Bir sonraki derste Nesneler (Objects) konusunu işleyeceğiz. JavaScript'in temel veri yapısı olan nesneleri, property erişimi, metodlar, destructuring ve JSON konularını öğreneceğiz.
JavaScript Eğitimi #7: Nesneler (Objects) →
Kaynaklar
Projenizi Hayata Geçirelim
Web sitesi, mobil uygulama veya yapay zeka çözümü mü arıyorsunuz? Fikirlerinizi birlikte değerlendirelim.
Ücretsiz Danışmanlık Alın