HTML CSS JAVASCRIPT ANGULAR

JavaScript Diziler


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

Örnek

var arabalar = ["araba1", "araba2", "araba3"];

Kendin Dene »

Dizi nedir?

Dizi özel bir çeşit değişkendir, tek seferde birden fazla değeri barındırabilir.

Eğer bir listeniz varsa (örneğin araba isimleri listesi), her bir araba ismini değişkenlerde şöyle saklayabilirdiniz: 

var araba1 = "araba1";
var araba2 = "araba2";
var araba3 = "araba3";

Ancak, araba isimleri içinden tek bir tanesini bulmanız gerektiğinde ne yapacaktınız? Ve 3 tane değil de 300 araba ismi olsaydı?

Çözümü bir dizi kullanmak!

Bir dizi tek bir isim altında birden fazla değeri saklayabilir, ve siz de index numarası yardımıyla istediğiniz değere ulaşabilirsiniz.


Dizi Oluşturmak

Bir JavaScript Dizisi oluşturmanın en kolay yolu köşeli parantezleri kullanmaktır.

Yazımı şu şekildedir:

var dizi_ismi = [oge1oge2, ...];      

Örnek

var arabalar = ["araba1", "araba2", "araba3"];

Kendin Dene »

Boşluklar ve satır araları önemli değildir. Dizi oluşturma birkaç satırda birden de yapılabilir:

Örnek

var arabalar = [ 
"araba1",
"araba2",
"araba3"
];

Kendin Dene »

Son elemandan sonra virgül koymak (örnek: "araba2",) bazı tarayıcılarda çalışmayabilir. 

Internet Explorer 8 ve öncesinde çalışmazlar.


JavaScript "new" Anahtar Kelimesini Kullanmak

Bu örnek bir dizi oluşturur ve içine değerler atar:

Örnek

var arabalar = new Array("araba1", "araba2", "araba3");

Kendin Dene »

Yukarıdaki iki örnek de aynı işlemi yapar. new Array() yöntemini kullanmaya gerek yoktur.
Kolaylık, okunabilirlik ve işlem hızı daha iyi olduğu için birinci yöntemi kullanmalısınız.


Dizinin Elemanlarına Erişme

Dizi elemanlarına erişmek için dizideki index numaralarını kullanırız.

Bu örnek satır arabalar dizisinin ilk elemanına erişir:

Örnek

var isim = arabalar[0];

Kendin Dene »

Örnek

var arabalar = ["araba1", "araba2", "araba3"];
document.getElementById("demo").innerHTML = arabalar[0];

Kendin Dene »

Not: Dizi index numaraları 0'dan başlar.

[0] birinci elamandır. [1] ise ikinci eleman.


Dizi Elemanını Değiştirmek

Bu örnek ifade, arabalar dizisinin ilk elemanının değerini değiştirir:

Örnek

arabalar[0] = "araba4";

Kendin Dene »

Örnek

var arabalar = ["araba1", "araba2", "araba3"];
arabalar[0] = "araba4";
document.getElementById("demo").innerHTML = arabalar[0];

Kendin Dene »


Bütün Diziye Erişmek

JavaScript ile tüm diziye birden erişmek için sadece dizinin adını kullanmak yeterlidir:

Örnek

var arabalar =["araba1", "araba2", "araba3"];
document.getElementById("demo").innerHTML = arabalar;

Kendin Dene »


Diziler Objedir

Diziler özel bir tür objedir. JavaScript typeof özelliği diziler için kullanıldığında geriye "object" değerini döndürür.

Ama JavaScript dizileri en iyi dizi olarak ifade edilebilirler.

Diziler elemanlarına erişmek için numaraları kullanırlar. Bu örnekte insan[0], Ali değerini döndürür:

Örnek

var insan = ["Ali", "Pak", 46];

Kendin Dene »

Objeler elemanlarına erişmek için isimleri kullanırlar. Bu örnekte, insan.ad geriye Ali değerini döndürür:

Örnek

var insan = {ad:"Ali", soyad:"Pak", yas:46};

Kendin Dene »


Dizi Elemanları Obje Olabilir

