GeezerVison

Diziler birçok metod sunarlar. İşleri daha kolaylaştırmak için bu bölüm ikiye ayrılacaktır.

Elaman silme/ekleme

Eleman eklemenin ve silmenin baştan ve sondan nasıl olacağını gördünüz:

• arr.push(...items) – elemanları sona ekler,
• arr.pop() – sondaki elemanı çıkarır.
• arr.shift() – başlangıçtan eleman çıkarır.
• arr.unshift(...items) – başlangıça eleman ekler.

Diğer birkaç metod ise aşağıdaki gibidir.

splice

Diziden eleman nasıl silinir?

Diziler de obje olduklarından 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 rağmen, dizi hala 3 elemana sahip. Bunu arr.length == 3 kontrolünü yaparak görebilirsiniz.

Olması gereken de bu, çünkü delete obj.key değeri anahtara göre siler. Sadece bu işi yapar. Bu da objeler için yeterlidir. Fakat diziler için genelde istediğimiz elamanların birbirlerinin yerleri doldurmasıdır. Bundan dolayı dizinin kısaldığını görmemiz lazım.

Bundan dolayı özel metodlar kullanılmalıdır.

arr.splice(str) metodu isviçre çakısı gibi her işe yarar. Diziye yeni bir eleman ekleyebilir ve silebilir.

Yazımı:

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

index’ten başlar ve deleteCountkadar elemanı siler ve sonra elem1, ..., elemN şeklinde yerlerine yerleştirir. Diziden silinen elemanları dönderir.

Bu metodu örnek ile anlamak çok daha kolaydır.

Silme işlemi ile başlayalım:

let arr = ["Ben", "JavaScript", "çalışıyorum"];

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

alert( arr ); // ["Ben", "çalışıyorum"]

Kolay değil mi? 1. indeksten başlayarak 1 eleman sildi.

Bir sonraki örnekte ise 4 eleman silinecek ve yeni bir eleman bunların yerine konulacak.

let arr = ["Ben", "şu", "an", "JavaScript", "çalışıyorum"];

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

alert( arr ) // Şimdi [Ders çalışıyorum]

Burada splice in silinen elemanları döndürdüğü görülebilir.

let arr = ["Ben", "şu", "an", "JavaScript", "çalışıyorum"];

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

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

splice metodu ayrıca hiçbir şey silmeden de ekleme yapabilir. Bunun için deleteCount’u 0 yapmanız gerekmektedir:

let arr = ["Ben", "JavaScript", "çalışıyorum"];

// 1. indeksten
// 0 tane sil
// Sonrasında "karmaşık" ekle
arr.splice(1, 0,  "karmaşık");

alert( arr ); // "Ben", "karmaşık", "JavaScript", "çalışıyorum"

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.splice’a göre daha basittir.

Yazımı:

arr.slice(start, end)

Yeni bir dizi döndürür. Bu dizi içerisinde "start" ile "end" arasında ( "end" dahil olmadan ) tüm elemanları kopyalar. start ve end negatif olabilir. Negatif durumlarda dizi sondan değer başlar.

str.slice gibi çalışır fakat karakter dizisi(string) yapmak yerine alt-dizi yapar.

Örneğin:

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 diğer dizileri veya elemanları birbirine eklemeye yarar.

Yazımı:

arr.concat(arg1, arg2...)

İstenildiği kadar argümanı kabul eder, bunlar dizi veya değer olabilir.

Sonuç arr, ardından arg1, arg2 şeklinde tüm dizileri ve değerleri içeren bir dizi olur.

Eğer bir argüman dizi ve Symbol.isConcatSpreadable özelliğine sahip ise bunun tüm alt elemanları kopyalanır. Diğer türlü argümanın sadece kendisi kopyalanır.

Örneğin:

let arr = [1, 2];

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

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

// diziyi [3,4] ile birleştir ve ardından 5, 6 ekle
alert( arr.concat([3, 4], 5, 6)); // 1,2,3,4,5,6

