JavaScript’te Diziler (16.Ders)

JavaScript dizileri (Arrays), birden çok değeri tek bir değişkende depolamak için kullanılır.

var arabalar = ["Chevrolet", "Audi", "Passat"];

Dizi nedir?

Dizi, aynı anda birden fazla değeri tutabilen özel bir değişkendir.

Bir öğe listeniz varsa (örneğin, araba isimleri listesi), arabaları tek değişkenlerde saklamak şöyle görünebilir:

var car1 = "Chevrolet";
var car2 = "Aveo";
var car3 = "Passat";

Ancak, ya arabalar arasında dolaşıp belirli bir tane bulmak istiyorsanız? Peki ya 3 değil, 300 arabanız olsaydı?

Çözüm bir dizi!

Bir dizi, tek bir ad altında birçok değeri tutabilir ve değerlere bir dizin numarasına başvurarak erişebilirsiniz.

Dizi Oluşturma

var array_name = [item1, item2, ...];

var cars = ["Saab", "Volvo", "BMW"];

Boşluklar ve satır kesmeleri önemli değildir. Bir bildirim birden çok satıra yayılabilir:

var arabalar = [
  "Chevrolet",
  "Audi",
  "BMW"
];

JavaScript Anahtar Kelimesini Kullanma:new

var arabalar = new Array("Fiat", "Volvo", "Renault");

Yukarıdaki iki örnek tamamen aynıdır. new Array () kullanmaya gerek yoktur.

Basitlik, okunabilirlik ve yürütme hızı için ilkini kullanın (dizi değişmez yöntemi).

Dizinin Elemanlarına Erişme

Bir dizi öğesine dizin numarasına bakarak erişirsiniz.

Bu ifade, arabalar dizisindeki ilk öğenin değerine erişir:

var name = arabalar[0];

