Dizi Metodlar

Diziler birok metod sunarlar. leri daha kolaylatrmak iin bu blm ikiye ayrlacaktr.

Elaman silme/ekleme

Eleman eklemenin ve silmenin batan ve sondan nasl olacan grdnz:

• arr.push(...items) elemanlar sona ekler,
• arr.pop() sondaki eleman karr.
• arr.shift() balangtan eleman karr.
• arr.unshift(...items) balanga eleman ekler.

Dier birka metod ise aadaki gibidir.

splice

Diziden eleman nasl silinir?

Diziler de obje olduklarndan dolay, delete kullanarak silinebilir.

let arr = ["eve", "gitmek", "istiyorum"];

delete arr[1]; // "gitmek" silinecek

alert( arr[1] ); // undefined

// imdi arr = ["eve",  , "istiyorum"];
alert( arr.length ); // 3

Eleman silinmesine ramen, dizi hala 3 elemana sahip. Bunu arr.length == 3 kontroln yaparak grebilirsiniz.

Olmas gereken de bu, nk delete obj.key deeri anahtara gre siler. Sadece bu ii yapar. Bu da objeler iin yeterlidir. Fakat diziler iin genelde istediimiz elamanlarn birbirlerinin yerleri doldurmasdr. Bundan dolay dizinin ksaldn grmemiz lazm.

Bundan dolay zel metodlar kullanlmaldr.

arr.splice(str) metodu isvire aks gibi her ie yarar. Diziye yeni bir eleman ekleyebilir ve silebilir.

Yazm:

arr.splice(index[, deleteCount, elem1, ..., elemN])

indexten balar ve deleteCountkadar eleman siler ve sonra elem1, ..., elemN eklinde yerlerine yerletirir. Diziden silinen elemanlar dnderir.

Bu metodu rnek ile anlamak ok daha kolaydr.

Silme ilemi ile balayalm:

let arr = ["Ben", "JavaScript", "alyorum"];

arr.splice(1, 1); // index 1'den 1 elaman sil

alert( arr ); // ["Ben", "alyorum"]

Kolay deil mi? 1. indeksten balayarak 1 eleman sildi.

Bir sonraki rnekte ise 4 eleman silinecek ve yeni bir eleman bunlarn yerine konulacak.

let arr = ["Ben", "u", "an", "JavaScript", "alyorum"];

// lk 4 elaman sil ve ncesine yeni eleman ekle.
arr.splice(0, 4, "Ders")

alert( arr ) // imdi [Ders alyorum]

Burada splice in silinen elemanlar dndrd grlebilir.

let arr = ["Ben", "u", "an", "JavaScript", "alyorum"];

// ilk iki eleman sil.
let removed = arr.splice(0, 2);

alert( removed ); // "Ben", "u" <-- silinen elemanlar

splice metodu ayrca hibir ey silmeden de ekleme yapabilir. Bunun iin deleteCountu 0 yapmanz gerekmektedir:

let arr = ["Ben", "JavaScript", "alyorum"];

// 1. indeksten
// 0 tane sil
// Sonrasnda "karmak" ekle
arr.splice(1, 0,  "karmak");

alert( arr ); // "Ben", "karmak", "JavaScript", "alyorum"

let arr = [1, 2, 5]

// indeks -1 ( sondan birinci )
// 0 eleman sil,
// 3 vs 4 ekle
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

slice

arr.slice metodu arr.splicea gre daha basittir.

Yazm:

arr.slice(start, end)

Yeni bir dizi dndrr. Bu dizi ierisinde "start" ile "end" arasnda ( "end" dahil olmadan ) tm elemanlar kopyalar. start ve end negatif olabilir. Negatif durumlarda dizi sondan deer balar.

str.slice gibi alr fakat karakter dizisi(string) yapmak yerine alt-dizi yapar.

rnein:

let str = "test";
let arr = ["t", "e", "s", "t"];

alert( str.slice(1, 3) ); // es
alert( arr.slice(1, 3) ); // e,s

alert( str.slice(-2) ); // st
alert( arr.slice(-2) ); // s,t

concat

arr.concat metodu dizi ile dier dizileri veya elemanlar birbirine eklemeye yarar.

Yazm:

arr.concat(arg1, arg2...)

stenildii kadar argman kabul eder, bunlar dizi veya deer olabilir.

