javascript Map, Reduce Ve Filter Kullanımı

Array.map() JavaScript'de yerleşik bir fonksiyondur ve Dizinin tüm elemanlarını bazı kullanıcı tanımlı koşullara göre kolay bir şekilde değiştirmeye yardımcı olur. Temel olarak, bir dizinin elemanlarının her birini kullanıcı tanımlı bir fonksiyona gönderir ve bu fonksiyon tarafından değiştirilen yeni değerlere sahip bir dizi döndürür.

Map() methodu parametre olarak iletilen callback fonksiyonun silinmiş veya eksik dizi öğeleri için çağrılmayacağını lütfen unutmayın. Map() methodu çağrıldığı diziyi değiştirmez (ancak callback fonksiyonu bunu yapabilir).

map() Methodu, her bir dizi elemanı için bir fonksiyon çağrısının sonuçlarına sahip yeni bir dizi oluşturur.

map() Methodu, sırasıyla, bir dizideki her bir elemanı için bir kez verilen fonksiyonu çağırır.

Not: map() Methodu Değerler olmadan dizi öğelerinin fonksiyonunu çalıştırmaz.

Not: Bu method orijinal diziyi değiştirmez.

Sözdizimi:

currentValue: Gereklidir. Mevcut elemanın değeri

index: İsteğe bağlı. Mevcut elemanın indeksini tutar.

arr: İsteğe bağlı. Geçerli elemanın ait olduğu dizi nesnesi.

ÖRNEK: Dizi elemanları iki ile çarpalım.

let arr = [1, 2, 3, 4, 5];

let result = arr.map(function(elem) {
	return elem * 2;
});

console.log(result);

ÇIKTI:

ÖRNEK 2: ES6'daki Arrow fonksiyonu kullanarak dizi elemanları iki ile çarpalım.

const array1 = [1, 4, 9, 16];

// Bir fonksiyon iletilir.
const map1 = array1.map(x => x * 2);

console.log(map1);
// Çıktı: Array [2, 8, 18, 32]

ÖRNEK 3: Dizi elemanların değerini, Dizideki index numarasıyla çarpalım:

let arr = [1, 2, 3, 4, 5];

let result = arr.map(function(elem, index) {
	return elem * index;
});

console.log(result);

ÇIKTI:

ÖRNEK: Dizi elemanların karesini alalım.

let arr = [1, 2, 3, 4, 5];

function karesi($n)
{
    return($n * $n );
}


var newarray = numbers.map(karesi);

console.log(newarray);

ÇIKTI:

JavaScript Array filter() Methodu

---

Arr.filter() methodu ile sağlanan fonksiyon tarafından uygulanan (filitre edilen değerler) testi geçen tüm öğelerle birlikte sadece bu elemanlarda oluşan belirli bir diziden yeni bir dizi oluşturmak için kullanılır.

filter() Methodu, orijinal dizinin öğelerinin bir alt kümesini içeren yeni bir dizi oluşturur.

Not: filter() Nethodu, değerleri olmayan dizi öğeleri için callback fonksiyon çağırmaz.

Not: filter() methodu orijinal diziyi değiştirmez.

Sözdizimi:

currentValue: Gereklidir. Mevcut elemanın değeri

index: İsteğe bağlı. Dizide işlenen geçerli öğenin indeksi

arr: İsteğe bağlı. Geçerli elemanın ait olduğu dizi nesnesi

Açıklama

---

filter() Methodu, bir dizideki her öğe için sağlanan bir callback fonksiyonu çağırır ve callback fonksiyonu doğru olan bir değer döndürdüğü tüm değerler için yeni bir dizisini oluşturur. Callback fonksiyonu, yalnızca atanmış değerleri olan dizinin indeksleri çağrılır; silinmiş veya hiçbir zaman değer atanmamış indeksler için çağrılmaz. Filtre testini geçmeyen dizi öğeleri basitçe atlanır ve yeni diziye dahil edilmez.

ÖRNEK: Dizideki Yılı 2000 veya daha büyük tüm değerlerin bir dizisini döndürür.

function sayi(yil) {
  return yil >= 2000;
}

var yil = [1990, 2000, 2016, 1985, 2021].filter(sayi);

console.log(yil);

ÇIKTI:

ÖRNEK 2: Ekrana çift sayıları yazalım.

let arr = [12, 0, 20, 18, 27, 33, 46];

function Even(arr) 
{ 
    if(arr %2==0) 
       return true; 
    else 
       return false;  
} 
var newarray = arr.filter(Even);

console.log(newarray);  

ÇIKTI:

ÖRNEK 3: Dizideki Number.isInteger() Methodu kullanarak Tam sayı değerlerini bulalım.

var integer = [1, 2.718, Math.PI, 4, 'hello', 5].filter(function(value){
	return Number.isInteger(value);
});

console.log(integer);

ÇIKTI:

Yukarıdaki betiği yeni olan ES6 Arrow Fonksiyonları gösterimiyle'de yeniden yazabiliriz.

var arr = [1, 2.718, Math.PI, 4, 'hello', 5];

integer = arr.filter(value => Number.isInteger(value));

console.log(integer);