JavaScript değişkenleri obje olabilir. Diziler özel bir çeşit objedir.

Bu yüzden, farklı türdeki değişkenleri aynı dizi içerisinde kullanabilirsiniz.

Dizi içerisinde objeleriniz olabilir. Dizi içerisinde fonksiyonlarınız olabilir. Dizi içerisinde diziniz de olabilir: 

yeniDizi[0] = Date.now;
yeniDizi[1] = yeniFonksiyon;
yeniDizi[2] = arabalar;


Dizi Özellikleri ve Metodları

JavaScript dizileri kullanmanın en büyük avantajı hazır olan dizi özelliklerini ve metodlarını kullanabilmektir:

Örnek

var x = arabalar.length;   // length özelliği dizideki eleman sayısını döndürür
var y = arabalar.sort();   // sort() metodu diziyi sıralar

Kendin Dene »

Dizi metodları diğer bölümlerde işlenmiştir.


length Özelliği

length özelliği dizinin uzunluğunu döndürür. (dizideki eleman sayısını).

Örnek

var meyveler = ["Muz", "Portakal", "Elma", "Mango"];
meyveler.length;   // meyveler dizisinin uzunluğu 4

Kendin Dene »

length özelliğinde dönen değer her zaman en yüksek index numarasının bir fazlasıdır.


Dizideki İlk Elemana Erişmek

Örnek

meyveler = ["Muz", "Portakal", "Elma", "Mango"];
var ilk = meyveler[0];

Kendin Dene »


Dizideki Son Elemana Erişmek

Örnek

meyveler = ["Muz", "Portakal", "Elma", "Mango"];
var son = meyveler[meyveler.length - 1];

Kendin Dene »


Dizi İçinde Döngü Kullanmak

Dizi içinde döngü kullanmanın en güvenli yolu for döngüsü kullanmaktır:

Örnek

var meyveler, yazi, meyvelerUzunluk, i;
meyveler = ["Muz", "Portakal", "Elma", "Mango"];
meyvelerUzunluk = meyveler.length;

yazi = "<ul>";
for (i = 0; i < meyvelerUzunluk; i++) {
  yazi += "<li>" + meyveler[i] + "</li>";
}
yazi += "</ul>";

Kendin Dene »

Ayrıca Array.forEach döngüsü de kullanabilirsiniz:

Örnek

var meyveler, yazi;
meyveler = ["Muz", "Portakal", "Elma", "Mango"];

yazi = "<ul>";
meyveler.forEach(fonksiyon);
yazi += "</ul>";

function fonksiyon(value) {
  yazi += "<li>" + value + "</li>";
}

Kendin Dene »


Dizi Elemanı Eklemek

Diziye yeni bir eleman eklemenin en kolay yolu push metodu kullanmaktır:

Örnek

var meyveler = ["Muz", "Portakal", "Elma", "Mango"];
meyveler.push("Limon");    // meyveler dizisine yeni Limon elemanı ekler

Kendin Dene »

Yeni eleman diziye length özelliği kullanılarak da eklenebilir:

Örnek

var meyveler = ["Muz", "Portakal", "Elma", "Mango"];
meyveler[meyveler.length] = "Limon";    // meyveler dizisine Limon elemanını ekler

Kendin Dene »

Dikkat!

Diziye yeni bir eleman eklerken yüksek index numaralarıyla eklemek dizide tanımlanamayan boşluklar oluşmasını sağlayabilir: 

Örnek

var meyveler = ["Muz", "Portakal", "Elma", "Mango"];
meyveler[6] = "Limon";    // meyveler dizisine Limon elemanını ekler

Kendin Dene »


İlişkisel Diziler

Birçok programlama dili, isimlendirilmiş indexli dizileri destekler.

İsimlendirilmiş indexli dizilere ilişkisel diziler denir.

JavaScript ilişkisel dizileri desteklemez.

JavaScript'te diziler yalnızca numaralı index kullanır.

Örnek

var insan = [];
insan[0] = "Ali";
insan[1] = "Pak";
insan[2] = 46;
var x = insan.length;     // insan.length 3 değerini döndürür
var y = insan[0];         // insan[0] "Ali" değerini döndürür