Sonu arr, ardndan arg1, arg2 eklinde tm dizileri ve deerleri ieren bir dizi olur.

Eer bir argman dizi ve Symbol.isConcatSpreadable zelliine sahip ise bunun tm alt elemanlar kopyalanr. Dier trl argmann sadece kendisi kopyalanr.

rnein:

let arr = [1, 2];

// diziyi [3,4] ile birletir
alert( arr.concat([3, 4])); // 1,2,3,4

// diziyi [3,4] ve [5,6] ile birletir
alert( arr.concat([3, 4], [5, 6])); // 1,2,3,4,5,6

// diziyi [3,4] ile birletir ve ardndan 5, 6 ekle
alert( arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6

Normalde, dizide bulunan elemanlar kopyalar. Dier objeler dizi olsalar bile bir btn olarak eklenirler.

let arr = [1, 2];

let arrayLike = {
  0: "something",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]
//[1, 2, arrayLike]

Fakat dizi benzeri obje Symbol.isConcatSpreadable zelliine sahipse, bunlarn elemanlar eklenir:

let arr = [1, 2];

let arrayLike = {
  0: "baka",
  1: "bir ey",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,baka,bir ey

Dizide arama

Dizi ierisinde aramak iin baz metodlar bulunmaktadr.

indexOf/lastIndexOf ve includes

arr.indexOf, arr.lastIndexOf ve arr.includes ayn yazma sahiptirler, ve aslnda hepsi ayn ii yapar. Sadece karakterler yerine elemanlar zerinde alrlar.

• arr.indexOf(eleman, balangic) baslangic indeksinden itibaren eleman arar ve bulursa bunun indeksini dner, bulamazsa -1 dner.
• arr.lastIndexOf(eleman, baslangic) ayn, fakat bu sadan sola doru bakar.
• arr.includes(eleman, baslangic) eleman baslangctan balayarak elemanlar kontrol eder. Bulursa true dner.

rnein:

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

Bu metodlar eitlik kontrol iin === kullanr. Bundan dolay falsea bakacak olursanz 0 ile eit deildir. Sadece false ile eittir. Eer sadece dizi iinde var olup olmadn kontrol etmek istiyorsanz arr.includes tercih edilir.

find and findIndex

Objelerden oluma bir dizinin olduunu varsayn. Baz artlar salayan objeleri nasl bulursunuz.

Burada arr.find metodu yararl olur.

Yazm:

let result = arr.find(function(elaman, index, dizi) {
  //  eer aranan eleman bulunursa true dndrmeli.
});

Bu fonksiyon her eleman iin tekrar tekrar arlr.

• elaman eleman tanmlar.
• index indeksi tanmlar.
• array dizinin kendisidir.

Eer true dndrr ise arama durur ve elemann kendisi dner. Eer bulunamazsa undefined dndrlr.

rnein, kullanclarn bulunduu bir dizi ve her dizide id ve isim alanlar bulunsun. id == 1 olan eleman bulalm.

let kullanicilar = [
  {id: 1, isim: "Ahmet"},
  {id: 2, isim: "Muzaffer"},
  {id: 3, isim: "Emine"}
];

let kullanici = kullanicilar.find(eleman => eleman.id == 1);

alert(kullanici.isim); // Ahmet

Objelerin dizi ierisinde yer almas oka karlalan bir olaydr, bundan dolay find metodu ok kullanldr.

Dikkat ederseniz find metodunda sadece bir tane argman kullanlmtr item => item.id == 1. find metodunun dier parametreleri ok nadir olarak kullanlr.

arr.findIndex metodu da ayn find metodu gibi alr fakat elemann kendi yerine indexini dndrr.

filter

find metodu sadece fonksiyonu true yapan elemana bakar.

Birden fazlas iin ise arr.filter(fn) kullanlabilir.

Yazm neredeyse find ile ayndr, fakat tek bir eleman yerine kurala uyan elemanlar dizi halinde dner.

let results = arr.filter(function(eleman, index, dizi) {
  // eer elemanlar filtreye uygunsa true dndrr.
});

rnein:

let kullanicilar = [
  {id: 1, isim: "Ahmet"},
  {id: 2, isim: "Muzaffer"},
  {id: 3, isim: "Emine"}
];

// ilk iki kullaniciyi dndrr.
let baziKullanicilar = kullanicilar.filter(eleman => eleman.id < 3);

alert(baziKullanicilar.length); // 2

Dizi dnmleri

Bu blm dizinin dnmleri veya yeniden sralanmas hakkndadr.

map

arr.map metodu en fazla kullanlan ve kullanl olan metodlardandr.

Yazm:

let sonuc = arr.map(function(eleman, index, dizi) {
  // eleman yerine yeni deer dndrr.
})

Dizinin her eleman iin fonksiyonu altrr ve sonularn dizi olarak dner.

rnein elemanlarn uzunluklar ile ilgili bir deiiklik yaplabilir:

let uzunluklar = ["Bilbo", "Gandalf", "Nazgul"].map(eleman => eleman.length)
alert(uzunluklar); // 5,7,6

sort(fn)

arr.sort metodu diziyi olduu yerde sralar.

rnein:

let arr = [ 1, 2, 15 ];

// metod dizinin ieriini sralar ve dndrr.
arr.sort();

alert( arr );  // 1, 15, 2

ktsnda bir ey fark ettiniz mi?

Sralama 1, 15, 2 oldu. Yanl. Neden peki?

Diziler varsaylan olarak karakter sralamasna gre sralanrlar.

Tm elemanlar karakter dizisine evrilir ve karlatrlr. Bundan dolay karakter srasna gre "2" > "15" karlatrlr.

Kendi sralamanz yapmak iin, iki argmanl bir fonksiyonu arr.sort()'n argman olarak almas gerekmektedir.

Fonksiyon aadaki ekilde almaldr:

function compare(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

rnein:

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15

imdi beklendii gibi almakta.

Ne olduunu dnrsek. arr her eyi tutabilir, deil mi? Say, karakter veya html elementi vs. tutabilir. inde bulunanlar sralamak iin karlatrmay yapan sralama fonksiyonuna ihtiya vardr. Bunun da varsaylan karakter sralamadr.

arr.sort(fn) metodu iinde sralama algoritmasna sahiptir. Bu sralamann nasl altna dair bir bilgimiz olmasna gerek yok (ou zaman quicksort kullanlr). Diziyi dolanr ve elemanlar verilen algoritmaya gre karlatrr ve sralar. Tek bilmeniz gereken fn fonksiyonunun karlatrmay yaptdr.

Eer hangi elemann karlatrldn renmek istiyorsanz elbette bunu grebilirsiniz.

[1, -2, 15, 2, 0, 8].sort(function(a, b) {
  alert( a + " <> " + b );
});

Algoritma ayn eleman bir ka defa altrma ihtiyac duyabilir, fakat yine de olduunca az karlatrmaya alr.

let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15

arr.sort( (a, b) => a - b );

reverse

arr.reverse metodu arrin sralamasn terse evirir.

rnein:

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

Ayrca terse evirmesinden sonra arri dndrr.

split and join

Bunun uygulamasn gerek hayatta u ekilde grmek mmkndr. Bir mesajlama uygulamas yazdnz dnn. Gnderen kii alclar virglle ayrarak yazsn. rnein Ahmet, Mehmet, Muzaffer gibi. Fakat bizim iin bunun bir dizi olmas karakter dizisi olmasndan daha kullanldr. Peki bu nasl yaplmal?

str.split(delim) tam olarak bunu yapmaktadr. Karakterleri verilen delim e gre ayrr ve sonrasnda bunlar dizi olarak dner.

Aadaki rnekte isimler virgl ve ardndan boluk yazarak ayrlmtr.

let isimler = 'Bilbo, Gandalf, Nazgul';

let arr = isimler.split(', ');

for (let isim of arr) {
  alert( ` ${name}'e mesaj.` ); // Bilbo'e mesaj ve dierleri.
}

split metodu istee bal ikincil bir saysal argman alabilir dizinin boyutu. Eer bu verilirse, dizi bu verilen uzunluk kadar dolduktan sonra geri kalanlar grmezden gelinir. Pratikte ok nadir kullanlr.

let dizi = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

let str = "test";

alert( str.split('') ); // t,e,s,t

arr.join(str) split in tam tersini yapar. arrden karakter dizileri yaratr.

rnek:

let dizi = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = dizi.join(';');

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight

Dizi elemanlarnn zerinden geilmek istendiinde forEach kullanmak mmkndr.

arr.reduce ve arr.reduceRight metodlar da bu ie yarar fakat daha dall budakldr. Genelde dizilere gre tek bir karakter dizisini hesaplamaya yarar.

Yazm:

let value = arr.reduce(function(previousValue, item, index, arr) {
  // ...
}, initial);

Fonksiyon elemanlara uygulanr. kinciden itibaren benzer bir yazma rastlayabilirsiniz.

• item dizinin o anki eleman.
• index elemann pozisyonu.
• arr dizi.

imdiye kadar forEach/map gibi. Fakat bir argman daha var:

• previousValue bir nceki fonksiyonun sonucudur initial ilk arnn sonucudur.

rnekle anlatmak gerekirse:

Aada dizinin toplam bir satrda alnmaktadr:

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

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

Burada reduce fonksiyonunun en ok kullanlan 2 argmanl ekli kullanld.

Detaylarna baklacak olursa:

1. lk altrldnda sum balang deerini alr ( reduceun son argman ) 0, ve current dizinin ilk elemandr 1. Bundan dolay sonu 1 olur.
2. kinci dngde sum = 1, buna ikinci dizi eleman olan 2 eklenir ve dndrlr.
3. nc dngde ise sum = 3 ve buna bir sonraki dizi eleman eklenir ve byle devam eder.

Hesaplama ak:

[]

Form tablosunda bunu daha ak bir ekilde grebilirsiniz. Satrlar fonksiyon arlarn gstermektedir.

Grdnz gibi bir nceki fonksiyonun sonucu sonraki fonksiyonun argman olmakta.

Bunun ile birlikte balang deerini pas gemekte mmkn:

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

// balang deeri silindi, 0 deil.
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

Sonu ayn. Balang deeri olmadndan dolay, reduce fonksiyonu diznin ilk elemann balang deeri olarak almakta ve ikinciden itibaren dngye balamaktadr.

Hesaplama tablosu yukardaki ile ayn olmaktadr, sadece birinci satr silinir.

Fakat byle kullanmda ok dikkatli olunmaldr. Eer dizi bo ise, recude ars balang deeri olmadnda hata verir.

rnein:

let arr = [];

// Hata: Balang deeri olmayan bo dizi ile `reduce` fonksiyonu kullanld.
// Eer balang deeri olsayd, `reduce` bo diziyi dndrebilirdi.
arr.reduce((sum, current) => sum + current);

Bundan dolay her zaman balang deeri kullanlmas nerilir.

arr.reduceRight metodu da reduce metodu ile ayn ii yapar fakat diziyi sadan sola doru okur.

Tekrar: forEach

arr.forEach metodu her eleman iin bir fonksiyon altrmaya yarar.

Yazm:

arr.forEach(function(item, index, array) {
  // ... elemanla bir eyler yap
});

rnein aadaki kod dizinin her elemann gstermeye yarar:

// her eleman iin alert ar
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

Aadaki kod elemann dizideki pozisyonu hakknda daha aklaycdr:

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} ${array}'in ${index}. indeksinde`);
});

