JavaScript Dizi

İhtiyari dersler

Örnek

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

Kendi Kendinize Deneyin

Kurs tavsiyesi:

JavaScript dizileri, birçok değeri tek bir değişkende saklamak için kullanılır.

Nelerdir dizi?

Dizi, birden fazla değeri tek seferde saklayabilen özel bir değişkendir.
Bir proje listesi (örneğin, araç markaları listesi) varsa, araç markalarını tek bir değişkende saklamak şu şekilde olmalıdır:
var car1 = \"Saab\";

var car2 = \"Volvo\";

var car3 = \"BMW\";

Ancak, tüm araçları dolaşmak ve belirli bir değeri bulmak istiyorsanız? Üç araç markası yerine üç yüz araç markası olsaydı ne olurdu?

Çözüm, dizi!

Dizi, birçok değeri tek bir adla saklayabilir ve bu değerlere indeks numarası ile erişebilir.

Dizi oluşturma

Dizi metni, JavaScript dizisini oluşturmanın en basit yöntemidir. Gramer: vararray-name= [ item1,

Örnek

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

Kendi Kendinize Deneyin

item2

Örnek

, ...];
    Boşluklar ve satır boşlukları önemli değildir. Tanımlama çok satırlı olabilir:
    var cars = [
    "Saab",
"Volvo",

Kendi Kendinize Deneyin

"BMW"

];

Son elemanın ardından virgül yazmayın (örneğin, "BMW",).

Tarayıcılar arası uyumluluk sorunları olabilir.

Örnek

JavaScript anahtar kelimesi new kullanılarak

Kendi Kendinize Deneyin

Aşağıdaki örnek de dizi oluşturur ve ona değer atar: new Array().

var cars = new Array("Saab", "Volvo", "BMW");

Yukarıdaki iki örnek tamamen aynı etki eder. Kullanılmaz:

Kısa, okunabilir ve hızlı çalışma için ilk yöntemi (dizi metin yöntemini) kullanın.İndeks numarası (alt numarası)bir dizi elemanını referans almak için kullanılır.

Bu cümle, cars içindeki ilk elemanın değerini erişir:

var name = cars[0];

Bu cümle, cars içindeki ilk elemanı değiştirir:

cars[0] = \"Opel\";

Örnek

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

Kendi Kendinize Deneyin

[0] dizi içindeki ilk elemandır. [1] ikincisidir. Dizi indeksleri 0'dan başlar.

Dizi elemanlarını değiştirmek

Bu cümle, cars içindeki ilk elemanın değerini değiştirmiştir:

cars[0] = \"Opel\";

Örnek

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

Kendi Kendinize Deneyin

Tam diziye erişim

JavaScript ile, dizi adını kullanarak tam diziye erişebilirsiniz:

Örnek

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

Kendi Kendinize Deneyin

Dizi nesnedir

Dizi, özel bir nesne türüdür. JavaScript'te dizilere typeof işleçler "object" döndürür.

Ancak, JavaScript dizileri en iyi şekilde dizi olarak tanımlanmalıdır.

Dizi kullanımısayıonun "elemanlarına" erişmek için kullanılır. Bu örnekte,person[0] Bill döndürülür:

Dizi:

var person = ["Bill", "Gates", 62];

Kendi Kendinize Deneyin

Nesnelerİsimonun "üyelerine" erişmek için kullanılır. Bu örnekte,person.firstName Bill döndürülür:

Nesne:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Kendi Kendinize Deneyin

Dizi elemanları nesneler olabilir

JavaScript değişkenleri nesneler olabilir. Diziler özel bir nesne türüdür.

Bu yüzden, aynı dizi içinde farklı türdeki değişkenler saklayabilirsiniz.

Dizide nesneler saklayabilirsiniz. Dizide fonksiyonlar saklayabilirsiniz. Hatta dizide dizi saklayabilirsiniz:

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

Dizi özellikleri ve yöntemleri

JavaScript dizilerinin gerçek gücü, dizilerin özellikleri ve yöntemlerinde saklıdır:

Örnek

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

Önümüzdeki bölümde dizi yöntemlerini öğreneceğiz.

length özelliği

length özellik, dizinin uzunluğunu (dizi elemanlarının sayısını) döndürür.

Örnek

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits uzunluğu 4'tür

Kendi Kendinize Deneyin

length özellikler her zaman en yüksek dizi indeksinden (dizgi) büyük olur.

ilk dizi elemanına erişim

Örnek

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

