React Array Map (React Array içinde dolaşmak)

Merhaba dostlar, uzun bir aradan sonra tekrar bloğa bir şeyler ekleyebileceğim için heyecanlıyım. Umarım faydalı bir yazı serisi olur.

Bugün bir web uygulaması yaparken arrayler içindeki verileri nasıl elde ederiz onu konuşacağız. EcmaScript6’nın bize kattığı map fonksiyonu ile for kullanmaktan kurtularak loop işimizi inanılmaz kolaylaştıracağız ve bestpractice dediğimiz yani yapılması en önerilen yolu kullanacağız. Hemen başlayalım.

Öncelikle bir array oluşturarak başlayalım:


1
2
3
4
5
let laptops = [
{id: 1, brand: 'asus', ram: '64gb', ssd: '1tb', price: 10000},
{id: 2, brand: 'dell', ram: '32gb', ssd: '2tb', price: 7000},
{id: 3, brand: 'sony', ram: '16gb', ssd: '4tb', price: 6000},
]

laptops adlı array’imizi oluşturduk ve bu arrayden sadece markaları başka bir dizide oluşturmak istiyoruz. yani [asus, dell, sony] i elde etmek istiyoruz. bunu yapmanın bir çok yolu var; foreach, for gibi yöntemlerle yapmak istediğimiz zaman önce boş bir array oluşturmamız gerekiyor sonrasında ise teker teker bu boş array’e içindeki verileri atmamız gerekiyor. map ve arrow fonksiyonları ile ne kadar kolay yapacağımıza bakalım.


1
 const laptopBrands = laptops.map(item => item.brand);

Evet, tek satırda işimizi hallettik. Es6’nın muazzamlığı burada gözünüze çarpmıştır sanırım. Yaptığımız şey ise şöyle; iki argüman alıyor. Biri callback diğeri ise isteğe bağlı içerik. Callback her değer için Array içinde çalışıyor ve sonuç arrayimize her yeni değeri döndürüyor. Anlaşılmayan çok fazla şey var ise şu aşamada, arrow fonksiyonları çalışmanızı öneririm. Ben o konu hakkında bir şey yazmadım ama ileride yazabilirim.

Evet dostlar, kısaca map fonksiyonu hakkında konuşmuş olduk. benzer işlerde kullanılan reduce ve filter fonksiyonunu da ileriki derslerde yazmayı planlıyorum. Kendinize dikkat edin.

ahmet

Ahmet Kılınç - Software Developer

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.