JavaScript'te, Array.prototype yönteminin bir parçası olarak bu üç yönteme sahibiz , ancak aralarındaki farklar nelerdir ve tam olarak ne yaparlar? Öyleyse onlara dalalım!

1. Şimdi filter() yöntemiyle başlayalım:

filter() yöntemi bir diziye uygulanır ve ardından yeni bir dizi oluşturur ve yeni dizide, sağladığımız işleve göre ilk diziyi filtreler. Örneğin, birkaç öğeyi tutan oldArray adlı bir dizimiz olduğunu ve bunun bazı belirli üyelerini tutmak ve bunları newArray adlı yeni bir dizide saklamak istediğimizi varsayalım, böylece filter () yöntemini kullanabiliriz. Bu amaç:

//ES5
var oldArray = [10, 20, 30, 40, 50];
var newArray = oldArray.filter(function(number){
    return number > 35
});
console.log(newArray) // [40, 50];

// ES6
const oldArray = [10, 20, 30, 40, 50];
const newArray = oldArray.filter(number=> number > 35);
console.log(newArray); // [40, 50]

Filtre yöntemiyle ilgili iki temel şey vardır:

• Yeni bir dizi oluşturur, bu nedenle yukarıdaki eski diziyi günlüğe kaydedersek orijinal diziye sahip oluruz .
• filter metoduna geçirdiğimiz fonksiyon aslında bize bir True/False atıyor yani eleman newArray'in bir parçası olacak mı olmayacak mı.

2. map() yöntemi:

Bu yöntem bir dizi alır ve sonra o dizinin öğelerini işlevi istediği gibi dönüştürür ve ardından yeni bir dizi oluşturur ve hepsini yeni dizide saklar. Bir sayı dizimiz olduğunu ve bir nedenden dolayı tüm öğelerini ikiye katlamak istediğimizi hayal edin; forEach döngüsünü tüm öğeleri almak ve sonra ikiye katlamak için kullanabiliriz , ancak map () yöntemini de kullanabiliriz .

Öyleyse, oldArray'i yeniden kontrol edelim ve map() yöntemiyle nasıl çalışabileceğimizi görelim:

//ES5
var oldArray = [10, 20, 30, 40, 50];
var newArray = oldArray.map(function(number){
    return number * 2
});
console.log(newArray) // [20, 40, 60, 80, 100];
//ES6
const oldArray = [10, 20, 30, 40, 50];
const newArray = oldArray.map(number => number * 2);
console.log(newArray) // [20, 40, 60, 80, 100];

3. azaltma() yöntemi:

reduce() yöntemi bir dizi alır ve onu tek bir değere indirger . Örneğin, bir sayı dizimiz olduğunu ve toplam sayı miktarını elde etmek istediğimizi varsayalım, yeni bir değişken oluşturabilir ve onu sıfıra ayarlayabiliriz ve bir for döngüsü kullanarak, her bir elemanı ekleyebiliriz. diziyi az önce oluşturduğumuz değişkene. Ya da sadece aşağıdaki gibi bir redüktör fonksiyonu ile reduce() metodu sağlayabiliriz :

//ES5
var myArray = [1, 2, 3, 4];
var reducedAmount = myArray.reduce(function(total, currentValue){
    return total + currentValue
});
console.log(reducedAmount); // 10
//ES6
const myArray = [1, 2, 3, 4];
const reducedAmount = myArray.reduce(
  (accumulator, currentValue) => accumulator + currentValue);
console.log(reducedAmount); // 10
//here we have reduced myArray to a single number value

      
                

                    
                    
                
            

reduce() işlevinin bir dizi alıp tek bir değere indirgediğinden bahsetmiştik ancak bu değerin bir nesne veya yeni bir dizi de olabileceğini unutmayın . Ayrıca bu değer için bir başlangıç ​​miktarına sahip olabilir ve ardından bir diziyi küçültebilir ve varsayılan değerin yanında saklayabiliriz. Örneğin, bir dizimiz olduğunu hayal edin. Onu yeni bir diziye indirgemek istiyoruz (belirtildiği gibi, bir diziyi dizi olabilecek bir değere de indirgeyebiliriz).

Ayrıca yeni diziye oldArray'de olmayan bazı ekstra öğeler eklemek istiyoruz , böylece istediğimiz öğelerle bir diziyi geçirebilir ve ardından oldArray'i onun içine indirgeyebiliriz. Kulağa biraz belirsiz gelebileceğini biliyorum, bu yüzden kodda görelim. Önceki örnekte, bir dizi öğesinin toplam miktarını elde ettik, ancak şimdi toplam miktarı arzu ettiğimiz bir başlangıç ​​değerine eklemek istiyoruz ve işte o zaman , redüksiyon() yöntemine başka bir argüman iletebiliriz , bu başlangıçtır. state of accumulatorAşağıdaki kodda görüldüğü gibi ikinci argüman olarak 10 verdik.

const oldArray = [1, 2, 3, 4];
let sum = oldArray.reduce((accumulator,currentValue) => {
 return accumulator + currentValue;
},10); 
console.log(sum); // 20 ((1+2+3+4)+10)

• accumulator
• currentValue
• currentIndex
• array

const numArray = [10, 20, 30];
const average = numArray.reduce(
  (accumulator, currentValue, currentIndex, array) => {
    accumulator += currentValue;
    return currentIndex === array.length - 1 ? 
      accumulator / array.length : accumulator
  }
}); 
// we have not provided an initial value
console.log(average); // 20

Ve son ipucu için, hem map() yöntemini hem de filter() yöntemini kullanmak yerine, işi yalnızca reduce() yöntemini kullanarak yapabilirsiniz çünkü bu yaklaşım diziyi iki kez değil bir kez geçer .

Arkadaşlarınla ​​paylaş! En fazla 50 kez alkışlayın.

Lütfen düşüncelerinizi ve fikirlerinizi benimle paylaşmaktan çekinmeyin. Bana Twitter'dan ulaşabilir veya portföyümü ziyaret ederek diğer sosyal medyalarda bulabilirsiniz.

Benden daha fazlasını okuyun:

JavaScript Projeleri için Angular Husky 6 Lint (prettier + eslint) ve commitlint'te Çoklu Durdurucular Angular Material ve Custom Validator dahil olmak üzere Angular formlar (Reactive Form)