Diziler

Objeler değerlerin anahtarlı bir şekilde koleksiyon halinde tutulmasını sağlar.

Fakat bazı durumlarda sıralı koleksiyon tutmak gerekebilir, 1., 2. ve 3. elemente ihtiyaç olabilir. Örneğin kullanıcıların, ürünlerin, HTML elementlerinin liste halinde tutulmasını istediğinizde;

Obje kullanmak mantıklı değildir, çünkü elemanların sırasını tutmaz bu objeler. Var olanların “arasına” yeni bir özellik girilemez. Objeler böyle kullanımlara uygun değildir.

Bunun için özel bir veri yapısı vardır. Array sıralı koleksiyonları tutar.

Tanımlama

Boş dizi oluşturmak için iki yöntem vardır:

let arr = new Array();
let arr = [];

Neredeyse her zaman ikinci yazım kullanılır. Başlangıç değerlerini köşeli parantez içinde verebilirsiniz:

let meyveler = ["Elma", "Portakal", "Erik"];

Diziler sıfır ile başlarlar.

let meyveler = ["Elma", "Portakal", "Erik"];

alert( meyveler[0] ); // Elma
alert( meyveler[1] ); // Portakal
alert( meyveler[2] ); // Erik

Elamanı değiştirmek mümkündür:

meyveler[2] = 'Armut'; // Åžimdi ["Elma", "Portakal", "Armut"]

… Veya diziye yeni bir eleman eklemek mümkündür:

meyveler[3] = 'Limon'; // Åžimdi ["Elma", "Portakal", "Armut", "Limon"]

Dizide bulunan elemanların boyutu length metodu ile öğrenilebilir:

let meyveler = ["Elma", "Portakal", "Erik"];

alert( meyveler.length ); // 3

Ayrıca alert kullanarak tüm dizinin gösterilmesi de mümkündür:

let meyveler = ["Elma", "Portakal", "Erik"];

alert( meyveler ); // Elma,Portakal,Erik

Dizi her türlü elemanı tutabilir.

Örneğin:

// Karmaşık tipler
let arr = [ 'Elma', { isim: 'Ahmet' }, true, function() { alert('merhaba'); } ];

// Birinci indeksteki değeri al ve "isim" özelliğini görüntüle
alert( arr[1].isim ); // John

// 3. indeksteki fonksiyonu al ve çalıştır.
arr[3](); // merhaba

let meyveler = [
  "Elma",
  "Portakal",
  "Erik",
];

pop/push, shift/unshift işlemleri için metodlar

Kuyruk dizilerin en fazla kullanıldığı yerdir. Bilgisayar biliminde, sıralı elemanların koleksiyonları iki operasyonu desteklemelidir:

• Sonuna yeni eleman eklemeli : push.
• shift ile baÅŸlangıçtan eleman alındığında ikinci eleman birinci olmalı.

Diziler bu iki iÅŸlemi de destekler.

Bu işlemler ile çokça karşılaşılır. Örneğin, kuyruktaki mesajların hepsinin ekranda gösterilmesi gerekebilir.

Dizilerin diğer bir kullanım amacı ise diğer bir veri yapısı içindir. Stack

Ä°ki operasyonu destekler

• push : sona eleman ekler.
• pop : sondan eleman alır.

Bundan dolayı yeni elemanlar her zaman sondan alınır veya sona eklenir.

Yığın bir deste kart olarak düşünülebilir: yeni kartlar eklendiğinde en üste konulur veya en üstten alınır.

Yığına en son eklenen eleman ilk olarak alınır, Buna LIFO (Last-In-First-Out) Son giren ilk çıkar prensibi denir. Kuyruklar için ise FIFO (First-In-First-Out) yani ilk giren ilk çıkar prensibi kullanılır.

JavaScript’te diziler yığın veya kuyruk olarak kullanılabilirler. Başlangıca veya sona yeni eleman eklenebilir veya çıkartılabilir.

Bilgisayar biliminde bu işlemlere izin veren veri yapılarına deque denir.

Dizilerin sonu ile ilgili metodlar:

pop

