JavaScript Dizi Fonksiyonları

JavaScript dilinde uygulama geliştiriyorsanız aşağıdaki dizi metotlarını ve kullanım şekillerini bilmeniz bir zorunluluktur. Dizi tanımlama, değer ataması okuma ile ilgili yazdığım yazıyı görek için javascript diziler yazısını okumanızı tavsiye ederim.

İçindekiler

dizi.length

Dizinin uzunluğunu öğrenmek için kullanılır.

Aşağıdaki örnek javaScript dizi uzunluğunu verir.


<html>
    <head>
        <meta charset="utf-8">
        <title>www.tasarimkodlama.com</title>
    </head>
   <body>
   
   <script>
        var renkler = ['Beyaz', 'Siyah', 'Özel']; 
       
           window.alert( renkler.length );
       
   </script>
   </body>
</html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

</head>

<body>

var renkler = ['Beyaz', 'Siyah', 'Özel'];

window.alert( renkler.length );

</script>

</body>

</html>

Aşağıdaki for örneğinde olduğu gibi dizi uzunluğunun bir azı kadar döner.


<html>
    <head>
        <meta charset="utf-8">
        <title>www.tasarimkodlama.com</title>
    </head>
   <body>
   
   <script>
        var renkler = ['Beyaz', 'Siyah', 'Özel']; 
       
       for(var i=0;i<renkler.length;i++){
           window.alert( renkler[i] );
       }

       
   </script>
   </body>
</html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

</head>

<body>

var renkler = ['Beyaz', 'Siyah', 'Özel'];

for(var i=0;i<renkler.length;i++){

window.alert( renkler[i] );

}

</script>

</body>

</html>

concat()

concat() metodu eklendigi dizi ile parametre olarak aldığı dizi(leri) birleştirerek yeni bir dizi döndürür.


<script>

//concat metodun çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür.
// var yenidizi = eskidizi.concat(deger1[, deger2[, ...[, degerN]]])
var mevveler = ["Elma", "Muz"];
var sebzeler = ["Brokoli", "Lahana"];
var bitkiler=[];

bitkiler= sebzeler.concat(mevveler);
document.write(bitkiler); //ekran çıktısı: Brokoli,Lahana,Elma,Muz

</script>

//concat metodun çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür.

// var yenidizi = eskidizi.concat(deger1[, deger2[, ...[, degerN]]])

var mevveler = ["Elma", "Muz"];

var sebzeler = ["Brokoli", "Lahana"];

var bitkiler=[];

bitkiler= sebzeler.concat(mevveler);

document.write(bitkiler); //ekran çıktısı: Brokoli,Lahana,Elma,Muz

</script>

every()

every() methodu dizideki tüm öğelerin sağlanan işlev tarafından uygulanan testi geçip geçmediğini sınar.


<script>

// every dizideki tüm elemenları verilen fonksiyon ile test eder.
//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.
function yasBuyukMu(eleman, index, dizi) {
return eleman >= 18;
}

var durum1= [20, 5, 8, 130, 44].every(yasBuyukMu); // false
var durum2= [18, 54, 18, 130, 44].every(yasBuyukMu); // true

</script>

// every dizideki tüm elemenları verilen fonksiyon ile test eder.

//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.

function yasBuyukMu(eleman, index, dizi) {

return eleman >= 18;

}

var durum1= [20, 5, 8, 130, 44].every(yasBuyukMu); // false

var durum2= [18, 54, 18, 130, 44].every(yasBuyukMu); // true

</script>


<script>

// every dizideki tüm elemenları verilen fonksiyon ile test eder.
//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.
function sayiKontrol(eleman, index, dizi) {

//Bilgi: NaN ->numaraya çevrilemezse üretilen bir değerdir. '1' -> 1 olurken 'a' - > sayı olmaz NaN olur.
if(isNaN(eleman))
return false;
else
return true;

}

var durum1= [5,"aaa",7,3].every(sayiKontrol); // false
var durum2= [18, 54, 18,152].every(sayiKontrol); // true

console.log(durum1);
console.log(durum2);

</script>

// every dizideki tüm elemenları verilen fonksiyon ile test eder.

//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.

function sayiKontrol(eleman, index, dizi) {

//Bilgi: NaN ->numaraya çevrilemezse üretilen bir değerdir. '1' -> 1 olurken 'a' - > sayı olmaz NaN olur.

if(isNaN(eleman))

return false;

else

return true;

}