Dizinin tamsayı olmayan elemanları 2.718, Math.PI ve 'hello' , bu testi geçemedi ve yalnızca geri kalan elemanları, yeni bir dizinin elemanları olarak döndürülmeden ve konsola basılmış olur.

ÖRNEK 4: filtre() methodu , yalnızca isPositive() fonksiyonu tarafından kontrol edilen koşulu karşılayan öğelerden oluşan yeni bir dizi oluşturur. Ekrana pozitif sayıları yazdıralım.

function isPositive(value) {
  return value > 0;
}

var filtered = [112, 52, 0, -1, 944].filter(isPositive);

console.log(filtered);

ÇIKTI:

JavaScript Array reduce() Method

---

Arr.reduce() JavaScript Methodu Tek bir değer dizisine azaltmak için kullanılabilir ve (sol-sağ taraftan) dizisinin her bir değeri için sağlanan bir fonksiyonu yerine getirir ve fonksiyonun dönüş değeri bir akümülatör içinde depolanır.

arr.reduce() (Dizi Azaltma), Array.prototype ECMAScript 5 (ES5) ile sunulan ve tüm modern tarayıcılarda desteklenen bir Methot'dur.

Reduce() Methodu(Dizi Azaltmayı) şu şekilde düşünün: "Dizimi tek bir değere düşürmek istiyorum".

Reduce() Methodu genellikle matematik ifadeleri ve denklemler gibi şeyleri gerçekleştirmek için kullanılır, örneğin bir sayı dizisinin toplamını hesaplamak için kullanır.

Not: reduce() Methodu değerleri olmayan dizi elemanları için fonksiyonu çalıştırmaz.

Not: Bu Method, orijinal diziyi değiştirmez.

Açıklama

---

Dizinin her bir elemanı için; parametre olarak verilen callback Fonksiyon arr.reduce() Methodu çağırır ve dizinin tüm elamanlarına bu methodu uygulayarak methot'da belirtilen işlemi yapar ve tek çıktılı bir sonuç oluşturur.

accumulator: Toplayıcı, geri aramanın dönüş değerlerini toplar.

currentValue: Gereklidir. Mevcut elemanın değeri

currentIndex: İsteğe bağlı. Geçerli elemanın dizi indeksi

arr: İsteğe bağlı. Geçerli elemanın ait olduğu dizi nesnesi

ÖRNEK: Baştan başlayarak dizideki sayıları çıkarın:

var numbers = [300, 75, 25];

function test(total, num) {
  return total - num;
}

console.log(numbers.reduce(test)); // 200

ÖRNEK 2: Bir dizideki tüm sayıları yuvarlayın ve toplamı görüntüleyin:

var numbers = [15.5, 2.3, 1.1, 4.7];

function getSum(total, num) {
  return total + Math.round(num);
}

console.log(numbers.reduce(getSum, 0));

ÇIKTI:

ÖRNEK 3: Bir dizide sayılarınız var ve hepsini toplamak istiyorsunuz.

const number = [25.27, 44.85, 48.5];

const sum = number.reduce((total, amount) => total + amount); 

console.log(sum); // 118.62

Daha önce ES6 sözdizimini hiç kullanmadıysanız, yukarıdaki örnek sizi korkutmasına izin vermeyin. Aşağıda ki örnek aynısı.

const number = [25.27, 44.85, 48.5]; 

var sum = number.reduce( function(total, amount){
  return total + amount
});

console.log(sum); // 118.62

ÖRNEK 4: Dizideki tüm pozitif sayıların toplamını bulun:

let arr = [1, -2, -3, 4, 5, -6];

let result = arr.reduce(function(sum, elem) {
	if (elem >= 0) {
		return sum + elem;
	} else {
		return sum;
	}
});

console.log(result);

ÇIKTI:

JavaScript'te Azaltma Yöntemiyle Ortalama Bulma

Toplamı günlüğe kaydetmek yerine, son bir değer döndürmeden önce toplamı dizinin uzunluğuna bölebilirsiniz.

Bunu yapmanın yolu, Reduce() methodunda ki diğer bağımsız değişkenlerden yararlanmaktır. Bu argümanların ilki dizindir. Bir döngü gibi, dizin, indirgeyicinin dizi üzerinde döngü sayısını ifade eder. Son bağımsız değişken dizinin kendisidir.

const number = [19.46, 46.95, 47.5];

const ortalama = number.reduce((total, amount, index, array) => {
  total += amount;
  if( index === array.length-1) { 
    return total/array.length;
  }else { 
    return total;
  }
});
console.log(ortalama); //37.97

JavaScript'te Reduce Method ile bir diziyi düzleştirme

---

İç içe geçmiş dizileri tek bir dizide düzleştirmek için Reduce() methodunu kullanabiliriz.

Başlangıç ​​değerini boş bir diziye ayarlıyoruz ve ardından mevcut değeri toplamla birleştiriyoruz.

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const flat = data.reduce((total, amount) => {
  return total.concat(amount);
}, []);

console.log(flat) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

SONUÇ:

Yukarada ki methodları for Döngüsü ile yapabiliriz. for Döngüsü ile uzun bir kod yazacaktık proğramcılar bizim için bu methodları yazarak işimizi kolaylaştırmışlardır.

Array_map, Array_filter ve Aray_reduce arasnda farklar

---

1070

Gönder