Dizinin son elemanını döndürür:

let meyveler = ["Elma", "Portakal", "Armut"];

alert( meyveler.pop() ); // Armutu sil ve bunu ekranda bildir.

alert( meyveler ); // Elma, Portakal

push

Dizinin sonuna elaman ekler:

let meyveler = ["Elma", "Portakal"];

meyveler.push("Armut");

alert( meyveler ); // Elma, Portakal, Armut

fruit.push() ile fruit[fruits.length] = ... birbiri ile aynı anlama gelirler.

Dizilerin başlangıcı ile ilgili metodlar:

shift

Dizinin ilk elemanını döndürür:

let meyveler = ["Elma", "Portakal", "Armut"];

alert( meyveler.shift() ); // Elmayı sil ve bunu ekranda bildir.

alert( meyveler ); // Portakal, Armut

unshift

Dizinin başlangıcına eleman ekleme:

let meyveler = ["Portakal", "Armut"];

meyveler.unshift('Elma');

alert( meyveler ); // Elma, Portakal, Armut

push ve unshift metodları aynı anda birden fazla eleman ekleyebilirler:

let meyveler = ["Elma"];

meyveler.push("Portakal", "Armut");
meyveler.unshift("Ananas", "Limon");

// ["Ananas", "Limon", "Elma", "Portakal", "Armut"]
alert( meyveler );

Özellikler

Dizi özel bir tip objedir. arr[0] ile özelliÄŸe eriÅŸme aslında objelerden gelen bir yazım ÅŸeklidir. Sayılar anahtar olarak kullanılmaktadır.

Objeleri daha geniÅŸleterek sıralı veri koleksiyonları ve length gibi özellikler alması saÄŸlanmıştır. Fakat derininde diziler objedir.

Hatırlarsanız, JavaScript’te sadece 7 basit tip bulunmaktadır. Dizi obje olduğundan obje gibi davranır.

Örneğin referans ile kopyalanır:

let meyveler = ["Muz"]

let arr = meyveler; // iki değişken aynı diziye referans verir. ( referans ile kopyalama )

alert( arr === fruits ); // true

arr.push("Armut"); // diziyi referans ile düzenleme

alert( meyveler ); // Muz, Armut - 2 eleman

… Fakat dizileri asıl önemli kılan içinde neler olduğudur. JavaScript motoru elemanları ardışık hafıza alanlarında tutmaya çalışır. Böylece diziler çok hızlı şekilde çalışabilirler.

Fakat eğer “sıralı koleksiyon” olan diziden çıkılır ve obje olarak çalıştırılırsa her şey bozulur.

Örneğin, teknik olarak aşağıdaki örnek bunu yansıtır:

let meyveler = []; // Dizi yap

meyveler[99999] = 5; // boyutundan çokça büyük bir özelliğe veri ata.

meyveler.yas = 25; // doğrudan özelliğe isim vererek atama yap.

Diziler tabanda obje olduğundan dolayı yukarıdaki işlem geçerlidir. İstendiği şekilde özellik eklenebilir.

Fakat bu durumda JavaScript motoru bizim diziler ile değil de normal objeler üzerinde çalıştığımızı sanar. Bundan dolayı diziye özel optimizasyon uygulanmayacaktır.

Diziyi yanlış kullanma biçimleri:

• Sayısal olmayan bir özellik ekle arr.test = 5
• Delikler yap: arr[0] ekle sonra arr[1000] ekle ( arada hiçbir deÄŸer yok)
• Diziyi ters sıralı ÅŸekilde doldur, arr[1000], arr[999] vs.

Dizileri sıralı ÅŸekilde veri tutan özel bir yapı olarak düşünün. Bunun için özel metodlara sahiptir. JavaScript motoru içerisinde diziler çok etkili ve hızlı bir ÅŸekilde çalıştırılmak üzere ayarlanmıştır. Sizde bu ÅŸekilde kullanmaya hassasiyet gösterin. EÄŸer özelliÄŸi belirtmek istiyorsanız, belki de normal obje kullanmanız gerekmektedir {}

Performans