Normalde, dizide bulunan elemanları kopyalar. Diğer objeler dizi olsalar bile bir bütün 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 özelliğine sahipse, bunların elemanları eklenir:

let arr = [1, 2];

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

alert( arr.concat(arrayLike) ); // 1,2,başka,bir şey

Dizide arama

Dizi içerisinde aramak için bazı metodlar bulunmaktadır.

indexOf/lastIndexOf ve includes

arr.indexOf, arr.lastIndexOf ve arr.includes aynı yazıma sahiptirler, ve aslında hepsi aynı işi yapar. Sadece karakterler yerine elemanlar üzerinde çalışırlar.

• arr.indexOf(eleman, balangic) baslangic indeksinden itibaren eleman’ı arar ve bulursa bunun indeksini döner, bulamazsa -1 döner.
• arr.lastIndexOf(eleman, baslangic) – aynı, fakat bu sağdan sola doğru bakar.
• arr.includes(eleman, baslangic) – eleman baslangıc’tan başlayarak elemanları kontrol eder. Bulursa true döner.

Örneğin:

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 eşitlik kontrolü için === kullanır. Bundan dolayı false’a bakacak olursanız 0 ile eşit değildir. Sadece false ile eşittir. Eğer sadece dizi içinde var olup olmadığını kontrol etmek istiyorsanız arr.includes tercih edilir.

find and findIndex

Objelerden oluşma bir dizinin olduğunu varsayın. Bazı şartları sağlayan objeleri nasıl bulursunuz.

Burada arr.find metodu yararlı olur.

Yazımı:

let result = arr.find(function(elaman, index, dizi) {
  //  eğer aranan eleman bulunursa true döndürmeli.
});

Bu fonksiyon her eleman için tekrar tekrar çağırılır.

• elaman eleman’ı tanımlar.
• index indeks’i tanımlar.
• array dizinin kendisidir.

Eğer true döndürür ise arama durur ve eleman’ın kendisi döner. Eğer bulunamazsa undefined döndürülür.

Örneğin, kullanıcıların bulunduğu bir dizi ve her dizide id ve isim alanları bulunsun. id == 1 olan elemanı bulalım.

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 içerisinde yer alması çokça karşılaşılan bir olaydır, bundan dolayı find metodu çok kullanışlıdır.

Dikkat ederseniz find metodunda sadece bir tane argüman kullanılmıştır item => item.id == 1. find metodunun diğer parametreleri çok nadir olarak kullanılır.

arr.findIndex metodu da aynı find metodu gibi çalışır fakat elemanın kendi yerine index’ini döndürür.

filter

find metodu sadece fonksiyonu true yapan elemana bakar.

Birden fazlası için ise arr.filter(fn) kullanılabilir.

Yazımı neredeyse find ile aynıdır, fakat tek bir eleman yerine kurala uyan elemanları dizi halinde döner.

let results = arr.filter(function(eleman, index, dizi) {
  // eğer elemanlar filtreye uygunsa true döndürür.
});

Örneğin:

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

// ilk iki kullaniciyi döndürür.
let baziKullanicilar = kullanicilar.filter(eleman => eleman.id < 3);

alert(baziKullanicilar.length); // 2

Dizi dönüşümleri

Bu bölüm dizinin dönüşümleri veya yeniden sıralanması hakkındadır.

map

arr.map metodu en fazla kullanılan ve kullanışlı olan metodlardandır.

Yazımı:

let sonuc = arr.map(function(eleman, index, dizi) {
  // eleman yerine yeni değer döndürür.
})

Dizinin her elemanı için fonksiyonu çalıştırır ve sonuçlarını dizi olarak döner.

Örneğin elemanların uzunlukları ile ilgili bir değişiklik yapılabilir:

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

sort(fn)

arr.sort metodu diziyi olduğu yerde sıralar.

Örneğin:

let arr = [ 1, 2, 15 ];

// metod dizinin içeriğini sıralar ve döndürür.
arr.sort();

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

