2021’de ihtiyaç duyacağınız 5 JS Dizi Yöntemi

JavaScript bize dizilerle uğraşmak için bir TON farklı yöntem verir. JS geliştirme becerilerinizi sadece birkaç dakika içinde geliştirmeniz için 5 temel konuyu gözden geçireceğiz.

1. Array.map ()

.map yöntemi orijinal bir dizinin yeni değiştirilmiş bir sürümünü oluşturacaktır. Yöntem dizideki öğeleri değiştirmek için döngü olanak tanıyan bir işlev alır.

Dizideki tüm öğeleri güncellemeyi ve yenisiyle depolamak her yöntem açısından daha kullanışlı olacaktır.

Diyelim ki araba markalarını içeren bir dizimiz var:

const cars = ["Porsche", "Audi", "BMW", "Volkswagen"];

Tabii ki, tüm arabaların oldukça havalı olduğunu düşünüyoruz ve bunu ifade eden bir metin eklemek istiyoruz. Bunu .map() yöntemini kullanarak yapabiliriz:

const coolCars = cars.map(car => `${car} mükemmel bir araba markasıdır!`);

// Sonuç:
["Porsche mükemmel bir araba markasıdır!", "Audi mükemmel bir araba markasıdır!", "BMW mükemmel bir araba markasıdır!", "Volkswagen mükemmel bir araba markasıdır!"]

Harika! .map() yeni bir dizi oluşturmuş ve her öğe için metni eklemiştir.

Array.map () ne zaman kullanılır?

Mevcut bir dizinin içeriğini değiştirmek ve sonucu yeni bir değişken olarak saklamak istediğinizde.

2. Array.filter ()

Bu yöntemin ne işe yarayacağını neredeyse tahmin edebilirsiniz.

.filter() belirli bir koşula bağlı bir dizideki öğeleri ulaşmasını sağlar.

Tıpkı .map() yöntem gibi, yeni bir dizi döndürecek ve orijinal diziyi olduğu gibi bırakacaktır.

Örneğin, araba örneğini kullanarak, bir arabanın fiyatının belirli bir değerin üzerinde olmasına göre diziyi filtreleyebiliriz.

Burada, mevcut tüm arabalara sahibiz:

const cars = [ 
  {marka: "Porsche", fiyat: 100000}, 
  {marka: "Audi", fiyat: 80000}, 
  {marka: "Toyota", fiyat: 30000} 
];

Şimdi diyelim ki 40.000 ve üzeri değere sahip tüm arabalar pahalı.

Bu .filter() yöntemi ile “ucuz” ve “pahalı” arabaları iki farklı dizide elde etmek için kullanabiliriz.

const expensiveCars = cars.filter(car => car.price >= 40000);
const cheapCars = cars.filter(car => car.price < 40000);

// Sonuç - Pahalı Arabalar
[
  {brand: "Porsche", price: 100000},
  {brand: "Audi", price: 80000}
];

// Sonuç - Ucuz Arabalar
[
  {brand: "Toyota", price: 30000}
];

Dizinin her bir öğesi kriterlere uyup uymadığına bakılır ve testi geçerse yeni dizide döndürülür – harika!

Array.filter () ne zaman kullanılır?

Belirli bir koşula / kritere uymayan bir diziden öğeleri kaldırmak istediğinizde.

3. Array.forEach ()

Ah, şimdi bu bir klasik.

For ile aynı işlevselliğe sahiptir fakat kullanımı farklıdır.

Bir dizi üzerinde döngü oluşturur ve her öğe üzerinde bir işlev yürütür. İlk parametresi döngünün geçerli değerini ve dizinini içeren bir geri çağrı işlevidir.

Arabalarımızı kullanarak bir örneğe bakalım:

const cars = [
  {brand: "Porsche", price: 100000},
  {brand: "Audi", price: 80000},
  {brand: "Toyota", price: 30000}
];

console.log ile marka adını ve arabanın fiyatını konsola yazdırabiliriz. foreach ile her öğeyi tek tek gözden geçirebiliriz.

cars.forEach(car => {
  console.log(`${car.brand} size vergiler hariç ${car.price}'e mal olacak`);
});

// Sonuç:
"Porsche size vergiler hariç 100000'e mal olacak"
"Audi size vergiler hariç 80000'e mal olacak"
"Toyota size vergiler hariç 30000'e mal olacak"
Array.forEach () ne zaman kullanılır?

Yeni bir dizi oluşturmadan herhangi bir dizinin her bir öğesinin üzerinde döngü yapmak istediğinizde.

4. Array.find ()

.find() yöntemi .filter() ile çok benzer.

.Filter () yönteminde olduğu gibi, dizi değerinin eşleşmesi gereken bir koşulu iletebileceksiniz.

İkisi arasındaki fark .find(), yalnızca sağladığınız koşulla eşleşen ilk öğeyi döndürmesidir.

Araba örneğini ve .find() yöntemini kullanarak dizide karşılaştığımız ilk pahalı arabayı alalım.

const cars = [
  {brand: "Porsche", price: 100000},
  {brand: "Audi", price: 80000},
  {brand: "Toyota", price: 30000}
];

const expensiveCar = cars.find(car => car.price >= 40000);

// Sonuç - Pahalı Araba:
{brand: "Porsche", price: 100000}
Array.find () ne zaman kullanılır?

Açıkça tanımlanmış bir testi geçen bir dizinin ilk öğesini almanız gerektiğinde.

5. Array.every ()

Belki bu yöntemin ne işe yarayacağını şimdiden tahmin edebilirsiniz.

Dizideki her elemanı kontrol edecek ve sonuç durumu bildirecek.

Dizideki tüm öğeler koşulu geçerse yöntem true olarak değilse false olarak geri dönecektir.

Örneğin, tüm arabaların son 5 yıl içinde yapılıp yapılmadığını kontrol edebiliriz.

const cars = [
  {brand: "Porsche", price: 100000, builtIn: 2018},
  {brand: "Audi", price: 80000, builtIn: 2019},
  {brand: "Toyota", price: 30000, builtIn: 2019}
];

const carsYoungerThanFiveYears = cars.every(car => car.builtIn >= 2016);

// Sonuç - 5 Yaşından Küçük:
true
Array.every () ne zaman kullanılır?

Bir dizideki her öğenin açıkça tanımlanmış bir koşulu geçtiğini onaylamak istediğinizde.

Sonuç

JavaScript bize dizilerle başa çıkmak için bir sürü farklı yöntem sunuyor. Bu yöntemleri kullanarak JS geliştirme becerilerinizi yükseltebilir ve kod tabanınızı çok daha sürdürülebilir hale getirebilirsiniz.

Umarım bugün yeni bir şey öğrenmişsinizdir!

JS becerilerinizi daha da geliştirmek mi istiyorsunuz? O zaman değerlendirmenle ve yorumunla katkı sağlayabilirsin.

İyi günler dilerim! 😄

0 0 vote
Puanla
guest
0 Yorum
Inline Feedbacks
View all comments