Emre

Emre

WFN Üye
Konular
1,662
Mesajlar
1,758
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 4 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
İster nesne dizisini ister tek bir nesnenin anahtarlarını sıralayın, temel yöntem JavaScript’te sort() kullanmaktır. Nesne dizisini belirli bir özelliğe göre sıralarken karşılaştırma işlevinde a.özellik ile b.özellik değerlerini karşılaştırın; sayısal değerlerde çıkarma, metinlerde ise localeCompare() kullanın. sort() diziyi yerinde değiştirir; özgün diziyi korumak istiyorsanız önce kopyasını alın.

Nesne dizisini sayısal bir özelliğe göre sıralama​


Aşağıdaki varsayımsal örnekte ürünler fiyat özelliğine göre küçükten büyüğe sıralanır:

JavaScript: 
const urunler = [
  { ad: "Klavye", fiyat: 1200 },
  { ad: "Fare", fiyat: 450 },
  { ad: "Monitör", fiyat: 7800 }
];

urunler.sort((a, b) => a.fiyat - b.fiyat);

console.log(urunler);

Karşılaştırma işlevi iki nesneyi alır. a.fiyat - b.fiyat sonucu negatifse a önce, pozitifse b önce gelir; sonuç sıfırsa sıralama açısından eşit kabul edilir. Bu kodun çıktısında sıra Fare, Klavye, Monitör olur.

Büyükten küçüğe sıralamak için çıkarma işleminin yönünü değiştirin:

JavaScript: 
urunler.sort((a, b) => b.fiyat - a.fiyat);

Bu yöntem, özelliklerin gerçekten sayı olduğu durumda kullanılmalıdır. Sayılar metin olarak tutuluyorsa örneğin "1200" ve "450" değerlerinde önce dönüştürme yapmak daha güvenlidir:

JavaScript: 
urunler.sort((a, b) => Number(a.fiyat) - Number(b.fiyat));

Eksik veya geçersiz değerler varsa Number() sonucu NaN olabilir ve beklenmeyen bir sıralama oluşabilir. Böyle bir durumda veriyi sıralamadan önce ilgili özelliğin her nesnede bulunduğunu ve sayıya dönüşebildiğini kontrol edin.

Metin özelliğine göre sıralama​


Metinleri < ve > operatörleriyle karşılaştırmak yerine localeCompare() kullanın. Bu yöntem, dil kurallarına göre alfabetik karşılaştırma yapar:

JavaScript: 
const kullanicilar = [
  { ad: "Zeynep", yas: 28 },
  { ad: "Ali", yas: 32 },
  { ad: "Çiğdem", yas: 25 }
];

kullanicilar.sort((a, b) => a.ad.localeCompare(b.ad, "tr"));

console.log(kullanicilar);

Burada "tr" yerel ayarı Türkçe alfabetik sıralama kurallarının kullanılmasını sağlar. Ters alfabetik sıralama için karşılaştırmanın yerlerini değiştirin:

JavaScript: 
kullanicilar.sort((a, b) => b.ad.localeCompare(a.ad, "tr"));

Büyük ve küçük harflerin karşılaştırmayı etkilemesini istemiyorsanız sensitivity seçeneğini kullanabilirsiniz:

JavaScript: 
kullanicilar.sort((a, b) =>
  a.ad.localeCompare(b.ad, "tr", { sensitivity: "base" })
);

Özellik eksik olabiliyorsa doğrudan .localeCompare() çağırmak hata verebilir. Önce varsayılan bir metin kullanabilirsiniz:

JavaScript: 
kullanicilar.sort((a, b) =>
  String(a.ad ?? "").localeCompare(String(b.ad ?? ""), "tr")
);

Özgün diziyi koruyarak sıralama​


sort() çağrısı yeni bir dizi döndürse de üzerinde çağrıldığı dizinin eleman sırasını da değiştirir. Özgün veriyi korumanız gerekiyorsa yayma operatörüyle kopya oluşturun:

JavaScript: 
const fiyataGoreSirali = [...urunler].sort(
  (a, b) => a.fiyat - b.fiyat
);

Bu kullanımda urunler dizisinin sırası korunur, sıralanmış sonuç fiyataGoreSirali değişkenine yazılır. React gibi durumun değişmez tutulmasının önemli olduğu yapılarda genellikle bu yaklaşım tercih edilir.

Birden fazla özelliğe göre sıralama​


İlk özellikler eşitse ikinci özelliğe göre karşılaştırma yapabilirsiniz. Örneğin çalışanları önce departmana, aynı departmandakileri de ada göre sıralamak için:

JavaScript: 
const calisanlar = [
  { departman: "Satış", ad: "Zeynep" },
  { departman: "Ar-Ge", ad: "Ali" },
  { departman: "Satış", ad: "Ahmet" }
];

calisanlar.sort((a, b) => {
  const departmanSirasi = a.departman.localeCompare(b.departman, "tr");

  if (departmanSirasi !== 0) {
    return departmanSirasi;
  }

  return a.ad.localeCompare(b.ad, "tr");
});

Bu karşılaştırmada önce departman değerlendirilir. Departmanlar aynıysa ad karşılaştırılır. Böylece her karşılaştırmada yalnız tek bir özelliğe bakmak yerine belirlediğiniz öncelik sırası uygulanır.

Tarih özelliğine göre sıralama​


Tarih değerleri ISO biçiminde, örneğin 2026-10-26 veya 2026-10-26T12:30:00Z olarak tutuluyorsa güvenilir bir karşılaştırma için Date nesnesine dönüştürebilirsiniz:

JavaScript: 
const yazilar = [
  { baslik: "İkinci yazı", tarih: "2026-10-26" },
  { baslik: "İlk yazı", tarih: "2026-09-14" }
];

yazilar.sort((a, b) =>
  new Date(a.tarih) - new Date(b.tarih)
);

Bu kod eskiden yeniye sıralar. Yeniden eskiye sıralamak için b.tarih ile a.tarih değerlerini yer değiştirin. Tarih dizelerinin standart olmayan biçimleri tarayıcıya veya çalışma ortamına göre farklı yorumlanabileceğinden, veriyi mümkünse ISO biçiminde tutun.

Hangi karşılaştırma kullanılmalı?​


Sıralama işlevi, özelliğin veri türüne göre seçilmelidir:
Özellik türüKarşılaştırmaSonuç
Sayıa.fiyat - b.fiyatKüçükten büyüğe
Sayıb.fiyat - a.fiyatBüyükten küçüğe
Metina.ad.localeCompare(b.ad, "tr")Alfabetik sıralama
Tarihnew Date(a.tarih) - new Date(b.tarih)Eskiden yeniye
Buradaki seçim yalnız sıralama yönünü belirler; verinin eksik, yanlış türde veya geçersiz olduğunu kanıtlamaz. Sıralama beklenmedik görünüyorsa önce karşılaştırılan özelliğin bütün nesnelerde aynı veri türünde olup olmadığını, boş değer içerip içermediğini ve tarihlerin geçerli biçimde yazıldığını kontrol edin. Sorun veri kaynağından geliyorsa sıralama kodunu değiştirmek yerine veriyi oluşturan veya dönüştüren adımda bu alanları düzeltin.

Son olarak, nesnenin kendisini değil yalnızca özellik adlarını sıralamak istiyorsanız Object.keys() ile anahtarları diziye çevirip aynı yöntemi uygulayabilirsiniz. Ancak bu işlem yeni bir sıralanmış anahtar dizisi üretir; nesnenin özelliklerini yeniden sıralamak, nesnenin anlamını veya erişim biçimini değiştirmez. Uygulamadaki asıl ihtiyaç nesneleri ekranda belirli bir kritere göre göstermekse nesne dizisini sıralamak doğru yaklaşımdır.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)