Eer fonksiyonun bir sonucu varsa bu grmezden gelinir.

Array.isArray

Diziler farkl bir tip deildir. Obje zerine kurulmulardr.

Bundan dolay typeof normal obje ile diziyi ayrt etmekte yardmc olamaz:

alert(typeof {}); // object
alert(typeof []); // ayns

Fakat diziler ok kullanldndan dolay buna has metod bulunmaktadr: Array.isArray(value) . Eer deer dizi ise true dndrr. Dier trl false dndrr.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

ou metod thisArg' destekler

Fonksiyonlar aran neredeyse tm dizi metodlar find, filter, map gibi sort hari, ayrca opsiyonel thisArg parametresini kabul eder.

Yukardaki blmde bu parametreden bahsedilmedi, bunun sebebi ok nadir olarak kullanlmasndan dolaydr. Fakat btnln salanmasndan dolay stnden gemekte fayda var.

Bu metodlarla thisArg'n yazm aadaki gibidir:

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg istee bal olarak kullanlan bir argmandr.

thisArg deeri func iin this olmaktadr.

rnein, aada objenin metodu filtre olarak kullanlmaktadr ve thisArg bu durumda olduka kullanldr:

let kullanici = {
  yas: 18,
  dahaGenc(digerKullanici) {
    return digerKullanici.yas < this.yas;
  }
};

