Bir dizi özel bir değişken türüdür. Sadece bir değer kaydetmez; değerler listesini saklar. C, C++ dillerinin aksine JavaScriptte diziler farklı türdeki verileri tek dizi içinde saklamaya izin verir.
Bir liste yada bir biri ile ilişkili değerler kümesi ile çalışırken dizileri tercih etmeniz en uygun çözümdür. JavaScriptte diziler, bir listenin kaç öğe içereceğini bilmediğinizde özellikle faydalı olacaktır. Eğer kaydedeceğiniz değer sayısını bilmiyorsanız javaScriptte dizi boyutu sorun olmayacaktır. Çünkü diziyi oluştururken, kaç değer tutacağını belirtmenize gerek yoktur.
Örneğin, bir alışveriş sepetindeki öğeler ortak bir ürün listesini oluşturduğu için diziler içinde saklanabilir. Ayrıca, her yeni bir alışveriş listesi yazdığınızda, üzerindeki öğe sayısı farklı olabilir. Hadi JavaScriptte dizi tanımlama nasıl yapılıyor bakalım.
JavaScript Dizi Tanımlama
Bir dizi oluştururken ve ona herhangi bir değişken adı vermelisiniz. JavaScript’te diziler değişkenler gibi tanımlanır. Dizilerin tanımlamasında oluşan tek farklılık dizilere değer girişi yapılırken oluşmaktadır.
Değerler, bir çift köşeli parantez içinde diziye atanır ve her bir değer bir virgülle ayrılır. Dizideki değerlerin aynı veri türü olması gerekmez, böylece bir sayıyı ve bir boolean değeri aynı dizide saklayabilirsiniz.
Bir dizi oluşturmak için bu teknik, bir dizi literal olarak bilinir. Bir dizi oluşturmak için genellikle tercih edilen yöntemdir.
Yazım örneği: Aşağıdaki dizide dizi1 ve dizi2 adında iki tane dizi oluşturulmuştur.
1 2 3 4 5 6 | var dizi1; dizi1= [23,54,12,43]; var dizi2 =["ilk","ikinci deger",23,true]; |
Aşağıdaki örnekte renkler adında bir dizi oluşturulmuş, bir alttaki satırda renkler dizisine köşeli parantezler içinde 3 tane metinsel değer eklenmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <h1>Ürün</h1> <p id="renk">Renk burada olacak</p> <script> var renkler; renkler = ['Beyaz', 'Siyah', 'Özel']; var el = document.getElementById('renk'); el.textContent = renkler[0]; </script> </body> </html> |
JavaScript Array Nesnesi ile Dizi Oluşturma
Aşağıda, dizi oluşturucu olarak adlandırılan farklı bir teknik kullanılarak oluşturulmuş bir dizi görebilirsiniz. Bu new anahtar sözcüğünü Array (); Değerler daha sonra parantez içinde belirtilir (köşeli parantezler değil) ve her değer bir virgülle ayrılır.
1 2 3 | var renkler = new Array('Beyaz', 'Siyah', 'Özel'); |
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <h1>Ürün</h1> <p id="renk">Renk burada olacak</p> <script> var renkler = new Array('Beyaz', 'Siyah', 'Özel'); var el = document.getElementById('renk'); el.textContent = renkler[0]; console.log(renkler[0]); </script> </body> </html> |
JavaScript Dizideki Değerleri Okuma
Değer okuma işlemi index numaraları üzerinde yapılır. JavaScriptte tanımlanmış bir dizide değerlerin ilk index numarası 0 (sıfır) olarak kabul edilir. Bu nedenle dizinin son index numarası dizinin uzunluğunun bir eksiği olur.
var renkler = [‘Beyaz’, ‘Siyah’, ‘Özel’];
Yukarıdaki gibi tanımlanmış bir dizide sırasıyla değerleri okumak için;
renkler[0] –> Beyaz yazısını
renkler[1] –> Siyah yazısını
renkler[2] –> Özel yazısını işaret etmektedir.
Yukarıdaki örnekte dizinin elemanlarını sırasıyla okuma işlemini yapalım. Aynı örneğin çözümünü birden fazla yöntemle yapacağım. Her yöntemin kullanımını ve nedenlerini yanlarına yazacağım.
Çözüm 1: Belge içinde index numaralarını girerek yazdırma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <script> var renkler = ['Beyaz', 'Siyah', 'Özel']; window.alert( renkler[0] ); //ilk index window.alert( renkler[1] ); //ikinci window.alert( renkler[2] ); //üçüncü index </script> </body> </html> |
Çözüm 2: Dizinin son index elemanını bulmak için dizi uzunluğunun bir eksiğini almak gerekir. Örn: 5 elamanlı bir dizide son index 4 olacaktır. dizi.length özelliği dizi uzunluğunu verir.
1 2 3 4 5 6 | var renkler = ['Beyaz', 'Siyah', 'Özel']; // dizi uzunluğu için dizi.length özelliği kullanılır window.alert( renkler[renkler.length-1] ); //son index |
Çözüm 3: Dizideki tüm değerleri for döngüsü ile okuma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <script> var renkler = ['Beyaz', 'Siyah', 'Özel']; for(var i=0;i<=renkler.length;i++){ window.alert( renkler[i] ); } </script> </body> </html> |
JavaScript Dizideki Değerleri Değiştirme
Bir javascript dizisindeki değeri değiştirmek için okumada yapıldığı gibi dizinin indexi belirtilerek değişkenlerde olduğu gibi değer ataması yapılır. Aşağıdaki örnekte dizinin 2. elamanı mavi olarak değiştirilmektedir. 2. elemanın index numarası 1 olduğunu da unutmamak gerekir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <script> var renkler = ['Beyaz', 'Siyah', 'Özel']; renkler[1]="Mavi"; //index numarası 1 olan değeri mavi yaptık window.alert( renkler[1] ); //1 numaralı indexi ekrana yazdırdık </script> </body> </html> |
JavaScript ile dizi oluşturma konusunu tamamladık. JavaScript ile daha fazla işlem yapmak için JavaScript dizi fonksiyonları konusunu incelemenizi tavsiye ederim.
3 Yorum