Kendi Kendinize Deneyin

son dizi elemanına erişim

Örnek

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Kendi Kendinize Deneyin

dizi elemanlarını taramaktır

Diziyi taraymanın en güvenli yolu "for"Döngü:"

Örnek

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>";
}

Kendi Kendinize Deneyin

Ayrıca Array.foreach() Fonksiyon:

Örnek

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Kendi Kendinize Deneyin

dizi elementlerine eklemek

Dizi elementlerine eklemek için en iyi yöntem push() Yöntemler:

Örnek

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // fruits'a yeni bir element (Lemon) eklenir

Kendi Kendinize Deneyin

Ayrıca length Özellikler, dizilere yeni element eklemek için kullanılabilir:

Örnek

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // fruits'a yeni bir element (Lemon) eklenir

Kendi Kendinize Deneyin

Uyarı!

En yüksek indeksli elementi eklemek, dizide tanımlanmamış "delikler" oluşturabilir:

Örnek

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // fruits'a yeni bir element (Lemon) eklenir

Kendi Kendinize Deneyin

İlişkili diziler

Birçok programlama elementi adlandırılmış indeksli dizileri destekler.

Adlandırılmış indeksli diziler, ilişkili diziler (veya harita) olarak adlandırılır.

JavaScript desteklenmezadlandırılmış indeksli dizilerle kullanılabilir.

JavaScript'te, diziler sadecesayısal indeksler.

Örnek

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 3 döndürür
var y = person[0];              // person[0] "Bill" döndürür

Kendi Kendinize Deneyin

Uyarı!

Adlandırılmış indeks kullanırsanız, JavaScript diziyi standart bir nesneye dönüştürür.

Sonra, tüm dizinin yöntemleri ve özellikleri yanlış sonuçlar üretir.

Örnek:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length 0 döndürecektir
var y = person[0];              // person[0] undefined döndürecektir

Kendi Kendinize Deneyin

Dizi ve nesne arasındaki fark

JavaScript'teDiziKullanınsayısal indeksler.

JavaScript'tenesneKullanınAdlandırılmış indeksler.

Diziler, sayısal indekslere sahip özel nesne türleridir.

Diziyi ne zaman, nesneyi ne zaman kullanmalıyım?

  • JavaScript bağlantılı dizileri desteklemez
  • Eğer eleman adlarınıdizgi (metin)isenesne.
  • Eğer eleman adlarınısayıiseDizi.

new Array() kullanmayın

JavaScript'in yerleşik dizisi yapıcılarını kullanmaya gerek yok new Array().

Kullanın [] Bunun yerine!

Aşağıdaki iki farklı cümle points adında yeni bir boş diziyi oluşturur:

var points = new Array();         // kötü
var points = [];                  // iyi

Aşağıdaki iki farklı cümle altı sayı içeren yeni bir diziyi oluşturur:

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

Kendi Kendinize Deneyin

new Anahtar kelimeler kodu karmaşıklaştırabilir. Ayrıca bazı beklenmedik sonuçlar üretebilir:

var points = new Array(40, 100);  // iki eleman içeren diziyi oluşturur (40 ve 100)

Bir elemanı sildiğinizde ne olur?

var points = new Array(40);       // 40 adet tanımlanmamış eleman içeren diziyi oluşturur!!!

Kendi Kendinize Deneyin

Diziyi nasıl tanımlarım

Sıkça karşılaşılan sorunlar: Bir değişkenin dizisi olup olmadığını nasıl anlarım?

Sorun, JavaScript işlevatörlerinde typeof döndürür "object":

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // object döndürür

Kendi Kendinize Deneyin

typeof işlevi "object" döndürür çünkü JavaScript dizileri nesnelerdir.

Çözüm 1:

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

Array.isArray(fruits);     // true döner

Kendi Kendinize Deneyin

Bu yöntemin sorunu ECMAScript 5'tedir Eski tarayıcıları desteklemiyor.

Çözüm 2:

Kendi isArray() Bu fonksiyonla sorunu çözmek için:

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

Kendi Kendinize Deneyin

Eğer parametre diziyse, yukarıdaki fonksiyon her zaman true döner.

veya daha doğru bir açıklamayle: Eğer nesne örneği "Array" kelimesini içeriyorsa true döner.

Çözüm 3:

Eğer nesne belirtilen yapıcı tarafından oluşturulmuşsa: instanceof true dönen operatörler:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // true döner

Kendi Kendinize Deneyin