var durum1= [5,"aaa",7,3].every(sayiKontrol); // false

var durum2= [18, 54, 18,152].every(sayiKontrol); // true

console.log(durum1);

console.log(durum2);

</script>

filter()

filter() methodu sağlanan işlev tarafından uygulanan sınamayı geçen tüm öğelere sahip yeni bir dizi oluşturur.


<script>

//filter metodu kendisine gönderilen fonksiyondan geçen tüm elemanlardan yeni bir dizi oluşturur.

function buyukSayilar(deger) {
return deger >= 25;
}

var yeni_dizi = [12, 5, 8, 130, 44].filter(buyukSayilar);
// yeni_dizi degeri: [130, 44]

document.write(yeni_dizi);

</script>

//filter metodu kendisine gönderilen fonksiyondan geçen tüm elemanlardan yeni bir dizi oluşturur.

function buyukSayilar(deger) {

return deger >= 25;

}

var yeni_dizi = [12, 5, 8, 130, 44].filter(buyukSayilar);

// yeni_dizi degeri: [130, 44]

document.write(yeni_dizi);

</script>

forEach()

forEach() methodu, her dizi öğesi için bir kez sağlanan işlevi yürütür.


<script>

// forEach() metodu, dizinin her elemanı için belirtilen fonksiyonu çalıştırır.

function ornekFonk(deger) {

//dizinin her elemanını 5 ile çarpıp h3 etiketleri arasında ekrana yazar.
document.write("<h3>"+deger*5+"</h3>");
}

[34,11,02,4].filter(ornekFonk);

</script>

// forEach() metodu, dizinin her elemanı için belirtilen fonksiyonu çalıştırır.

function ornekFonk(deger) {

//dizinin her elemanını 5 ile çarpıp h3 etiketleri arasında ekrana yazar.

document.write("<h3>"+deger*5+"</h3>");

}

[34,11,02,4].filter(ornekFonk);

</script>

indexOf()

indexOf() metodu, argüman olarak verilen elemanın array de ilk görüldüğü index’i verir. Eğer bu eleman array de bulunmuyorsa -1 değeri döner.


<script>

//indexOf() metodu kendisine gönderilen parametre ile dizide aramayapıp bulduğu ilk indexi döndürür. eğer dizide yoksa aranan değer -1 değerini çevirir.
var dizi = [2, 9, 9];
dizi.indexOf(2); // 0
dizi.indexOf(7); // -1
dizi.indexOf(9, 2); // 2
dizi.indexOf(2, -1); // -1
dizi.indexOf(2, -3); // 0

</script>

//indexOf() metodu kendisine gönderilen parametre ile dizide aramayapıp bulduğu ilk indexi döndürür. eğer dizide yoksa aranan değer -1 değerini çevirir.

var dizi = [2, 9, 9];

dizi.indexOf(2); // 0

dizi.indexOf(7); // -1

dizi.indexOf(9, 2); // 2

dizi.indexOf(2, -1); // -1

dizi.indexOf(2, -3); // 0

</script>

join()

join() methodu, virgülle veya belirtilen bir ayırıcı dizgisiyle ayrılan bir dizideki (veya diziye benzer bir nesne) tüm öğeleri birleştirerek yeni bir dize oluşturur ve döndürür.


<script>

//join() methodu dizideki tüm değerleri belirtilen yapıştırıyıcıya göre birleştirir.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var dizi1 = meyveler.join(","); //Elma,Muz,Üzüm,Portakal
var dizi2 =meyveler.join("+"); //Elma+Muz+Üzüm+Portakal
</script>

//join() methodu dizideki tüm değerleri belirtilen yapıştırıyıcıya göre birleştirir.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var dizi1 = meyveler.join(","); //Elma,Muz,Üzüm,Portakal

var dizi2 =meyveler.join("+"); //Elma+Muz+Üzüm+Portakal

</script>

lastIndexOf()

lastIndexOf() methodu, dizide belirli bir öğenin bulunabileceği son dizini veya mevcut değilse -1 değerini döndürür.


<script>