let kullanicilar = [
  {yas: 12},
  {yas: 16},
  {yas: 32}
];

// kullancdan daha gen kullanclar bulunuz
let dahaGencKullanicilar = kullanicilar.filter(kullanici.dahaGenc, kullanici);

alert(dahaGencKullanicilar.length); // 2

Yukardaki arda kullanici.dahaGenc filtre olarak kullanlmaktadr. Ayrca kullanici bu fonksiyona gnderilmektedir. Eer kullanici.filter(kullanici.dahaGenc)'i vermezseniz, kullanici.dahaGenc this=undefined olarak arlr. Bu da annda hata verir.

zet

Dizi metodlarnn ksa aklamalar:

• Eleman ekleme/silme metodlar:

  • push(...items) elemanlar sona ekler,
  • pop() en sondaki eleman alr,
  • shift() balangtan eleman alr,
  • unshift(...items) balanga eleman ekler
  • splice(pos, deleteCount, ...items) pos indeksinde deleteCount says kadar eleman siler ve bunlar itemsa ekler.
  • slice(start, end) start ile end pozisyonlar arasndaki (end dahil deil) elemanlar yeni bir diziye kopyalar.
  • concat(...items) yeni bir dizi dndrr: var olan dizideki tm elemanlar kopyalar ve items ekler. Eer items dizi ise bunun elemanlar da alnr.