Çıktısında bir şey fark ettiniz mi?

Sıralama 1, 15, 2 oldu. Yanlış. Neden peki?

Diziler varsayılan olarak karakter sıralamasına göre sıralanırlar.

Tüm elemanlar karakter dizisine çevrilir ve karşılaştırılır. Bundan dolayı karakter sırasına göre "2" > "15" karşılaştırılır.

Kendi sıralamanızı yapmak için, iki argümanlı bir fonksiyonu arr.sort()'ın argüman olarak alması gerekmektedir.

Fonksiyon aşağıdaki şekilde çalışmalıdır:

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

Örneğin:

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 beklendiği gibi çalışmakta.

Ne olduğunu düşünürsek. arr her şeyi tutabilir, değil mi? Sayı, karakter veya html elementi vs. tutabilir. İçinde bulunanları sıralamak için karşılaştırmayı yapan sıralama fonksiyonuna ihtiyaç vardır. Bunun da varsayılanı karakter sıralamadır.

arr.sort(fn) metodu içinde sıralama algoritmasına sahiptir. Bu sıralamanın nasıl çalıştığına dair bir bilgimiz olmasına gerek yok (Çoğu zaman quicksort kullanılır). Diziyi dolanır ve elemanları verilen algoritmaya göre karşılaştırır ve sıralar. Tek bilmeniz gereken fn fonksiyonunun karşılaştırmayı yaptığıdır.

Eğer hangi elemanın karşılaştırıldığını öğrenmek istiyorsanız elbette bunu görebilirsiniz.

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

Algoritma aynı elemanı bir kaç defa çalıştırma ihtiyacı duyabilir, fakat yine de olduğunca az karşılaştırmaya çalışır.

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 arr’in sıralamasını terse çevirir.

Örneğin:

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

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

Ayrıca terse çevirmesinden sonra arr’i döndürür.

split and join

Bunun uygulamasını gerçek hayatta şu şekilde görmek mümkndür. Bir mesajlaşma uygulaması yazıdğınızı düşünün. Gönderen kişi alıcıları virgülle ayırarak yazsın. Örneğin Ahmet, Mehmet, Muzaffer gibi. Fakat bizim için bunun bir dizi olması karakter dizisi olmasından daha kullanışlıdır. Peki bu nasıl yapılmalı?

str.split(delim) tam olarak bunu yapmaktadır. Karakterleri verilen delim e göre ayırır ve sonrasında bunları dizi olarak döner.

Aşağıdaki örnekte isimler virgül ve ardından boşluk yazarak ayrılmıştır.

let isimler = 'Bilbo, Gandalf, Nazgul';

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

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

split metodu isteğe bağlı ikincil bir sayısal argüman alabilir – dizinin boyutu. Eğer bu verilirse, dizi bu verilen uzunluk kadar dolduktan sonra geri kalanlar görmezden gelinir. Pratikte çok nadir kullanılır.

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. arr’den karakter dizileri yaratır.

Örnek:

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

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

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

reduce/reduceRight

Dizi elemanlarının üzerinden geçilmek istendiğinde forEach kullanmak mümkündür.

arr.reduce ve arr.reduceRight metodları da bu işe yarar fakat daha dallı budaklıdır. Genelde dizilere göre tek bir karakter dizisini hesaplamaya yarar.

Yazımı:

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

Fonksiyon elemanlara uygulanır. İkinciden itibaren benzer bir yazıma rastlayabilirsiniz.

• item – dizinin o anki elemanı.
• index – elemanın pozisyonu.
• arr – dizi.

Şimdiye kadar forEach/map gibi. Fakat bir argüman daha var:

• previousValue bir önceki fonksiyonun sonucudur initial ilk çağrının sonucudur.

Örnekle anlatmak gerekirse:

Aşağıda dizinin toplamı bir satırda alınmaktadır:

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

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

alert(result); // 15

Burada reduce fonksiyonunun en çok kullanılan 2 argümanlı şekli kullanıldı.