//lastIndexOf() methodu belirtilen elemanın dizinin sonunda olup olmadığını kontrol eder. Dizinin sonunda bulamazsa -1 değerini döndürür.
// aranan değerin dışında isteğe bağlı ikinci bir değer daha verilebilir. Pozitif ise dizinin başından kaç değer içinde aranacağı,
//negatif ise dizinin sonunda kaç değerin aramadan çıkarılacağını ifade eder. Unutmayın aramaya eklenmese de dizinin başından aranacaktır.
//değer bulmazsa -1 değerini döndürecektir.
var dizi = [2, 5, 9, 2];

dizi.lastIndexOf(2); // 3
dizi.lastIndexOf(7); // -1

dizi.lastIndexOf(9, 1); // -1
dizi.lastIndexOf(9, 2); // 2
dizi.lastIndexOf(9, -3); // -1
dizi.lastIndexOf(9, -1); // 2

</script>

//lastIndexOf() methodu belirtilen elemanın dizinin sonunda olup olmadığını kontrol eder. Dizinin sonunda bulamazsa -1 değerini döndürür.

// aranan değerin dışında isteğe bağlı ikinci bir değer daha verilebilir. Pozitif ise dizinin başından kaç değer içinde aranacağı,

//negatif ise dizinin sonunda kaç değerin aramadan çıkarılacağını ifade eder. Unutmayın aramaya eklenmese de dizinin başından aranacaktır.

//değer bulmazsa -1 değerini döndürecektir.

var dizi = [2, 5, 9, 2];

dizi.lastIndexOf(2); // 3

dizi.lastIndexOf(7); // -1

dizi.lastIndexOf(9, 1); // -1

dizi.lastIndexOf(9, 2); // 2

dizi.lastIndexOf(9, -3); // -1

dizi.lastIndexOf(9, -1); // 2

</script>

map()

map() , dizinin her elemanı için, parametre olarak verilen fonksiyonu çağırır ve oluşan sonuçlarla da yeni bir dizi oluşturur.


<script>

//map() methodu dizi içindeki tüm elemanları belirtilen fonksiyondan geçirip yeni bir dizi oluşturur.

var sayilar = [1, 4, 9];
var kok = sayilar.map(Math.sqrt);
// kok artık [1, 2, 3], sayılar dizisi hala [1, 4, 9]

var nesneDizi = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var yeniDizi = kvArray.map(function(gelen){
var yDizi = {};
yDizi[gelen.key] = gelen.value;
return yeniDizi;
});
// yeniDizinin : [{1:10}, {2:20}, {3:30}],
// nesneDizi'si hala [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

</script>

//map() methodu dizi içindeki tüm elemanları belirtilen fonksiyondan geçirip yeni bir dizi oluşturur.

var sayilar = [1, 4, 9];

var kok = sayilar.map(Math.sqrt);

// kok artık [1, 2, 3], sayılar dizisi hala [1, 4, 9]

var nesneDizi = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];

var yeniDizi = kvArray.map(function(gelen){

var yDizi = {};

yDizi[gelen.key] = gelen.value;

return yeniDizi;

});

// yeniDizinin : [{1:10}, {2:20}, {3:30}],

// nesneDizi'si hala [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

</script>

pop()

pop() methodu dizideki son değeri çıkartır. Son öğeyi bir diziden kaldırır ve bu öğeyi döndürür. Bu yöntem dizinin uzunluğunu değiştirir.


<script>

//pop() methodu dizideki son değeri diziden atar.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var son_meyve=mevveler.pop();

//meyveler yeni hali ["Elma", "Muz", "Üzüm"]
//son_meyve : "Portakal"

</script>

//pop() methodu dizideki son değeri diziden atar.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var son_meyve=mevveler.pop();

//meyveler yeni hali ["Elma", "Muz", "Üzüm"]

//son_meyve : "Portakal"

</script>

push()

push() metotu dizinin sonuna bir yada daha fazla element ekler ve dizinin yeni uzunluğunu geri döndürür.


<script>

// push() methodu belirtilen elemanları dizinin sonuna ekler.

var mevveler = ["Elma", "Muz"];
meyveler.push("Üzüm","Portakal");

//meyveler yeni hali : ["Elma", "Muz","Üzüm","Portakal"];

</script>

// push() methodu belirtilen elemanları dizinin sonuna ekler.

var mevveler = ["Elma", "Muz"];

meyveler.push("Üzüm","Portakal");