Kendin Dene »

Dikkat!

JavaScript'te eğer isimlendirilmiş index kullanırsanız, JavaScript diziyi standart obje türüne çevirecektir.
Obje türüne çevrildikten sonra, bazı dizilerle ilgili metodları ve özellikler doğru sonuçlar vermeyecektir.

Örnek

var insan = [];
insan["ad"] = "Ali";
insan["soyad"] = "Pak";
insan["yas"] = 46;
var x = insan.length;     // insan.length 0 döndürür
var y = insan[0];         // insan[0] undefined yani tanımlanamayan değer döndürür

Kendin Dene »


Diziler ve Objeler Arasındaki Fark

JavaScript'te, diziler numaralı index kullanır.  

JavaScript'te, objeler isimlendirilmiş index kullanır.

Diziler numaralı index kullanan özel türdeki objelerdir


Dizi mi Obje mi Kullanmalı?

  • JavaScript ilişkisel dizileri desteklemez.
  • Elemanların isimlerinin yazı (string) olmasını istediğinizde obje kullanmalısınız.
  • Elemanların isimlerinin numara olmasını istediğinizde dizi kullanmalısınız.

new Array() Kullanımı

JavaScript'teki new Array() komutunu kullanmaya gerek yok.

Bunun yerine [] köşeli parantezleri kullanmalısınız.

Bu örnekteki iki satır da iki yeni dizi oluşturmaktadır:

Örnek

var noktalar = new Array();     // Kötü kullanım
var noktalar = [];              // İyi kullanım

Kendin Dene »

Bu örnekteki iki satır da içerisinde 6 adet sayı bulunan yeni dizi oluşturmaktadır:

Örnek

var noktalar = new Array(40, 100, 1, 5, 25, 10); // Kötü kullanım
var noktalar = [40, 100, 1, 5, 25, 10];          // İyi kullanım

Kendin Dene »

new kelimesi sadece kodu karmaşıklaştırmaktadır. Ve bazen öngörülemeyen sonuçlarla karşılaşmanızı sağlar: 

Örnek

var noktalar = new Array(40, 100);  // İki elemanlı bir dizi oluşturur (40 ve 100)

Kendin Dene »

Peki ya tek eleman eklemek isteseydik?

Örnek

var noktalar = new Array(40); // 40 adet tanımlanmamış elemanlı bir dizi oluşturur!

Kendin Dene »


Dizi mi Değil mi?

Genelde sorulan bir soru şudur: Bir değişkenin dizi olup olmadığını nasıl anlarız?

Örnekte görüldüğü gibi, JavaScript'teki typeof geriye "object" değeri döndürüyor, "array" değil:

Örnek

var meyveler = ["Muz", "Portakal", "Elma", "Mango"];
typeof meyveler;

Kendin Dene »

Obje döndürüyor, çünkü diziler aslında birer objedir.

Çözüm 1: 

Bu sorunu çözmek için Array.isArray() metodunu kullanabiliriz:

Örnek

var meyveler = ["Muz", "Portakal", "Elma", "Mango"];
Array.isArray(meyveler);

Kendin Dene »

Bu çözümdeki sorun Array.isArray() metodu eski tarayıcılarda çalışmamaktadır.

Çözüm 2:

Bu problemi çözmek için kendi diziMi() fonksiyonunuzu oluşturabilirsiniz:

Örnek

function isArray(x) {
     return x.constructor.toString().indexOf("Array") > -1;
}

Kendin Dene »

Bu fonksiyon, eğer değişken bir diziyse her zaman "true" döndürür.

Daha doğrusu: eğer değişken prototipi Array kelimesini barındırıyorsa "true" döndürür.

Çözüm 3:

instanceOf operatörü, eğer dizi köşeli parantezler kullanılarak oluşturulduysa, "true" değeri döndürür:

Örnek

var meyveler= ["Muz", "Portakal", "Elma", "Mango"];
meyveler instanceof Array;

Kendin Dene »


Anlamadığınız bir konu mu var?

Konu ile ilgili sorunuzu uzmanim.net'e sorabilirsiniz: uzmanim.net'e sor!