Detaylarına bakılacak olursa:

1. İlk çalıştırıldığında sum başlangıç değerini alır ( reduce’un son argümanı ) 0, ve current dizinin ilk elemanıdır 1. Bundan dolayı sonuç 1 olur.
2. İkinci döngüde sum = 1, buna ikinci dizi elemanı olan 2 eklenir ve döndürülür.
3. Üçüncü döngüde ise sum = 3 ve buna bir sonraki dizi elemanı eklenir ve böyle devam eder.

Hesaplama akışı:

Form tablosunda bunu daha açık bir şekilde görebilirsiniz. Satırlar fonksiyon çağrılarını göstermektedir.

Gördüğünüz gibi bir önceki fonksiyonun sonucu sonraki fonksiyonun argümanı olmakta.

Bunun ile birlikte başlangıç değerini pas geçmekte mümkün:

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

// başlangıç değeri silindi, 0 değil.
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

Sonuç aynı. Başlangıç değeri olmadığından dolayı, reduce fonksiyonu diznin ilk elemanını başlangıç değeri olarak almakta ve ikinciden itibaren döngüye başlamaktadır.

Hesaplama tablosu yukarıdaki ile aynı olmaktadır, sadece birinci satır silinir.

Fakat böyle kullanımda çok dikkatli olunmalıdır. Eğer dizi boş ise, recude çağrısı başlangıç değeri olmadığında hata verir.

Örneğin:

let arr = [];

// Hata: Başlangıç değeri olmayan boş dizi ile `reduce` fonksiyonu kullanıldı.
// Eğer başlangıç değeri olsaydı, `reduce` boş diziyi döndürebilirdi.
arr.reduce((sum, current) => sum + current);

Bundan dolayı her zaman başlangıç değeri kullanılması önerilir.

arr.reduceRight metodu da reduce metodu ile aynı işi yapar fakat diziyi sağdan sola doğru okur.

Tekrar: forEach

arr.forEach metodu her eleman için bir fonksiyon çalıştırmaya yarar.

Yazımı:

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

Örneğin aşağıdaki kod dizinin her elemanını göstermeye yarar:

// her eleman için alert çağır
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

Aşağıdaki kod elemanın dizideki pozisyonu hakkında daha açıklayıcıdır:

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

Eğer fonksiyonun bir sonucu varsa bu görmezden gelinir.

Array.isArray

Diziler farklı bir tip değildir. Obje üzerine kurulmuşlardır.

Bundan dolayı typeof normal obje ile diziyi ayırt etmekte yardımcı olamaz:

alert(typeof {}); // object
alert(typeof []); // aynısı

… Fakat diziler çok kullanıldığından dolayı buna has metod bulunmaktadır: Array.isArray(value) . Eğer değer dizi ise true döndürür. Diğer türlü false döndürür.

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

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

Çoğu metod “thisArg”'ı destekler

Fonksiyonları çağıran neredeyse tüm dizi metodları – find, filter, map gibi sort hariç, ayrıca opsiyonel thisArg parametresini kabul eder.

Yukarıdaki bölümde bu parametreden bahsedilmedi, bunun sebebi çok nadir olarak kullanılmasından dolayıdır. Fakat bütünlüğün sağlanmasından dolayı üstünden geçmekte fayda var.

Bu metodlarla “thisArg”'ın yazımı aşağıdaki gibidir:

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg isteğe bağlı olarak kullanılan bir argümandır.

thisArg değeri func için this olmaktadır.

Örneğin, aşağıda objenin metodu filtre olarak kullanılmaktadır ve thisArg bu durumda oldukça kullanışlıdır:

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

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

// kullanıcıdan daha genç kullanıcıları bulunuz
let dahaGencKullanicilar = kullanicilar.filter(kullanici.dahaGenc, kullanici);

alert(dahaGencKullanicilar.length); // 2