//meyveler yeni hali : ["Elma", "Muz","Üzüm","Portakal"];

</script>

reverse()

reverse() methodu, bir diziyi yerinde tersine çevirir. İlk dizi elemanı son olur ve son dizi elemanı ilk olur.


<script>

//reverse() methodu diziyi ters çevirir.
var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
meyveler.reverse();

//meyveler yeni hali: ["Portakal","Üzüm","Muz","Elma"]

</script>

//reverse() methodu diziyi ters çevirir.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

meyveler.reverse();

//meyveler yeni hali: ["Portakal","Üzüm","Muz","Elma"]

</script>

shift()


<script>

//shift() methodu dizinin başındaki ilk elemanı çeker.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
var ilk_eleman=meyveler.shift();

//meyveler yeni hali [ "Muz","Üzüm","Portakal"]
//ilk_elaman : "Elma"

</script>

//shift() methodu dizinin başındaki ilk elemanı çeker.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var ilk_eleman=meyveler.shift();

//meyveler yeni hali [ "Muz","Üzüm","Portakal"]

//ilk_elaman : "Elma"

</script>

sort()


<script>

//sort() methodu diziyi sıralar.
var mevveler = ["Elma", "Muz","Ayva","Portakal"];

mevveler.sort();

//meyveler yeni hali ["Ayva", "Elma", "Muz", "Portakal"]

</script>

//sort() methodu diziyi sıralar.

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

mevveler.sort();

//meyveler yeni hali ["Ayva", "Elma", "Muz", "Portakal"]

</script>

some()


<script>

//some() methodu BAZI elemanların belirtilen fonksiyon ile testi geçip geçmediğini kontrol eder.

function karakterKontrol1(elaman, index, dizi){

//5 kareterden büyük olan var mı kontrolü yapıyor. varsa true
return eleman.length>5;
}

function karakterKontrol2(elaman, index, dizi){

//10 kareterden büyük olan var mı kontrolü yapıyor. varsa true
return eleman.length>10;
}

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

meyveler.some(karakterKontrol1); //true portakal 5 karakterden büyük olduğu için true dönecektir.

meyveler.some(karakterKontrol2); //false 10 karakterden büyük değer olmadığı için sonuç false dönecektir.

</script>

//some() methodu BAZI elemanların belirtilen fonksiyon ile testi geçip geçmediğini kontrol eder.

function karakterKontrol1(elaman, index, dizi){

//5 kareterden büyük olan var mı kontrolü yapıyor. varsa true

return eleman.length>5;

}

function karakterKontrol2(elaman, index, dizi){

//10 kareterden büyük olan var mı kontrolü yapıyor. varsa true

return eleman.length>10;

}

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

meyveler.some(karakterKontrol1); //true portakal 5 karakterden büyük olduğu için true dönecektir.

meyveler.some(karakterKontrol2); //false 10 karakterden büyük değer olmadığı için sonuç false dönecektir.

</script>

unshift()


<script>

//unshift() methodu dizinin başına değer ekler.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

meyveler.unshift("Ayva");
//meyveler dizisinin yeni hali :["Ayva","Elma", "Muz","Üzüm","Portakal"]

</script>

//unshift() methodu dizinin başına değer ekler.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

meyveler.unshift("Ayva");

//meyveler dizisinin yeni hali :["Ayva","Elma", "Muz","Üzüm","Portakal"]

</script>

toString()


<script>
//toString() metodu diziyi metinsel(string) ifadeye çevirir.
var mevveler = ["Elma", "Muz","Ayva","Portakal"];

var yazi=meyveler.toString();

//yazi değişkeni : Elma, Muz,Ayva,Portakal
</script>

//toString() metodu diziyi metinsel(string) ifadeye çevirir.

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

var yazi=meyveler.toString();

//yazi değişkeni : Elma, Muz,Ayva,Portakal

</script>

JavaScript Dizi Fonksiyonları

dizi.length

concat()

every()

filter()

forEach()

indexOf()

join()

lastIndexOf()

map()

pop()

push()

reverse()

shift()

sort()

some()

unshift()

toString()

1 Yorum

İptal Et

dizi.length

concat()

every()

filter()

forEach()

indexOf()

join()

lastIndexOf()

map()

pop()

push()

reverse()

shift()

sort()

some()

unshift()

toString()

Bunları da beğenebilirsiniz

1 Yorum