Frontend Academy · Ders

Dizi Metotları: map filter reduce find

Elle döngüler yazmak yerine üst düzey metotlarla dizileri dönüştürün, filtreleyin ve toplulaştırın. Etkileyici veri işlem hatları oluşturmak için bunları zincirleyin.

Dizi Metotları: map filter reduce find, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Dizi Yöntemleri Neden Kullanılır?

Zorunlu for döngüleri çalışır, ancak amacı gizler. Dizilerin üst düzey yöntemleri, nasıl yineleme yapılacağını değil, ne istediğinizi bildirir. Nesir gibi okunan, daha temiz, sınanabilir ve birleştirilebilir kod üretirler.

Array.map() — Her Öğeyi Dönüştürme

map(), her öğenin geri çağırma işlevi tarafından dönüştürüldüğü yeni bir dizi döndürür. Özgün dizi değiştirilmez. Bir diziyi başka bir diziye dönüştürmeniz gerektiğinde kullanın.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Eşleşen Öğeleri Seçme

filter(), yalnızca geri çağırma işlevinin doğru kabul edilen bir değer döndürdüğü öğeleri içeren yeni bir dizi döndürür. Geri çağırma işlevi bir yüklem işlevidir.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Bir Değer Biriktirme

reduce(callback, initialValue), tüm öğeleri tek bir değerde biriktirir. Geri çağırma işlevi, biriktiriciyi ve geçerli öğeyi alır. Başlangıç değeri, biriktiricinin başlangıç değeridir.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — İlk Eşleşme

find(), yüklemle eşleşen ilk öğeyi, eşleşme yoksa undefined değerini döndürür. Bir öğeyi ID veya özellik değerine göre aramak için kullanın.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex(), find() gibidir; ancak eşleşen öğenin dizinini, öğe bulunamazsa -1 değerini döndürür. Bir dizideki öğenin nerede güncelleneceğini bulmak için kullanışlıdır.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() ve Array.every()

some(), en az bir öğe sınamayı geçerse true döndürür. every() ise yalnızca tüm öğeler geçerse true döndürür. Her ikisi de kesin sonucu veren ilk öğede kısa devre yapar.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Eşleme ve Düzleştirme

flatMap(), her öğeyi eşler ve ardından sonucu bir düzey düzleştirir. .map(...).flat() ile eşdeğerdir, ancak daha verimlidir.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Dizi Yöntemlerini Zincirleme

Yöntemler yeni diziler döndürdüğü için onları zincirleyebilirsiniz. Zincirleri soldan sağa okuyun: önce filter, sonra dönüştürme, ardından biriktirme.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() ve Array.includes()

at(-1) son öğeyi alır. includes(value) bir değerin var olup olmadığını denetler. Bu, arr[arr.length - 1] ve arr.indexOf(v) !== -1 kullanmaktan çok daha temizdir.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Değişmezlik: Değiştirmeyin

map, filter ve reduce yeni diziler döndürür. push, pop ve splice özgün diziyi değiştirir. React durumunda, durumu doğrudan değiştirmek yerine her zaman yeni diziler oluşturun (yayma veya map ile).

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Hızlı Kontrol

Geri çağırma işlevinin true döndürdüğü öğelerden oluşan yeni bir dizi hangi dizi yöntemiyle döndürülür?

Özet: Dizi Yöntemleri

map() her öğeyi dönüştürür. filter() eşleşen öğeleri seçer. reduce() öğeleri tek bir değerde biriktirir. find() ilk eşleşmeyi döndürür. some()/every() üyeliği sınar. Bu yöntemlerin zincirleri, iç içe döngülerin yerini okunabilir, bildirime dayalı veri işlem hatlarıyla doldurur.

Sıkça Sorulan Sorular

“Dizi Metotları: map filter reduce find” dersi ücretsiz mi?

Evet — “Dizi Metotları: map filter reduce find” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Dizi Metotları: map filter reduce find” dersinde ne öğreneceğim?

Elle döngüler yazmak yerine üst düzey metotlarla dizileri dönüştürün, filtreleyin ve toplulaştırın. Etkileyici veri işlem hatları oluşturmak için bunları zincirleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Dizi Metotları: map filter reduce find” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Dizi Metotları: map filter reduce find
Nesne Destructuring ve Spread
Şablon Dizeleri ve İsteğe Bağlı Zincirleme
Modüller: import ve export

← Frontend Academy Sayfasına Dön