• Elemanlar aramaya ynelik metodlar:

  • indexOf/lastIndexOf(item, pos) postan balayarak item arar. Bulursa indeksini dndrr, bulamaz ise -1 dndrr.
  • includes(value) eer dizi valueya sahipse true dndrr. Dier trl false dndrr.
  • find/filter(func) Elemanlar fonksiyonlar ile filtreler. Buna gre fonksiyonu true yapan ilk veya tamamn dner.
  • findIndex ayn find gibidir fakat bir deer yerine index dner.

• Diziler zerinde dnmler:

  • map(func) her eleman iin func arlr ve bunlarn sonularndan bir dizi retilerek dndrlr.
  • sort(func) diziyi olduu yerde sralar ve dndrr.
  • reverse() diziyi terse evirir ve dndrr.
  • split/join karakterleri diziye evirir veya dizileri karaktere evirir.
  • reduce(func, initial) dizide bulunan elemanlar sra ile func fonksiyonu zerinden hesaplanr ve son deer dndrlr.

• Elemanlar zerinden dnme:

  • forEach(func) dizide bulunan her eleman iin func arlr. hibir ey dndrmez.

• Ek olarak:

  • Array.isArray(arr) arrin dizi olup olmadn kontrol eder.

Bu metodlarn iinden sadece sort, reverse ve splice dorudan dizinin kendisi zerinden ilem yapar. Dierleri deer dndrr.

Yukardaki metodlar projelerin oundaki kullanlan dizi fonksiyonlarnn %99unu kapsar. Fakat bunun yannda farkl metodlar da bulunmaktadr:

• arr.some(fn)/arr.every(fn) diziyi kontrol eder.

  Dizinin her eleman iin fn arlr. Mape ok benzer fakat herhangi biri/hepsi true ise true dndrr. Dier trl false dndrr.

• arr.fill(value, start, end) diziyi tekrar eden value deeri ile start ile index arasna doldurur.

• arr.copyWithin(target, start, end) start tan ende kadar olan elemanlar targettan itibaren var olanlarn zerine yazarak yaptrr.

Tm liste iin kullanm talimatlar sayfasna bakabilirsiniz.

Grnrde ok fazla metod varm gibi ve ezberlemesi zormu gibi grnse de aslnda grndnden ok daha kolaydr.

Sadece tanmlarn bulunduu sayfaya bakmanz yeterlid. Ardndan bu blmdeki rnekleri zerek pratik yaparsanz metodlar ile ilgili yeteri kadar bilgi sahibi olmu olursunuz.

Daha sonrasnda metodlar ile ilgili bir ey yapmak istediinizde, nasl yapldn bilmiyorsanz, buraya tekrar gelip doru metodu bulabilirsiniz. Buradaki rnekler doru bir ekilde yazmanza yardmc olacaktr. Sonrasnda metodlar hibir zel aba harcamadan hatrlayacak duruma gelebilirsiniz.