push/pop metodları hızlı çalışır, shift/unshift ise yavaÅŸ

Peki neden dizinin başlangıcı ile bitişine eleman eklemek arasında hız farkı olmaktadır? Çalışma anında neler oluyor bakalım:

meyveler.shift(); // Başlangıçtan bir eleman al

0 indeksinde bulunan elemanı silmek yeterli deÄŸildir. DiÄŸer elemanların tekrar numaralanması gerekmektedir.

shift metodunun yapması gereken 3 iÅŸlem vardır:

1. 0 indeksinde bulunan elemanın silinmesi
2. Tüm elemanların sola kaydırılması, indekslerin tekrar numaralandırılması 1’den 0’a, 2’den 1’e vs.
3. uzunluk özelliÄŸini güncelle.

Daha fazla elaman, daha fazla taşınma süresi , daha fazla hafıza içi işlem demektir.

Aynı ÅŸey unshift için de geçerlidir: dizilerin başına eleman ekleneceÄŸi zaman öncelikle elemanların saÄŸa kaydırılarak indeks artırılması gerekir.

Peki push/pop için böyle iÅŸlemlere gerek yok mu? Sondaki elemanı alabilmek için pop metodu indexi siler ve length’i bir azaltır.

pop metodunun yaptığı iÅŸlemler:

fruits.pop(); // Sondan bir eleman al

pop hiçbir ÅŸey taşımaz çünkü diÄŸer elemanların index’i deÄŸiÅŸmez. Bundan dolayı aşırı derecede hızlıdır.

push’da aynı ÅŸekilde sona ekler.

Döngüler

En eski yöntem for döngüsü kullanarak indeksler üzerinden dönmektir:

let dizi = ["Elma", "Portakal", "Armut"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}

Diziler için diÄŸer yöntem ise, for..of’tur:

let meyveler = ["Elma", "Portakal", "Erik"];

// Dizi elemanları üzerinden döner.
for(let meyve of meyveler) {
  alert( meyve );
}

for..of var olan elemanın kaçıncı eleman olduÄŸunun görülmesine izin vermez, sadece deÄŸeri döner. Fakat çoÄŸu durumda bu daha kısa ve yeterli bir kullanımdır.

Teknik olarak diziler objedir, bundan dolayı for..in kullanmak mümkündür.

let arr = ["Elma", "Portakal", "Erik"];

for (let key in arr) {
  alert( arr[key] ); // Elma, Portakal, Erik
}

Fakat bu bazı problemlere neden olur:

1. for..in döngüsü var olan tüm özelliklerin üzerinden geçer, sadece sayısal olanların deÄŸil.

   “dizi-benzeri” objeler bazı tarayıcı ve diÄŸer çevrelerde kullanılmaktadır. Bunlar “dizi gibi dururlar”, length ve indeks özelliklerine sahiptirler fakat sayısal olmayan özelliklere sahip metodlar da bulunmaktadır. Genelde bunlara ihtiyaç duyulmaz. for..in döngüsü bunları da listeler. Bundan dolayı dizi-benzeri bir obje ile çalışılacaksa, bu “ekstra” özellikler problem teÅŸkil edebilir.

2. for..in döngüsü genel objeler için kullanışlıdır, diziler için deÄŸil. Bundan dolayı diziler için kullanıldığında 10-100 kata kadar daha yavaÅŸtır. Tabi hala hızlı sayılır. Bu hız sadece darboÄŸaz (bottleneck) olduÄŸunda önem kazanır, aksi halde anlamsızdır. Fakat yine de bu farkı bilmek iyidir.

Genel olarak, for..in diziler ile kullanılmaz.

“length” ile ilgili bir not.

length özelliÄŸi dizi düzenlendiÄŸinde otomatik olarak güncellenir. Tam olarak bu uzunluk dizideki eleman sayısı deÄŸildir, en büyük sayısal indeksin bir fazlasıdır.

Örneğin indeksi büyük tek bir elemanlı dizi büyük uzunluk verir:

let meyveler = [];
meyveler[123] = "Elma";

alert( meyveler.length ); // 124

Genelde diziler bu şekilde kullanılmaz.

