Focus mode
JavaScript'te, Arrayler(Diziler) sayesinde gerektiği zaman verilerimizi saklıyor ve bunları manipüle edebiliyoruz. Bu kısımda anlatılan metotlar dizi içerisinde tuttuğumuz verilerimizi kullanmak istediğimiz yöntemlere göre değiştirip şekil aldırmamızı sağlıyor.
Yazının devamındaki CodePen üzerinde verilen örnekleri incelerken CodePen'in console sekmesini açmayı unutmayın.
Örneğin:
let alisverisListem = ["elma", "ekmek", "süt"];
alisverisListem.push("yumurta");
console.log(alisverisListem);
// Yeni Dizimiz ["elma", "ekmek", "süt", "yumurta"] şeklinde olacaktır.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
let alisverisListem = ["elma", "ekmek", "süt"];
alisverisListem.pop();
console.log(alisverisListem);
// Yeni dizimiz ["elma", "ekmek"] şeklinde olacaktır. Son eleman olan "süt" diziden silinmiş oldu.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const alisverisListem = ["elma", "ekmek", "süt"];
const elmaVar = alisverisListem.includes("elma");
console.log(elmaVar);
// Dizi içerisinde elma olduğu için true yazdırmasını bekleriz.
const armutVar = alisverisListem.includes("armut");
console.log(armutVar);
// Dizi içerisinde armut olmadığı için ekrana false yazdırmasını bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const alisverisListem = ["elma", "ekmek", "süt"];
const yeniAlisverisListem = alisverisListem.slice(0,2);
// "elma"dan başlayıp "süt"e kadar olan elemanları kopyala."süt" dahil değil.
console.log(yeniAlisverisListem);
// ["elma", "ekmek"] görmeyi bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const alisverisListem = ["elma", "ekmek", "süt"];
const stringAlisverisListem = alisverisListem.join();
console.log(stringAlisverisListem);
// Çıktıda "elma,ekmek,süt" bekleriz.
const stringAlisverisListem2 = alisverisListem.join(" kiraz ");
console.log(stringAlisverisListem2);
// Çıktıda "elma kiraz ekmek kiraz süt" bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const yiyecekler = ["pasta", "baklava", "puding"];
const icecekler = ["su", "kahve"];
const menu = yiyecekler.concat(icecekler);
console.log(menu);
// Çıktıda ["pasta", "baklava", "puding", "su", "kahve"] bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Yazının devamında, içerisinde fonksiyon tanımladığımız ve bu fonksiyonlarla dizideki elemanları manipüle ettiğimiz dizi metotlarını inceleyeceğiz.
dizi.forEach(function(diziElemanınınKendisi, diziElemanınınIndeksi, dizininKendisi) {
// Bir şeyler yap.
});
Örneğin:
// Malzemeler dizisindeki her bir malzemeyi ve onun indeksini konsola yazdıran bir kod yazalım:
const malzemeler = ["yumurta", "un", "süt"];
malzemeler.forEach(function(malzeme, malzemeIndeksi) {
console.log(malzeme, malzemeIndeksi);
});
// console.log() fonksiyonu her bir malzeme için ayrı ayrı çalışacağından çıktı olarak tüm malzemeleri (ve indekslerini) alt alta görürüz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
// Bir dizideki sayıların 5 katından oluşan başka bir dizi oluşturalım:
const sayilar = [1,2,3];
let sayilarin5kati = sayilar.map(function(sayi) {
return sayi*5;
});
console.log(sayilarin5kati);
// Çıktı olarak [5,10,15] görmeyi bekleriz.
console.log(sayilar);
// Çıktı olarak [1,2,3] görmeyi bekleriz. Orijinal dizimiz aynı kalır.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const sayilar = [4,5,6];
// sonucu görebilmek çıktıyı sonuc adlı değişkende tutalım:
const sonuc1 = sayilar.some(function(sayi) {
return sayi > 5 ;
});
console.log(sonuc1);
// Dizi içerisinde 5'ten büyük bir eleman bulunduğu için çıktıda "true" görmeyi bekleriz.
const sonuc2 = sayilar.some(function(sayi) {
return sayi <3;
});
console.log(sonuc2);
// Dizi içerisinde 3'ten küçük herhangi bir sayı olmadığı için çıktıda "false" görmeyi bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const sayilar = [4,5,6];
const sonuc1 = sayilar.every(function(sayi) {
return sayi > 3;
});
console.log(sonuc1);
// Dizideki tüm sayılar 3'ten büyük olduğu için bu sonucun true dönmesini bekleriz.
const sonuc2 = sayilar.every(function(sayi) {
return sayi > 5;
});
console.log(sonuc2);
// Dizideki tüm sayılar 5'ten büyük olmadığı için sonucun false dönmesini bekleriz.
const sonuc3 = sayilar.every(function(sayi) {
return sayi > 7;
});
console.log(sonuc3);
// Dizideki hiçbir sayı 7'den büyük olmadığı için sonucun false dömmesini bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const sayilar = [1,2,3,4,5];
const filtrelenmisSayilar = sayilar.filter(function(sayi) {
return sayi >3;
});
console.log(filtrelenmisSayilar);
// Orijinal diziyi 3'ten büyük olan sayılar için filtrelediğimizde yeni oluşacak dizi [4,5] olacaktır.
console.log(sayilar);
// Orijinal dizi bozulmayacağından çıktıda [1,2,3,4,5] olarak görürüz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const sayilar = [4,5,6,7];
const bulunacakEleman1 = sayilar.find(function(sayi) {
return sayi === 5;
});
console.log(bulunacakEleman1);
// Dizi içerisinde 5 eleman olarak bulunduğu için çıktıda elemanın kendisini yani 5 görmeyi bekleriz.
const bulunacakEleman2 = sayilar.find(function(sayi) {
return sayi > 5;
});
console.log(bulunacakEleman2);
// Dizi içerisinde 5'ten büyük birden fazla eleman olduğu için koşula uyan ilk elemanı yani 6'yı görmeyi bekleriz.
const bulunacakEleman3 = sayilar.find(function(sayi) {
return sayi < 3;
});
console.log(bulunacakEleman3);
// Dizi içerisinde 3'ten küçük bir eleman olmadığı için çıktıda undefined görmeyi bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const sayilar = [3,5,2,10,4];
sayilar.sort();
console.log(sayilar);
// Çıktı olarak [10, 2, 3, 4, 5] alırız.
//(Sayıların string halleri UTF-16 değerlerine göre sıralandıkları için)
const sayilar = [3,5,2,10,4];
sayilar.sort(function(a,b) {
return b-a;
});
console.log(sayilar);
// Çıktı olarak [10, 5, 4, 3, 2] alırız.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örnekler:
const sayilar = [10,20,30];
// Dizi içindeki sayıları toplayarak indirgeyecek bir fonksiyon yazalım:
function indirgeyici (akumulator, sayi) {
return akumulator + sayi;
}
// Bu fonksiyonu ve toplamaya 0'dan başlayacağımızı belirten 0 sayısını metodumuza parametre olarak girelim ve sonucu bir değişkende tutalım:
const sonuc1 = sayilar.reduce(indirgeyici,0);
console.log(sonuc1);
//0 + 10 + 20 + 30 = 60 olacağından çıktı olarak 60 bekleriz.
// Eğer akümülatorümüzü 0 yerine 5'den başlatsaydık çıkabilecek sonucu görelim:
const sonuc2 = sayilar.reduce(indirgeyici, 5);
console.log(sonuc2);
// 5 + 10 + 20 + 30 = 65 olacağından çıktı olarak 65 bekleriz.
Aşağıda codepen ile deneyimleyebilirsiniz.
Örneğin:
const piknikSepetim = [
["elma",3],
["muz",5],
["ekmek", 2]
];
const ilkEleman = piknikSepetim[0]; // ["elma",3]
const ikinciEleman = piknikSepetim[1] // ["muz",5]
const ucuncuEleman = piknikSepetim[2] // ["ekmek", 2]
const kacElma = piknikSepetim[0][1]; // 3
Aşağıda codepen ile deneyimleyebilirsiniz.
let kalemlik = new Array();
// Aynı metotla kalemlik dizisi içerisinde yeni diziler oluşturabiliriz:
kalemlik[0] = new Array("Silgi", 2 ,"mavi");
kalemlik[1] = new Array("Kalem", 3, "kırmızı");
kalemlik[2] = new Array("Cetvel", 1, "siyah");
console.log(kalemlik);
// Çıktı olarak [["Silgi", 2, "mavi"], ["kalem", 3, "kırmızı"], ["Cetvel", 1, "siyah"]] şeklinde 3 elemanlı bir dizi döner.
//Bu dizi içerisindeki silgiyi görüntülemek istersek:
console.log(kalemlik[0][0]);
// Kalemlik dizisinin ilk elemanının birinci elemanı döner yani "silgi" dönmesini bekleriz.
// Kalemlik içerisindeki silgilerin rengini görüntülemek istersek:
console.log(kalemlik[0][2]);
// renk kalemlik dizisinin ilk elemanının üçüncü elemanı olduğundan "mavi" döner.
Aşağıda codepen ile deneyimleyebilirsiniz.
1.Soru
let dizi = [2,5,8,11,15,17];
// Uygun dizi metotlarını kullanarak yukarıda verilen dizinin elemanları içinde 10'dan büyük olan elemanların 5'er katından oluşan yeni bir dizi oluşturun. (sonuç [55, 75, 85] olmalı.)
Aşağıdaki codepen üzerinde çalışabilirsiniz.
2.Soru
let dizi = [3,6,9,14,16];
// Uygun dizi metotlarını kullanarak, yukarıdaki dizi için aşağıdaki şartları sağlayan myFunction fonksiyonunu yazın.
// Elemanların arasında 5'ten büyük olan olan bir eleman varsa konsola "Beşten büyük bir eleman mevcut." yoksa "5'ten büyük eleman mevcut değil." yazdır.
function myFunction (dizi){
// Kodunuzu buraya yazın.
}
myFunction(dizi);
Aşağıdaki codepen üzerinde çalışabilirsiniz.
3. Soru
let dizi = [2,3,4];
// Uygun dizi metodunu kullanarak yukarıda verilen dizinin elemanlarının çarpımının sonucunu (24) veren bir fonksiyon yazınız.
Aşağıdaki codepen üzerinde çalışabilirsiniz.
Programs to Accelerate Your Progress in a Software Career
Join our 4-8 month intensive Patika+ bootcamps, start with the fundamentals and gain comprehensive knowledge to kickstart your software career!
You need to enroll in the course to be able to comment!