Yukarıdaki çağrıda kullanici.dahaGenc filtre olarak kullanılmaktadır. Ayrıca kullanici bu fonksiyona gönderilmektedir. Eğer kullanici.filter(kullanici.dahaGenc)'i vermezseniz, kullanici.dahaGenc this=undefined olarak çağrılır. Bu da anında hata verir.

Özet

Dizi metodlarının kısa açıklamaları:

• Eleman ekleme/silme metodları:

  • push(...items) – elemanları sona ekler,
  • pop() – en sondaki elemanı alır,
  • shift() – başlangıçtan eleman alır,
  • unshift(...items) – başlangıça eleman ekler
  • splice(pos, deleteCount, ...items) – pos indeksinde deleteCount sayısı kadar elemanı siler ve bunları items’a ekler.
  • slice(start, end) – start ile end pozisyonları arasındaki (end dahil değil) elemanları yeni bir diziye kopyalar.
  • concat(...items) – yeni bir dizi döndürür: var olan dizideki tüm elemanları kopyalar ve items’ı ekler. Eğer items dizi ise bunun elemanları da alınır.

• Elemanları aramaya yönelik metodlar:

  • indexOf/lastIndexOf(item, pos) – pos’tan başlayarak item’ı arar. Bulursa indeksini döndürür, bulamaz ise -1 döndürür.
  • includes(value) – eğer dizi value’ya sahipse true döndürür. Diğer türlü false döndürür.
  • find/filter(func) – Elemanları fonksiyonlar ile filtreler. Buna göre fonksiyonu true yapan ilk veya tamamını döner.
  • findIndex aynı find gibidir fakat bir değer yerine index döner.

• Diziler üzerinde dönüşümler:

  • map(func) – her eleman için func çağrılır ve bunların sonuçlarından bir dizi üretilerek döndürülür.
  • sort(func) – diziyi olduğu yerde sıralar ve döndürür.
  • reverse() – diziyi terse çevirir ve döndürür.
  • split/join – karakterleri diziye çevirir veya dizileri karaktere çevirir.
  • reduce(func, initial) – dizide bulunan elemanlar sıra ile func fonksiyonu üzerinden hesaplanır ve son değer döndürülür.

• Elemanlar üzerinden dönme:

  • forEach(func) – dizide bulunan her eleman için func çağrılır. hiçbir şey döndürmez.

• Ek olarak:

  • Array.isArray(arr) arr’in dizi olup olmadığını kontrol eder.

Bu metodların içinden sadece sort, reverse ve splice doğrudan dizinin kendisi üzerinden işlem yapar. Diğerleri değer döndürür.

Yukarıdaki metodlar projelerin çoğundaki kullanılan dizi fonksiyonlarının %99’unu kapsar. Fakat bunun yanında farklı metodlar da bulunmaktadır:

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

  Dizinin her elemanı için fn çağırılır. Map’e çok benzer fakat herhangi biri/hepsi true ise true döndürür. Diğer türlü false döndürür.

• arr.fill(value, start, end) – diziyi tekrar eden value değeri ile start ile index arasına doldurur.

• arr.copyWithin(target, start, end) – start tan end’e kadar olan elemanları target’tan itibaren var olanların üzerine yazarak yapıştırır.

Tüm liste için kullanım talimatları sayfasına bakabilirsiniz.

Görünürde çok fazla metod varmış gibi ve ezberlemesi zormuş gibi görünse de aslında göründüğünden çok daha kolaydır.

Sadece tanımların bulunduğu sayfaya bakmanız yeterlid. Ardından bu bölümdeki örnekleri çözerek pratik yaparsanız metodlar ile ilgili yeteri kadar bilgi sahibi olmuş olursunuz.

Daha sonrasında metodlar ile ilgili bir şey yapmak istediğinizde, nasıl yapıldığını bilmiyorsanız, buraya tekrar gelip doğru metodu bulabilirsiniz. Buradaki örnekler doğru bir şekilde yazmanıza yardımcı olacaktır. Sonrasında metodları hiçbir özel çaba harcamadan hatırlayacak duruma gelebilirsiniz.