Bu yazımda JavaScript dizi metodları nelerdir? Nasıl kullanılır uygulamalı olarak anlatacağım.
Şimdi sırasıyla aşağıdaki dizi metodlarını inceleyelim.
- toString() Metodu
- join() Metodu
- pop() Metodu
- push() Metodu
- length Özelliği
- shift() Metodu
- unshift() Metodu
- concat() Metodu
- slice() Metodu
- splice() Metodu
1 – toString Metodu
toString metodu bir diziyi string’e dönüştürür. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.toString()); </script> |
Çıktısı : Toyota,Volvo,BMW
2 – join Metodu
join metodu da toString metodu gibi bir diziyi string’e dönüştürür. Tek farkı join metodunu kullanırken ek olarak ayırıcıyı da belirtebiliriz.
İlk olarak herhangi bir ayırıcı belirtmeden kullanalım.
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.join()); </script> |
Çıktısı : Toyota,Volvo,BMW
Şimdi de ayırıcı olarak “?” kullanalım.
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.join("?")); </script> |
Çıktısı : Toyota?Volvo?BMW
3 – pop Metodu
pop metodu ile bir dizinin son elemanını kaldırabiliriz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; arabalar.pop(); console.log(arabalar); </script> |
Çıktısı : [“Toyota”, “Volvo”]
arabalar.pop() değer olarak dizinin son elemanını içerir. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.pop()); </script> |
Çıktısı : BMW
Gördüğünüz gibi console ekranına BMW değeri yazıldı.
4 – push Metodu
push metodu dizinin sonuna yeni bir eleman eklemek için kullanılır. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; arabalar.push("Ford"); console.log(arabalar); </script> |
Çıktısı : [“Toyota”, “Volvo”, “BMW”, “Ford”]
arabalar.push(“Ford”) dizide bulunan eleman sayısını yani dizinin uzunluğunu geriye döndürür. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.push("Ford")); </script> |
Çıktısı : 4
Gördüğünüz gibi “Ford” elemanı diziye eklendikten sonra toplam 4 eleman olduğu için console ekranına 4 değeri yazıldı.
⇒ length özelliğini kullanarak da bir dizinin sonuna yeni eleman ekleyebiliriz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; arabalar[arabalar.length] = "Ford"; console.log(arabalar); </script> |
Çıktısı : [“Toyota”, “Volvo”, “BMW”, “Ford”]
Gördüğünüz gibi yine aynı çıktıyı alıyoruz.
5 – length Özelliği
length özelliği bir dizinin eleman sayısını döndürür. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; console.log(arabalar.length); </script> |
Çıktısı : 5
Bir dizinin son elemanına erişmek için length özelliğini kullanabiliriz. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; console.log(arabalar[arabalar.length - 1]); </script> |
Çıktısı : Audi
6 – shift Metodu
shift metodu ile dizinin ilk elemanını kaldırabiliriz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; arabalar.shift(); console.log(arabalar); </script> |
Çıktısı : [“Volvo”, “BMW”]
arabalar.shift() değer olarak dizinin ilk elemanını içerir. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.shift()); </script> |
Çıktısı : Toyota
Gördüğünüz gibi console ekranına Toyota değeri yazıldı.
7 – unshift Metodu
unshift metodu dizinin başına yeni bir eleman eklemek için kullanılır. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; arabalar.unshift("Ford"); console.log(arabalar); </script> |
Çıktısı : [“Ford”, “Toyota”, “Volvo”, “BMW”]
arabalar.unshift(“Ford”) dizide bulunan eleman sayısını yani dizinin uzunluğunu geriye döndürür. Örneğin;
|
1 2 3 4 5 6 7 8 9 |
<script> var arabalar = ["Toyota","Volvo","BMW"]; console.log(arabalar.unshift("Ford")); </script> |
Çıktısı : 4
Gördüğünüz gibi “Ford” elemanı diziye eklendikten sonra toplam 4 eleman olduğu için console ekranına 4 değeri yazıldı.
8 – concat Metodu
concat metodu ile dizileri birleştirerek yeni diziler oluşturabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var harfler = ["A","B","C","D"]; var sayilar = [1, 2, 3, 4, 5]; console.log(harfler.concat(sayilar)); </script> |
Çıktısı : [“A”, “B”, “C”, “D”, 1, 2, 3, 4, 5]
2’den fazla diziyi aşağıdaki gibi birleştirebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var harfler = ["A","B","C","D"]; var sayilar = [1, 2, 3, 4, 5]; var karakterler = [".", "?", "*", "-"]; console.log(harfler.concat(sayilar, karakterler)); </script> |
Çıktısı : [“A”, “B”, “C”, “D”, 1, 2, 3, 4, 5, “.”, “?”, “*”, “-“]
Dizinin içeriğini direkt olarak concat metodu içerisinde de yazabiliriz.
|
1 2 3 4 5 6 7 8 9 |
<script> var harfler = ["A","B","C","D"]; console.log(harfler.concat([1, 2, 3, 4, 5])); </script> |
Çıktısı : [“A”, “B”, “C”, “D”, 1, 2, 3, 4, 5]
9 – slice Metodu
slice Metodu ile dizilerde istediğimiz indeksler arasını kesebiliriz.
slice metodu 2 parametre alır. Birinci parametre başlangıç indeksi (dahil), ikinci parametre ise bitiş indeksi (hariç).
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var harfler = ["A","B","C","D","E","F"]; var yeniDizi = harfler.slice(2,5); console.log(yeniDizi); </script> |
Çıktısı : [“C”, “D”, “E”]
Gördüğünüz gibi 2. indeks olan “C” (dahil) harfinden 5. indeks olan “F” (hariç) harfine kadar olan dizi elemanlarını kesebiliyoruz.
Eğer ikinci parametreyi vermezsek, başlangıç indeksinden dizinin sonuna kadar olan tüm dizi elemanlarını ayırır.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var harfler = ["A","B","C","D","E","F"]; var yeniDizi = harfler.slice(1); console.log(yeniDizi); </script> |
Çıktısı : [“B”, “C”, “D”, “E”,”F”]
10 – splice Metodu
splice metodu ile dizilerin belirtmiş olduğumuz indeks aralığındaki dizi elemanlarını silebiliriz.
splice metodu 2 parametre alır. Birinci parametre başlangıç indeksini (dahil), ikinci parametre ise kaç tane dizi elemanının kaldırılacağı sayıyı temsil eder.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; arabalar.splice(1,2); console.log(arabalar); </script> |
Çıktısı : [“Toyota”, “Hyundai”, “Audi”]
Yukarıdaki kod ile arabalar dizisinde 1. indeksten başlayıp 2 elemanı diziden çıkardık. Yani Volvo ve BMW dizi elemanları çıkarıldı.
Eğer ikinci parametreyi vermezsek dizinin sonuna kadar olan tüm dizi elemanlarını kaldırır.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; arabalar.splice(1); console.log(arabalar); </script> |
Çıktısı : [“Toyota”]
splice metodu ile ikinci parametreden sonra istediğimiz değerleri yazarak diziye yeni elemanlar ekleyebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var arabalar = ["Toyota","Volvo","BMW","Hyundai","Audi"]; arabalar.splice(2,2,"Ford","Ferrari","Alfa Romeo"); console.log(arabalar); </script> |
Çıktısı : [“Toyota”, “Volvo”, “Ford”, “Ferrari”, “Alfa Romeo”, “Audi”]
Birinci ve ikinci parametreler ile diziden “BMW” ve “Hyundai” elemanları çıkarıldı. Parametrelerden sonra yazmış olduğumuz “Ferrari” ve “Alfa Romeo” değerleri ise diziye eklendi.
Umarım “JavaScript Dizi Metodları” yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
){kind=link}