length hakkında diÄŸer bir ilginç bilgi ise bu özelliÄŸin yazılabilir olmasıdır.

Eğer elle bu değeri yükseltirseniz hiçbir şey olmaz, fakat düşürürseniz dizideki elemanlar silinir. Bu işlem geri döndürülemez, örneğin:

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 2 elemana düşür
alert( arr ); // [1, 2]

arr.length = 5; // uzunluÄŸu geri al
alert( arr[3] ); // undefined: değer dönmez

Dizinin içerisini silmenin kolay yolu : arr.length=0.

new Array()

Dizi yaratmanın bir diğer yolu ise aşağıdaki gibidir:

let arr = new Array("Elma", "Armut", "vs");

Bu ÅŸekilde yazım daha nadir kullanılır, [] kullanımı daha kısadır. Farklı bir özelliÄŸi daha vardır:

EÄŸer new Array sayı argümanı ile çağırılırsa, yeni bir boÅŸ dizi yaratır. İçerisine bir ÅŸey koymaz ve dizinin boyutunu belirtilen deÄŸer kadar tanımlar.

Bu özellik yanlış kullanıma müsaittir:

let arr = new Array(2); //  [2] diye bir dizi mi oluÅŸturacak ?

alert( arr[0] ); // undefined! böyle bir eleman yok

alert( arr.length ); // length 2

Yukarıda new Array(sayı)'nın tüm elemanları undefined döndürür.

Böyle sürprizler ile karşılaÅŸmamak için genelde [] kullanılır.

Çok Boyutlu Diziler

Dizilerin elemanları dizi olabilir. Matrisleri tutmak için çok boyutlu diziler kullanılabilir:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // merkez eleman

toString

Dizilerin kendi toString uygulaması mevcuttur. Bu dizilerin arasına virgül konularak geri döndürülür.

Örneğin:

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

Åžu ÅŸekilde denenirse:

alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"

Dizilerin Symbol.toPrimitive özellikleri yoktur, valueOf metodu da bulunmamaktadır. Sadece toString çevirimi mevcuttur. Bundan dolayı [] boÅŸ karakter dizisi döndürür , [1] 1, veya [1,2] "1,2" döndürür.

"+" operatörü karakter dizisine ekleme yaptığında diÄŸer bölümü de karakter dizisine çevirir. Bundan dolayı sonraki adım ÅŸu ÅŸekilde görülür:

alert( "" + 1 ); // "1"
alert( "1" + 1 ); // "11"
alert( "1,2" + 1 ); // "1,21"

Özet

Dizi özel bir çeşit objedir, verilerin sıralı bir şekilde saklanması için uygun bir tiptir.

• Tanım:

  // köşeli parantez ile (genel kullanılan)
  let arr = [item1, item2...];
  
  // new Array (Çok nadir kullanım)
  let arr = new Array(item1, item2...);

  new Array(number) verilen boyutlarda yeni bir dizi yaratır, fakat eleman olmadan.

• length özelliÄŸi dizinin boyu ve daha net olmak gerekirse son index sayısı + 1 ÅŸeklindedir. Dizi metodları tarafından otomatik olarak ayarlanır.

• EÄŸer length’i elle küçültürseniz dizi de kısalacaktır, tabi bu veri kayıplarına neden olabilir.

Dizi üzerinde aşağıdaki işlemler yapılabilir:

• push(...items) items’ı sona ekler.
• pop() sondan bir eleman siler ve döndürür.
• shift() baÅŸlangıçtan eleman siler ve bunu döndürür.
• unshift(...items) baÅŸlangıca items ekler.

Dizinin elemanlarını for döngüsü ile dönme:

• for(let i=0; i<arr.length; i++) – hızlı çalışır ve eski tarayıcılara uyarlıdır.
• for(let item of arr) – sadece elemanların yazımı için modern yazım saÄŸlar.
• for(let i in arr) – kullanılamaz.

Dizilere üzerinden tekrar geçilecektir. Diğer ekleme, silme, elemanların alınması, sıralanması gibi konulara Dizi Metodları bölümünde değinilecektir.