Skip to content

4. Tablolar

Image

4.1. [tab-01] betiği

Aşağıdaki komut dosyası, JavaScript tablolarının bazı özelliklerini göstermektedir. Bunlar PHP tablolarına benzer, ancak önemli bir fark vardır: bunlar işaretçiler aracılığıyla işlenir ve nesneler olarak kabul edilir.


''use strict';

// bir dizi, adresi üzerinden işlenen bir nesnedir
const tab1 = [1, 2, 3];
// adreslerin kopyalanması
const tab2 = tab1;
// tab1 ve tab2 aynı diziye işaret eder
console.log("tab1===tab2 :", tab1 === tab2);
// tab1 veya tab2 aracılığıyla diziyi değiştirebiliriz
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Çalıştırma


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

Yorumlar

  • Sonuçların 2. satırı, [tab1] ve [tab2]'in iki eşit varlık, aslında iki eşit işaretçi olduğunu göstermektedir;
  • sonuçların 4. ve 5. satırları, bu iki işaretçinin aynı diziye işaret ettiğini göstermektedir;

4.2. [tab-02] komut dosyası

Bu komut dosyası, JavaScript dizisinin derlenmiş dillerin dizilerinden farklı olduğunu göstermektedir.


''use strict';

// dizi
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// bir elemanın başlatılması
tab[3] = 100;
tab[1] = "huit";
// dizi
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// dizinin anahtarları, dizinin indeksleridir
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// dizinin değerleri
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • 4. satır: boş bir dizi;
  • 8. satır: Bir dizinin sabit bir boyutu yoktur. Bu, sadece bir numara ile indekslenen bir eleman dizisidir. [0, 1, 2] elemanları henüz tanımlanmamış olsa bile 3 numaralı elemanı başlatabiliriz;
  • 16-24. satırlar: Bir JavaScript dizisi, PHP dizisiyle benzer bir davranış sergiler;

Çalıştırma


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. [tab-03] komut dosyası

Bu komut dosyası, [tableau] nesnesinin çeşitli yöntemlerini gösterir.


'use strict';
// bir dizi farklı veri türleri içerebilir
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log, bir dizinin içeriğini görüntüleyebilir
show(1);
console.log("tab=", tab);
show(2);
// foreach ile diziyi tarama
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// aynı işlemi gerçekleştirmek için başka bir yazım şekli
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// for döngüsüyle tabloyu tarama
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// tab[i]'i değiştirme
tab[5] = [];
// görüntüleme
console.log("tab=", tab);
show(5);
// son öğeyi silme
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// dizinin sonuna bir eleman ekleniyor
tab.push('xyz');
console.log("tab=", tab);
show(7);
// tablonun başına bir öğe ekleniyor
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// dizinin 1. elemanını silme
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// tablodan 2 numaralı öğeyi kaldırıyoruz
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// tablodan 1 numaralı öğeden itibaren iki öğe kaldırılır
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// işlev
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Açıklamalar

  • PHP dizileri ile JavaScript dizileri arasındaki fark, 3. ve 24. satırlarda gösterilmektedir:
    • 3. satırda [tab] değişkeni bir sabit olarak tanımlanmıştır;
    • 24. satırda tab[5] öğesi değiştirilir;
  1. satırda, sabit olarak tanımlanan, diziye işaret eden işaretçidir; dizinin kendisi değildir. Dizi değiştirilebilir.
  • 14-16. satırlar: [tab] dizisi, [tab] dizisinin [forEach] adlı yöntemi kullanılarak taranır. Bu yöntem, bir fonksiyon tanımı parametre olarak alır; buna "literal fonksiyon" da denilebilir. Bu parametre fonksiyonu, [tab] dizisinin geçerli elemanını parametre olarak alır. Fonksiyon, dizinin her elemanı için çağrılır. Bu tür bir yazım biçimi JavaScript'te yaygındır;
  • 9-10. satırlar: parametreli fonksiyonu tanımlamak için farklı bir sözdizimi kullanılır. Şu şekilde yazmak yerine:
    • function(p1, p2, …, pn){….}

şeklinde yazmak yerine:

  • (devam)
    • (p1,p2, ..,pn)=>{.…}. Buna “ok” veya “arrow” notasyonu denir;
  • kodun geri kalanı açıklamalarla açıklanmıştır;

