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.


js array.map-array.filter-array.reduce

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

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

Sözdizimi:

array.map(function(currentValue, index, arr), thisValue)

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:

[2, 4, 6, 8, 10]

Ö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:

[0, 2, 6, 12, 20]

Ö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:

[1, 4, 9, 16, 25]

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.


js array.map-array.filter-array.reduce

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

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

Sözdizimi:

array.filter(function(currentValue, index, arr), thisValue)

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:

[2000, 2016, 2021]

Ö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:

[12, 0, 20, 18, 46]

Ö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:

 [1, 4, 5]

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:

[112, 52, 944]

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.


js array.map-array.filter-array.reduce

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

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

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)

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:

24

Ö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:

10

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


Map

php array_map, array_filter, array_reduce

Öğeler'den oluşan diziniz var ve her birini dönüştürmek istiyorsunuz. Sonuç, işlenen öğeleri içeren tam olarak aynı uzunlukta yeni bir dizidir.

Filter

php array_map, array_filter, array_reduce

Bir diziniz var ve belirli öğeleri filtrelemek istiyorsunuz. Sonuç, aynı öğelere sahip, ancak bazıları hariç tutulan yeni bir dizidir. Yeni dizinin uzunluğu aynı olacaktır (hiçbir değer belirtilmezse) veya orjinalden daha kısa olacaktır.

Reduce

php array_map, array_filter, array_reduce

Öğelerden oluşan diziniz var ve her bir öğeyi döngü kullanarak yeni bir değer hesaplamak istiyorsunuz. Sonuç, Dizinin Tek bir değer Elemanı var.


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

1742

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.