JavaScript de diziler, birden çok değeri aynı anda tek bir değişkende depolamak için kullanılır.
Örneğin bir araba isimleri listeniz var diyelim. Her bir araba ismini ayrı bir değişkene atamak isterseniz şöyle yazmanız gerekir.
|
1 2 3 4 5 6 7 8 9 |
<script> var araba1 = "Toyota"; var araba2 = "Volvo"; var araba3 = "BMW"; </script> |
Tabi listenizde onlarca araba isminin olduğunu düşünürseniz bu tanımlama ile onlarca satır kod yazmanız gerekecektir.
Veya bu araba listenizden sadece bir arabanın bilgilerine ulaşıp işlem yapmak isteseydiniz nasıl yapardınız?
İşte bu tarz işlemlerde en pratik çözüm bir dizi tanımlamaktır.
JavaScript Dizi Oluşturma
⇒ Dizileri oluştururken ilk olarak var anahtar kelimesini yazıyoruz.
⇒ Sonrasında istediğimiz bir dizi ismi yazıyoruz.
⇒ Sonrasında eşittir (=) operatörünü yazıyoruz.
⇒ Sonrasında köşeli parantezler arasında tüm dizi elemanlarını aralarına virgül (,) koyarak yazıyoruz.
Örneğin;
|
1 2 3 4 5 6 7 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi","Ford"]; </script> |
Yada number veri türünde öğeleri olan bir dizi tanımlamak istersek:
|
1 2 3 4 5 6 7 |
<script> var ciftSayilar = [0, 2, 4, 6, 8, 10]; </script> |
şeklinde yazabiliriz.
⇒ Dizileri oluştururken farklı veri türlerinde değişkenler kullanabiliriz. Örneğin bir dizinin elemanları arasında string ve number veri türlerinde değişkenler olabildiği gibi fonksiyonlar veya nesneler olabilir. Hatta dizinin bir elemanı başka bir dizi de olabilir.
⇒ Boş bir diziyi aşağıdaki gibi oluşturabiliriz.
|
1 2 3 4 5 6 7 |
<script> var arabalar = []; </script> |
JavaScript de dizi oluşturmanın ikinci bir yöntemi daha bulunuyor.
new Anahtar Kelimesi ile Dizi Oluşturma
|
1 2 3 4 5 6 7 |
<script> var ciftSayilar = new Array(0, 2, 4, 6, 8, 10); </script> |
Bu şekilde de dizileri oluşturabiliyoruz ama basitlik, okunabilirlik ve kodların çalıştırılma hızı için ilk yöntemi kullanmalısınız.
JavaScript Dizinin Elemanlarına Erişme
Dizi elemanlarına ulaşmak için ilk olarak dizinin adını yazıp sonrasında köşeli parantezler içerisinde ulaşmak istediğimiz elemanın indeks numarasını yazıyoruz.
Dizinin ilk elemanının indeks numarası 0’dır. İkinci elemanın indeks numarası 1’dir. İndeks numaraları bu şekilde devam eder.
Örneğin dizinin ikinci elemanına ulaşmak istersek;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; console.log(arabalar[1]); </script> |
Çıktısı : Volvo
JavaScript Dizinin Elemanlarını Değiştirme
Dizi elemanları üzerinde değişiklik yapmak istediğimizde aşağıdaki gibi yapıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; arabalar[2] = "Ford"; console.log(arabalar); </script> |
Çıktısı : [“Toyota”,”Volvo”,”Ford”,”Hyundai”,”Audi”]
Gördüğünüz gibi dizinin üçüncü elemanı yani ikinci indekste bulunan elemanının değerini “BMW” iken “Ford” olarak değiştirdik.
⇒ Eğer dizinin varsayılan en büyük indeks numarasından daha büyük bir değere eleman atamak istersek ne olur?
Bunu da uygulamalı olarak göstermek istiyorum.
|
1 2 3 4 5 6 7 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; </script> |
Yukarıdaki gibi arabalar dizimiz olsun. Bu dizinin toplam 5 elemanı bulunuyor. Yani son elemanın indeks numarası 4‘tür.
Şimdi bu dizinin altıncı (6.) indeksine bir değer atayalım.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; arabalar[6] = "Ford"; console.log(arabalar); </script> |
Çıktısı : [“Toyota”, “Volvo”, “BMW”, “Hyundai”, “Audi”, empty, “Ford”]
Gördüğünüz gibi arabalar dizisinin beşinci (5.) indeksindeki eleman empty yani boş olarak görünüyor.
Peki arabalar dizisinin beşinci indeksine erişmeye çalışırsak bize hangi değeri döndürecektir?
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; arabalar[6] = "Ford"; console.log(arabalar[5]); </script> |
Çıktısı : undefined
Gördüğünüz gibi çıktımız undefined oluyor.
⇒ Son olarak bir değişkenin dizi olup olmadığını nasıl anlayabileceğimizi göstereceğim.
JavaScript de typeof operatörü ile dizilerin veri türüne baktığımızda object yani nesne veri türünü döndürüyor. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(typeof(arabalar)); </script> |
Çıktısı : object
Diziler aslında bir nesne olduğu için geriye object değerini döndürdü. Bu sorunu çözmek için 3 farklı yöntem kullanabiliriz.
1. Yöntem Bu sorunun çözümü için ECMAScript 5 ile gelen yeni bir metodu kullanabiliyoruz.
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(Array.isArray(arabalar)); </script> |
Çıktısı : true
Eğer dizi ise true değilse false döndürür. Bu çözümün sorunu ECMAScript 5’in eski tarayıcılarda desteklenmemesidir.
2. Yöntem Bu sorunun çözümü için kendi isArray() metodunuzu yazabilirsiniz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; } var arabalar = ["Toyota","Volvo","BMW"]; console.log(isArray(arabalar)); </script> |
Çıktısı : true
Eğer dizi ise true değilse false döndürür.
3. Yöntem instanceof operatörü; Bir nesne belirli bir yapıcısı tarafından oluşturulursa true değerini döndürür.
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar instanceof Array); </script> |
Çıktısı : true
Umarım “JavaScript Diziler” yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
Kaynaklar : w3schools.com
){kind=link}