JavaScript Diziler

JavaScript dizi oluşturma ve tanımlama, dizi elamanına erişim, dizi uzunluğu, dizi sıralama gibi dizi işlemleri ile ilgili bilgiler yer alıyor.

JavaScript diziler birden fazla değeri bir değişkende depolamak için kullanılır.

var liste = ["Elma", "Armut", "Portakal"];

Diziler

Diziler bir değişkende birden fazla değer tutabilen değişken türüdür.

Herhangi bir liste yaptığımızda liste elemanlarını ayrı ayrı değişkende tutmamız gerekir.

var liste1 = "Elma";
var liste2 = "Armut";
var liste3 = "Portakal";

Listenin eleman sayısı 300 olsaydı?

Böyle bir durumda dizileri kullanabiliriz.

Dizileri kullanarak bir değişken altında birden fazla değeri depolayabilir ve dizi numarası ile erişilebiliriz.

Dizi oluşturma

JavaScript dizi oluşturmak için köşeli parantez kullanabiliriz.

var liste = [];

Dizi oluşturmak için new Array() anahtar kelimesini kullanabiliriz.

var liste = new Array();

Okunabilirlik ve hız açısından ilk dizi oluşturma yöntemi daha iyidir.

Dizi elemanlarına erişim

Dizi elemanlarına erişmek için dizi sıra numarasını kullanılır.

Aşağıdaki kullanımda liste dizisinin ilk elaman değeri x isimli değişkene atanmıştır.

var x = liste[0];

Aşağıdaki kullanımda liste dizisinin ilk elaman değerini Muz yapar.

liste[0] = "Muz";

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(liste[0]);
</script>

NOT: Dizilerin sıra numarası sıfırdan başlar. Birinci elamanı [0] ikinci elemanı [1] ifade eder.

Diziye erişim

JavaScript dizi elemanlarına erişmek için sadece dizi ismi kullanılabilir.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(liste);
</script>

JavaScript diziler nesnedir

Diziler nesnelerin özel bir türüdür.

Değişken türüne typeof operatörü ile baktığımızda object olarak verir.

JavaScript dizilere erişmek için sıra numarasını kullanır.

Örnekte bilgiler[0] ile Yusuf değerini alırız.

<script>
  var bilgiler = ["Yusuf", "SEZER", 78];
  alert(bilgiler[0]);
</script>

Ancak JavaScript nesnelere erişmek için üye isimlerini kullanır.

Örnekte bilgiler.ismim ile Yusuf değerini alırız.

<script>
  var bilgiler = {ismim:"Yusuf", soyIsmim:"SEZER", kilo:78};
  alert(bilgiler.ismim);
</script>

JavaScript dizi elemanları nesne olabilir

JavaScript diziler diğer programlama dillerinden farklı olarak farklı türde değere sahip olabilir.

Dizilerde bir nesnedir.

Dizi elamanları fonksiyon veya dizi olabilir.

<script>
  var liste = new Array(2);
  liste[0] = alert("Merhaba Dünya");
  liste[1] = "Dünya";
  liste[2] = function(){alert("Merhaba JavaScript");}
  liste[0];
  liste[2]();
</script>

Dizi fonksiyon ve özellikleri

JavaScript dizileri çeşitli fonksiyon ve özelliklere sahiptir.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(liste.length); // dizi uzunluk özelliği
  alert(liste.sort())  // dizi sıralama fonksiyonu
</script>

Dizi uzunluğu

JavaScript dizi uzunluğu için length özelliği kullanılır.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(liste.length);
</script>

Dizi uzunluğu sıra numarasından her zaman bir fazladır.

Diziler üzerinde gezmek

JavaScript diziler üzerinde sırayla işlem yapmak veya okumak için genellikle for döngüsü kullanılır.

<script>
  var liste, i, listeUzunluk;
  liste = ["Elma", "Armut", "Portakal"];
  listeUzunluk = liste.length;
  for(i = 0; i < listeUzunluk; i++) {
    alert(liste[i]);
  }