Bu betikle ilgili olarak şunlara dikkat edilmelidir:

  • bir dizi, bir işaretçi tarafından referans verilen bir nesnedir;
  • bu nesnenin [forEach, pop, push, shift, unshift] yöntemlerine sahip olduğu;

4.4. [tab-04] betiği

Bu betik, dizi nesnelerinin diğer yöntemlerini göstermektedir.


'use strict';

// dizi işleme yöntemi

// bir dizi
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// görüntüleme
console.log("tab=", tab);
// harita
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// görüntüleme
console.log("tab=", tab);
console.log("tab2=", tab2);
// başlangıç değeri olmadan reduce
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// başlangıç değeri olan indirgeme
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// filtre
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// bul
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// sıralama
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// ters sıralama
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

Açıklamalar

  • 13-15. satırlar: [map] yöntemi, bir dönüşüm işlevini parametre olarak kabul eder. Bu işlev, tablonun her bir elemanı için tekrar tekrar çağrılır. Görevi, elemanı başka bir şeye dönüştürmektir; burada, [prop1, prop2] özelliklerine sahip bir nesneye dönüştürülür. [map] yöntemi yeni bir dizi döndürür. Eski dizi değiştirilmez: 

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]
  • 20. satır: [reduce] yöntemi, tablonun her bir elemanı için tekrar tekrar çağrılan iki parametreli bir işlevi parametre olarak kabul eder. Bu işlev iki parametre kabul eder:
    • [currentValue], dizinin geçerli elemanıdır;
    • [accumulator], fonksiyon tarafından elde edilen son sonuçtur. Bu biriktirici için herhangi bir başlangıç değeri belirtilmezse, bu değer 0 olur;
    • birikim fonksiyonu ilk kez çağrıldığında, [0+tab[0]] değerini döndürür. Biriktiriciye atanan değer budur;
    • ikinci kez çağrıldığında, biriktirici+tab[1] değerini döndürür, yani tab[0]+tab[1];
    • üçüncü seferde, biriktiriciye +tab[2] değerini verir, yani tab[0] + tab[1] + tab[2];
    • vb. Sonuçta, biriktirici [tab] dizisindeki tüm elemanların toplamını temsil edecektir;
  • 26. satır: [filter] yöntemi, bir filtreleme fonksiyonunu parametre olarak alır. Bu fonksiyon, dizinin her bir elemanı için tekrar tekrar çağrılır ve söz konusu elemanı parametre olarak alır. Elemanın tutulması gerekiyorsa şu sonucu döndürmelidir:
    • [true];
    • Aksi takdirde [false];
  • 33. satır: [find] yöntemi, bir arama fonksiyonunu parametre olarak alır. Bu fonksiyon, dizideki her bir eleman için tekrar tekrar çağrılır ve söz konusu elemanı parametre olarak alır. Alınan eleman arama kriterini karşılıyorsa [true] değerini döndürmelidir. Bu durumda fonksiyon durur. Dolayısıyla [find] yöntemi 0 veya 1 eleman döndürür;
  • 36. satır: [findIndex] yöntemi, [find] yöntemi gibi çalışır, ancak bulunan öğeyi döndürmek yerine, dizideki indeksini döndürür;
  • 39. ve 41. satırlar: [indexOf(valeur)] yöntemi, dizide [valeur]'i arar ve bulunursa indeksini, bulunmazsa -1 değerini döndürür;
  • 44. satır: [lastIndexOf(valeur)] yöntemi, [indexOf(valeur)] yöntemi gibi çalışır, ancak aramaya dizinin sonundan başlar;
  • satır 47: Parametresiz [sort] yöntemi, doğal sıraya göre (sayılar, dizeler) sıralanmış bir dizi döndürür;
  • satır 50: Doğal sıralama uygun olmadığında, iki parametreli (e1, e2) bir işlev olan [sort] yöntemine başvurulmalıdır; bu işlev şu sonuçları verir:
    • e1'in e2'den sonra sıralanması gerekiyorsa +1;
    • e1'in e2'den önce sıralanması gerekiyorsa -1;
    • her iki öğenin de aynı sıralamada olması gerekiyorsa 0;

[sort] yöntemine parametre olarak geçirilen işlev, tablodaki iki öğeyi karşılaştırmak için bu yöntem tarafından tekrar tekrar çağrılır;

https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, aşağıdaki lisans koşullarına göre kamuoyuna sunulmaktadır: Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Şekilde Paylaş 3.0 Değiştirilemez.