Eğer JavaScript ile çalışıyorsanız dizi değişkenler sizin en büyük yardımcılarınızdan biri olacaktır. Çoğu durumda array ile çalışırız. Bu nedenle array değişkenler için çok sayıda fonksiyon bulunmaktadır. Zaten array başlı başına bir nesnedir (object). Bu nedenle hem kendi metodları ve hemde bazı özellikleri (property) bulunmaktadır.
Bir Array Değişkenden Nasıl Eleman Çıkarırız?
Array değişkenden bir elemanı silmenin yollarından bazıları şunlardır:
- Array pop metodu ile dizinin en sonundaki elemanı diziden sileriz.
- Array shift metodu ile dizinin en başındaki elemanı diziden sileriz.
- Array splice metodu ile belirtilen indexte bulunan elemanı(elemanları) diziden sileriz.
- Array slice metodu ile ihtiyacımız olmayan dizi elemanlarını sileriz ve geriye ihtiyacımız olanları döndeririz..
- Array filter metodu ile kendi ihtiyacımıza istediğimiz elemanları diziden sileriz.
Şimdi bu metodları sırası ile daha kapsamlı olarak inceleyelim.
JavaScript Array Pop Metodu
Array pop metodu elimizdeki dizinin son elemanını diziden çıkarır ve bize geri dönderir. Söz dizimi:
const cikanEleman = dizi.pop();
şeklindedir. Elimizdeki dizinin son elemanını diziden silmek istediğimizde kullanabileceğimiz bir metoddur. Eğer silinecek eleman kullanacaksak onu bir değişkene atayabiliriz. Şimdi bunu örnekler ile pekiştirelim.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
// Ali sınıftan ayrıldı. Listeden çıkaralım.
const ayrilanOgrenci = ogrenciler.pop();
console.log('Ayrılan Öğrenci: ', sonOgrenci);
// Ekrana "Ayrılan Öğrenci: Ali" yazıdır.
console.log('Sınıftaki Öğrenciler: ', ogrenciler);
// Ekrana "['Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice']" yazdırır.
// Hatice sınıftan ayrıldı
ayrilanOgrenci = ogrenciler.pop();
console.log('Ayrılan Öğrenci: ', sonOgrenci);
// Ekrana "Ayrılan Öğrenci: Hatice" yazıdır.
console.log('Sınıftaki Öğrenciler: ', ogrenciler);
// Ekrana "['Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye']" yazdırır.
Örneklerde gördüğümüz gibi eğer array değişkenin son elemanını diziden çıkaracaksak pop metodunu tercih edebiliriz.
JavaScript Array Shift Metodu
Dizimiz üzerinde işlem yaparken eğer dizinin ilk elemanını diziden çıkarmak istiyorsak shift metodu tam aradığımız işlemi yapacaktır. Kullanımı oldukça basittir.
const cikanEleman = dizi.shift();
Bu işlem ile dizinin ilk elemanı diziden çıkarılır ve geri dönderilir. Böylelikle eğer bu eleman ile işlem yapılacaksa bir değişkene atanarak kullanılabilir.
Şimdi senaryomuzu öğrencilerin ilk öğrenciden başlayarak sınıftan çıkacağını varsayarak oluşturalım.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
// Hasan sınıftan ayrıldı
const ayrilanOgrenci = ogrenciler.shift();
console.log('Ayrılan Öğrenci: ', ayrilanOgrenci);
// Ekrana "Ayrılan Öğrenci: Hasan" şeklinde basılır
console.log('Sınıftaki Öğrenciler: ', ogrenciler);
// Ekrana "Sınıftaki Öğrenciler: ['Ahmet', 'Dursun', 'Ayşe', 'Remziye','Hatice', 'Ali']" şeklinde basılır.
// Ahmet sınıftan ayrıldı
const ayrilanOgrenci = ogrenciler.shift();
console.log('Ayrılan Öğrenci: ', ayrilanOgrenci);
// Ekrana "Ayrılan Öğrenci: Ahmet" şeklinde basılır
console.log('Sınıftaki Öğrenciler: ', ogrenciler);
// Ekrana "Sınıftaki Öğrenciler: ['Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali']" şeklinde basılır.
JavaScript Array Splice Metodu
Splice metodu array nesnesi ile gelen bir metoddur. Dizi içerisindeki elemanları değiştirmek için kullanılır. Dizi içerisine bulunan elamanları silmek, değiştirmek veya diziye yeni eleman eklemek için kullanılabilir. Splice metodu ile diziden eleman çıkartmak için eleman indeksini kullanıyoruz. Şimdi dizinin ilk elemanını diziden splice metodu ile çıkaralım. Dizinin ilk elemanının indeksi 0 olduğundan işlemi yaparken indeks olarak 0 kullanıyoruz.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
// Hasan sınıftan ayrıldı
const ayrilanOgrenci = ogrenciler.splice(0, 1);
console.log('Ayrılan Öğrenci: ', ayrilanOgrenci);
// Ekrana "Ayrılan Öğrenci: Hasan" şeklinde basılır
console.log('Sınıftaki Öğrenciler: ', ogrenciler);
// Ekrana "Sınıftaki Öğrenciler: ['Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali']" şeklinde basılır.
ogrenciler.splice(0, 1) şeklinde kullanımın anlamı, ogrenciler dizisinde 0 indexine sahip elemandan başlayarak 1 elaman sil demektir. Yani 0 indexinde sahip elemanı sil ve sonra geri dönder. Bu nedenle öğrenciler dizisinde bulunan ilk öğrenci olan “Hasan” diziden silindi ve geriye dönderildi. Biz 1 öğrenci yerine 2 öğrenci silmek isteseydik:
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
const cikanOgrenciler = ogrenciler.splice(0, 2);
Şeklinde bir işlem yapacaktık. Bu sefer dizinin 0 indeksine sahip elemanından başlayarak 2 eleman diziden silinecek ve bize geri dönderilecektir.
İşlem sonucunda cikanOgrenciler değişkenini logladığımızda,
console.log(cikanOgrenciler)
// ["Hasan", "Ahmet"] şeklinde bir çıktı alacağız.
Peki biz işlemi “Dursun” adlı öğrenciden başlayarak 2 öğrenci çıkartmak istersek, yani Dursun ve Ayşe isimli öğrencileri diziden çıkarmak istersek ne yapacağız? Yine aynı işlemi yapabiliriz. Dursun isimli öğrenciye ait elaman dizi içerisinde 2 indeksine sahip. O zaman yapacağımız işlem,
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
const cikanOgrenciler = ogrenciler.splice(2,2);
Şeklinde olacaktır. Yani 2 nolu indekse git ve oradan başlayarak 2 eleman çıkart. Böylece 2 indeksindeki elemanı ve sonraki 3 indeksindeki elemanı diziden çıkarıp geri dönderiyoruz.
console.log(cikanOgrenciler);
// ekrana ["Dursun","Ayşe"] yazdıracaktır.
JavaScript array splice metodunu kullanırken unutmamamız gereken bir durum işlemin dizi üzerinde yapıldığı ve işlem sonucu dizinin değişeceğidir. Bu nedenle eğer bize dizinin ilk hali gerekli ise yap onu farklı bir diziye kopyalamamız veya farklı bir yöntem ile işlem yapmamız gerekecektir.
JavaScript Array Slice Metodu İle Diziden Eleman Silme
Diziler üzerinde işlem yaparken kullandığımız bir array metoduda slice metodudur. Bu metod adından anlaşılacağı gibi dizinin bir bölümünü geri dönderir. Splice metodundan farklı asıl dizi üzerinde işlem yapılmaz. Dizi üzerinden bir bölüm alınacaksa o bölüm geri dönderilir. Dizi aynı şekilde kalır. Yine kullandığımız örneğe dönecek olursak. ogrenciler dizisinin ilk 2 elemanını almak istersek.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
const cikanOgrenciler = ogrenciler.slice(0, 2);
console.log("Çıkan Öğrenciler: ", cikanOgrenciler);
// Ekrana ['Hasan','Ahmet'] bilgisi basılacaktır
console.log("Öğrenciler: ", ogrenciler);
// Ekrana ['Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'] bilgisi basılacaktır
Görüldüğü gibi sadece dizinin ilk 2 elemanı alınmış fakat asıl dizi olduğu gibi kalmıştır.
JavaScript array splice metodu gibi slice metoduda 2 parametre alır, ilk parametre işlemin başlayacağı elemanın indeksi, ikinci parametre ise kaç adet elemanın alınacağını belirtir.
JavaScript Array Filter Metodu İle Diziden Eleman Çıkarma
Bir arraydan eleman çıkarırken daha gelişmiş bir yöntem kullanmak istedediğimizde array filter metodunu kullanabiliriz. Array filter metodu özelleştirilmiş filtreleme yaparak istediğimizde yardımıza koşuyor. İstediğimiz şekilde bir filtreleme yaparak sonuçları geri dönderebiliriz.
Mesela a ile başlayan öğrencileri diziden çıkarmak istediğimizi varsayalım.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
const cikanOgrenciler = ogrenciler.filter(ogrenci => ogrenci[0].toLowerCase() === "a");
console.log("Çıkan Öğrenciler: ", cikanOgrenciler);
// Ekrana
// "Çıkan Öğrenciler: ['Ahmet', 'Ayşe', 'Ali']"
// şeklinde bir bilgi basar
console.log("Öğrenciler: ", ogrenciler);
// Ekrana Öğrenciler: ['Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali']
// şeklinde bir bilgi basar
Biz burada baş harfi a olan öğrencileri filtreleyerek aldık. Bunun için önce dizinin tüm elemanlarını tek tek aldık, ilk harflerini küçük a olarak değiştirdik ve a harfine eşit olup olmadığına baktık.
ogrenci[0].toLowerCase() === "a"
Eğer sonuç true ise filter metodu bu elemanı geri dönderecektir. Eğer sonuç false ise filter metodu bu elemanı eleyecektir. Sonuçta istediğimiz özelliklerdeki elemanları geri döndererek işlem yapabiliriz. Bu şekilde bir kullanımda dizinin kendisi üzerinde işlem yapmıyoruz.
Ek Olarak Dizi Boyutunu Azaltarak Diziden Eleman Çıkarmak
JavaScript array nesneleri ile uğraşırken, nesnenin length elemanı dizinin boyutunu tutar.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'
];
console.log("Dizinin Boyutu: ", ogrenciler.length);
// Ekrana Dizini Boyutu: 7 olarak basılır.
JavaScript bize dizinin boyutunu değiştirme seçeneği sunuyor. Bunu hemen length değişkenine değer atayarak yapabiliriz. length değişkenine kendimiz atama yaptığımızda, eğer dizinin eleman sayısından daha az bir değer verirsek, eksik verdiğimiz değer kadar dizinin son elemanları diziden silinecektir.
Mesela biz öğrenciler dizisinin son 2 elemanını silmek istersek basitçe
ogrenciler.length = ogrenciler.length - 2;
şeklinde bir işlem yapmamız yeterli olacaktır. Artık dizinin son 2 elemanı olan [‘Hatice’, ‘Ali’] ogrenciler dizisinden silinecektir.
const ogrenciler = [
'Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye', 'Hatice', 'Ali'];
ogrenciler.length = ogrenciler.length - 2;
console.log(ogrenciler);
// Ekrana ['Hasan', 'Ahmet', 'Dursun', 'Ayşe', 'Remziye'] bilgisi basılacaktır
JavaScript Array Nesnelerinden Eleman Çıkarmak JavaScript esnek yapısı ile bize farklı şekillerde dizilerden eleman çıkarma yöntemi sunuyor. Bunlardan incelediklerimiz pop, shift, splice, slice ve filter metodları ve ayrıca dizinin boyutunu değiştirerek son elemanları silme yöntemlerini inceledik. Sizlerde bu yöntemler üzerinde çalışarak istediğiniz işlemleri kolaylıkla yapabilirsiniz.
Eğer sormak istediğiniz bir soru var ise veya eklemek istediğiniz konular varsa yorum olarak ekleyebilirsiniz.