var cars = ["Chevrolet", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

//Sonuç:Chevrolet

Not: Dizi dizinleri 0 ile başlar.

[0] ilk elementtir. [1] ikinci elementtir.

Dizi Öğesini Değiştirme

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

arabalar[0] = "Opel";

var cars = ["Chevrolet", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Tüm Diziye Erişme

JavaScript ile, dizi adına başvurarak tam diziye erişilebilir:

var cars = ["Chevrolet", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Diziler Aynı Zamanda Nesnedir

Arrays (Diziler) özel bir nesne türüdür. JavaScript’teki typeof operatörü diziler için “object” değerini döndürür.

Fakat, JavaScript dizileri arrays olarak tanımlar. Bu şekilde daha iyi olduğu için.

Diziler, “öğelerine”(members) erişmek için sayıları (numbers) kullanır. Bu örnekte, [0] kişisi Murat’ı döndürür:

var person = ["Murat", "Can", 20];

Nesneler “üyelerine” erişmek için adları kullanır. Bu örnekte, person.firstName John değerini döndürür:

var kişi = {ad:"Ali", lastName:"Çakmak", age:20};

Dizi Öğeleri Nesne Olabilir

JavaScript değişkenleri nesne olabilir. Diziler de özel nesnelerdir.

Bu nedenle, aynı Dizide farklı türde değişkenlere sahip olabilirsiniz.

Bir Dizi içinde nesneler olabilir. Bir Dizide fonksiyonlar olabilir. Dizi içinde diziler de olabilir:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Dizi Özellikleri ve Yöntemleri

JavaScript dizilerinin gerçek gücü yerleşik dizi özellikleri ve yöntemleridir:

var x = cars.length;   // length özelliğinde elemanların sayısı döner
var y = cars.sort();   // sort() yönteminde ise dizeleri sıralarsınız

Length Özelliği

var meyveler = ["Banana", "Orange", "Apple", "Mango"];
meyveler.length;   // Sonuç : 4

Length özelliği her zaman en yüksek dizinin sayısından bir fazladır.

İlk Dizi Öğesine Erişim

meyveler = ["Erik","Kiraz","Cındık","Ceviz"];
var first = meyveler[0];

Son Dizi Öğesine Erişme

meyveler = ["Muz","Armut","Ceviz","Fındık"];
var last = meyveler[meyveler.length-1];

Dizi Öğelerinnde Döngü Oluşturma

Dizi öğelerinde en baş ağrıtmadan döngü oluşturmanın yolu for kullanmaktır.

var fruits,text,flen,i;
fruits = ["Banana","Orange","Apple","Mango";
flen = fruits.length;

text = "<ul>";
for (i = 0; i<flen; i++) {
text += "<li>" + fruits[i] + "</li>";
}

text += "</ul>";

Yukarıdaki işlemin sonucu

Banana
Orange
Apple
Mango

Ayrıca Array.forEach() fonksiyonunu da kullanabilirsiniz:

var fruits, text;
fruits = ["Banana","Orange","Apple","Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text +="</ul>";

function myFunction(value) {
text += "<li>" + value + "</li>";
}

Dizi Öğeleri Ekleme

Diziye kolayca bir öğe eklemek için push () kodunu kullanabiliriz:

var meyveler = ["Muz","Kivi","Elma","Armut"];
meyveler.push("Ceviz"); // bu kod meyveler dizesine eklenecektir.

Yeni bir öğe length koduyla da ekleyebiliriz. Biliyorum bu bazen kafa karıştırıcı olabiliyor. Her uygulamanın bir kaç yoldan yapılış yöntemi var. Siz hangisi size uygunsa onu seçme kararlılığına sahip olmanız gerekiyor.

var sebzeler = ["Hıyar","Domates","Lahana","Marul"];
sebzeler[sebzeler.length] = "Turp"; //Sebzelere Turp ekleyecektir.

Peki 4 öğeli bir dizimiz olduğunu düşünelim. Bu dizimize 7.sıraya başka bir dizi eklediğimizde 5. ve 6. dizeye ne olur. Ben söyleyeyim undefined olur.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";    
// Burada 6.sıraya eklediğimiz 
Lemon öğesi diğer boş kalan 
satırları undefined olarak
gösterir.

İlişkilendirilmiş Diziler

Bir çok programlama dili named indexes olayını destekler.

Named indexes diziler aynı zamanda associative arrays olarakta adlandırılır.

JavaScript named indexes olayını desteklemez. ,

JavaScript her zaman dizileri(arrays) numbered indexes olarak kullanır.

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;     // person.length will return 3
var y = person[0];         // person[0] will return "John"

Yukarıdaki kodda sonuç John 3

Kodda gördüğünüz gibi numaralandırma işlemiyle numbered indexes olayını anladınız.

Adlandırılmış dizinler kullanırsanız, JavaScript diziyi standart bir nesneye yeniden tanımlar.Bundan dolayı, bazı dizi yöntemleri ve özellikleri yanlış sonuçlar üretecektir.

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;     // person.length will return 0
var y = person[0];         // person[0] will return undefined

Sonuç undefined 0

Diziler ve Nesneler Arasındaki Fark

JavaScript’te, diziler numaralı dizinler kullanır.

JavaScript’te nesneler adlandırılmış dizinler kullanır.

Arrays, numaralandırılmış dizinleri olan özel bir nesne türüdür.

Diziler Ne Zaman Kullanılmalı? Nesneler ne zaman kullanılır?

JavaScript ilişkilendirilebilir dizileri desteklemez.

Öğe adlarının sayı olmasını istediğinizde diziler kullanmalısınız.
Öğe adlarının dize (metin) olmasını istediğinizde nesneleri kullanmalısınız.

Bu kodu kullanmayın: new Array()

new Array() JavaScript’in yerleşik yapısında bunu kullanmanıza gerek yoktur.

Onun yerine

[] kullanın.

Bu iki farklı ifadenin her ikisi de points adlı yeni bir boş dizi oluşturur:

var points = new Array();     // Bad
var points = [];              // Good

Aşağıdaki iki farklı durumda 6 numaralı bir dizi oluşturur.

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

new() anahtar kelime yalnızca kodu karmaşıklaştırır. Ayrıca bazı beklenmedik sonuçlar da üretebilir:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

Öğelerden birini kaldırırsam ne olur?

var points = new Array(40);  // sonuç undefined!

Bir Diziyi Tanıma

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

Sorun JavaScript operatörü typeof kodunu “object” yani nesne olarak döndürüyor olmasıdır:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;    // returns object (Nesne)

JavaScript dizisi bir nesne olduğu için typeof operatörü nesne olarak döndürür.

Çözüm 1:

Bu sorunu çözmek için ECMAScript 5 yeni bir yöntem Array.isArray () tanımlar:

Array.isArray(fruits);   // returns true

Not: Bu problemin çözümü ECMAScript 5’in eski tarayıcılarda desteklenmemektedir.

Çözüm 2:

Bu sorunu çözmek için kendi isArray () fonksiyonunu oluşturabilirsiniz:

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

Bağımsız değişken bir dizi ise yukarıdaki işlev her zaman true değerini döndürür.

Daha doğrusu: nesne prototipi “Dizi” kelimesini içeriyorsa true değerini döndürür.

Çözüm 3:

İnstanceof operatörü, belirli bir kurucu tarafından bir nesne oluşturulursa true değerini döndürür:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;   // returns true

Masif Dinamik