</script>

Diziye elaman ekleme

Diziye yeni bir eleman eklemek için push fonksiyonu kullanılabilir.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  liste.push("Muz");
  alert(liste);
</script>

Uzunluk özelliğini kullanarak yeni eleman eklenebilir.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  liste[liste.length] = "Muz";
  alert(liste);
</script>

Veya sıra numarası kullanarak eklenebilir.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  liste[5] = "Muz";
  alert(liste);
</script>

NOT: Sıra numarası kullanarak eleman eklemek dizi arasında boşlukların oluşmasına neden olabilir.

İlişkilendirilmiş diziler

Birçok programlama dili ilişkilendirilmiş dizilere izin verir.

İlişkilendirilmiş diziler adlandırılmış dizilere veya karma diziler denir.

JavaScript ilişkilendirilmiş dizileri desteklemez.

JavaScript dizileri sıra numarasına göre ilişkilendirir.

<script>
  var bilgiler = [];
  bilgiler[0] = "Yusuf Sefa";
  bilgiler[1] = "SEZER";
  bilgiler[2] = 78;
  alert(bilgiler.length);
  alert(bilgiler[0]);
</script>

NOT: Dizileri adlandırılmış dizi olarak kullanırsanız JavaScript diziyi nesneye çevirir.

Diziler nesneye çevrildiğinde dizi fonksiyon ve özellikleri kullanılamaz.

<script>
  var bilgiler = [];
  bilgiler["ismim"] = "Yusuf Sefa";
  bilgiler["soyIsmim"] = "SEZER";
  bilgiler["kilo"] = 78;
  alert(bilgiler.length);
  alert(bilgiler[0]);
</script>

JavaScript dizileri ve nesneleri arasındaki fark

JavaScript dizileri sıra numarası kullanır.

JavaScript nesneleri üye isimlerini kullanır.

JavaScript adlandırılmış dizileri desteklemez.

Değerlere üye isimleri ile erişmek istenirse nesneler kullanılabilir.

Değerlere sıra numarası ile erişmek istenirse diziler kullanılabilir.

Dizi oluşturma

JavaScript [] veya new Array() ile dizi oluşturmayı destekler.

Ancak new Array() kullanımı pek tercih edilmez.

Aşağıdaki iki kullanımda liste adında bir dizi oluşturur.

var liste = new Array();
var liste = [];

Aşağıdaki dizi tanımlamalarında dizi sayısı 6’dır.

var liste = new Array(10, 20, 30, 40, 50, 60);
var liste = [10, 20, 30, 40, 50, 60];

Ancak new Array() kullanımı kodları karmaşıklaştırıp beklenmedik sonuçlar çıkarabilir.

var liste = new Array(10, 20);

Elemanlardan biri çıkarılırsa ne olur?

var liste = new Array(10);

Dizi kontrolü

Bir değişkenin dizi olup olmadığını nasıl anlaşılır?

JavaScript typeof tür öğrenme operatörü ile kontrol ettiğimizde object değerini verir.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(typeof liste);
</script>

JavaScript’te diziler nesne olduğu için typeof operatörü object değerini verir.

ECMAScript 5 ile birlikte gelen Array.isArray() fonksiyonunu kullanabiliriz.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(Array.isArray(liste));
</script>

Eski tarayıcılar ECMAScript 5 desteklememektedir.

Bu sorunu çözmek için isArray() fonksiyonu yazılabilir.

<script>
  function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
  }
  var liste = ["Elma", "Armut", "Portakal"];
  alert(isArray(liste));
</script>

Fonksiyon parametre olarak aldığı değer Array ise true değerini döndürecektir.

Veya instanceof operatörü ile değişken türünü karşılaştırabiliriz.

<script>
  var liste = ["Elma", "Armut", "Portakal"];
  alert(liste instanceof Array);
</script>

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.