İçeriğe geç
Educora
TR
AzərbaycancaEnglishРусскийTürkçe
ÖğrenmemEducora StudioAyarlar
Orta16 dk8 / 27

Diziler ve dizi metotları

Listelerle çalışmayı öğren: eleman eklemek ve silmek, verileri `map`, `filter`, `find` ve `reduce` ile dönüştürmek.

Kendini test et
Bu derste öğreneceklerin
  • Dizi oluşturmak, indeksle elemana erişmek ve onu değiştirmek
  • push, pop, shift, unshift ile eleman eklemek ve silmek
  • Verileri map, filter, find ve reduce ile işlemek

Bir sınıfta 25 öğrenci varsa notlarını saklamak için 25 ayrı değişken oluşturmak mantıklı değildir. Bunun için dizi (array) vardır: tek bir ad altında sıralı bir liste. Sosyal ağdaki gönderiler, sepetteki ürünler, çalma listesindeki şarkılar; programda bunların hepsi genellikle dizi olarak saklanır.

Dizi oluşturmak ve elemanlar

Dizi köşeli parantez içinde, elemanlar virgülle ayrılarak yazılır. String'lerde olduğu gibi indeksler 0'dan başlar, length ise eleman sayısını gösterir. Bir elemanı, indeksine yeni bir değer atayarak değiştirebilirsin.

JavaScript
const fruits = ['apple', 'pear', 'pomegranate'];

console.log(fruits[0]);
console.log(fruits.length);
console.log(fruits[fruits.length - 1]);

fruits[1] = 'quince';
console.log(fruits);
▸ Beklenen çıktı
apple
3
pomegranate
[ 'apple', 'quince', 'pomegranate' ]

Eleman eklemek ve silmek

MetotNe yapar
push(x)sona eleman ekler
pop()son elemanı silip döndürür
unshift(x)başa eleman ekler
shift()ilk elemanı silip döndürür
includes(x)x dizide var mı — true/false
indexOf(x)x'in indeksi, yoksa −1
JavaScript
const queue = ['Aysel', 'Murad'];

queue.push('Leyla');
queue.unshift('Elvin');
console.log(queue);

const last = queue.pop();
const first = queue.shift();
console.log(first, last, queue);

console.log(queue.includes('Murad'), queue.indexOf('Aysel'));
▸ Beklenen çıktı
[ 'Elvin', 'Aysel', 'Murad', 'Leyla' ]
Elvin Leyla [ 'Aysel', 'Murad' ]
true 0

forEach ve map

Dizi metotlarının çoğu argüman olarak bir fonksiyon alır ve onu her eleman için çağırır. forEach her elemanla yalnızca bir şey yapar, örneğin yazdırır. map ise her elemanı dönüştürür ve sonuçlardan aynı uzunlukta yeni bir dizi oluşturur. Orijinal dizi değişmez.

JavaScript
const prices = [10, 25, 4];

prices.forEach((price, index) => {
  console.log(`${index}: ${price} AZN`);
});

const sale = prices.map((price) => price * 0.9);
const labels = prices.map((price) => `${price} AZN`);

console.log(sale);
console.log(labels);
console.log(prices);
▸ Beklenen çıktı
0: 10 AZN
1: 25 AZN
2: 4 AZN
[ 9, 22.5, 3.6 ]
[ '10 AZN', '25 AZN', '4 AZN' ]
[ 10, 25, 4 ]

filter, find ve reduce

  • filter, fonksiyonun true döndürdüğü elemanlardan yeni bir dizi oluşturur.
  • find koşula uyan ilk elemanı döndürür; yoksa undefined döndürür.
  • reduce bütün diziyi tek bir değere indirger: toplam, en büyük değer, sayaç vb.
JavaScript
const scores = [45, 92, 78, 30, 88];

const passed = scores.filter((s) => s >= 50);
const firstHigh = scores.find((s) => s > 80);
const perfect = scores.find((s) => s === 100);
const total = scores.reduce((sum, s) => sum + s, 0);

console.log(passed);
console.log(firstHigh, perfect);
console.log('Total:', total, 'Average:', total / scores.length);
▸ Beklenen çıktı
[ 92, 78, 88 ]
92 undefined
Total: 333 Average: 66.6

reduce ilk bakışta zor görünür. Fonksiyonu iki değer alır: biriktirici (sum) ve o anki eleman (s). İkinci argüman olan 0, biriktiricinin başlangıç değeridir. Her adımda fonksiyonun döndürdüğü değer, bir sonraki adımın biriktiricisi olur:

AdımsumsDöndürülen
104545
24592137
313778215
421530245
524588333

Bu metotlar zincirlenebilir: her biri yeni bir dizi döndürdüğü için bir sonraki metot hemen onun üzerinde çağrılabilir. Aşağıda önce geçer notları seçiyor, sonra onlara 5 puan bonus ekliyoruz.

JavaScript
const scores = [45, 92, 78, 30, 88];

const bonus = scores
  .filter((s) => s >= 50)
  .map((s) => s + 5);

console.log(bonus);
console.log(scores.some((s) => s < 40));
console.log(scores.every((s) => s > 20));
▸ Beklenen çıktı
[ 97, 83, 93 ]
true
true
some en az bir elemanın, every ise tüm elemanların koşula uyup uymadığını kontrol eder.

Sıralama: sort

JavaScript
const numbers = [10, 9, 1, 100];

console.log([...numbers].sort());
console.log([...numbers].sort((a, b) => a - b));
console.log([...numbers].sort((a, b) => b - a));

const names = ['Murad', 'Aysel', 'Leyla'];
names.sort();
console.log(names);
▸ Beklenen çıktı
[ 1, 10, 100, 9 ]
[ 1, 9, 10, 100 ]
[ 100, 10, 9, 1 ]
[ 'Aysel', 'Leyla', 'Murad' ]
[...numbers] dizinin bir kopyasını çıkarır; böylece orijinal bozulmaz. Bu yazımı bir sonraki derste öğreneceksin.
Etkileşimli
Simülasyon yükleniyor…
Bir sıralama algoritmasının elemanları nasıl karşılaştırıp yer değiştirdiğini adım adım izle.
Alıştırma

Diziden yalnızca çift sayıları seç, her birini 10 ile çarp ve yeni diziyi console.log ile yazdır. filter ve map metotlarını zincirle.

Alıştırma · JavaScript
const numbers = [1, 2, 3, 4, 5, 6];
// your code here
▸ Beklenen çıktı
[ 20, 40, 60 ]

Önemli noktalar

  • Dizi sıralı bir listedir; indeksler 0'dan başlar, length eleman sayısıdır.
  • push/pop sonda, unshift/shift başta çalışır.
  • map her elemanı dönüştürür, filter seçer, find ilk uyan elemanı bulur.
  • reduce bir biriktirici yardımıyla diziyi tek bir değere indirger.
  • Sayıları sıralamak için sort((a, b) => a - b) yaz; sort orijinali değiştirir.

Kendini test et

10 soru. Her doğru cevap XP kazandırır.

1 / 10
const a = [5, 10, 15]; ise a[1] neye eşittir?