JavaScript Dizi Yöntemleri İçin En İyi Kılavuz - Azaltma

reduce()Yöntem sadece bir değere kadar değerler dizisi azaltır. Döndürülen tek değer herhangi bir türde olabilir.

reduce()dizilim yöntemlerinin İsviçre Çakısı gibi. Diğerleri belirli işlevselliği sever map()ve sağlarken, orijinal diziyi korurken bir giriş dizisini istediğiniz herhangi bir çıktıya dönüştürmek için kullanılabilir.filter()reduce()

Sözdizimi

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - döndürülen yeni sayı, dizi, dize veya nesne
  • arr - üzerinde çalıştırılan dizi
  • accumulator - önceki yinelemenin döndürülen değeri
  • currentValue - dizideki geçerli öğe
  • index - mevcut öğenin dizini
  • array- reduce()çağrılan orijinal dizi
  • initialValue - nihai çıktı için bir başlangıç ​​değeri olarak hizmet eden bir sayı, dizi, dize veya nesne

Örnekler

ES5

var numbers = [1, 2, 3]; var sum = numbers.reduce(function(total, current) { return total + current; }, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6

ES6

const numbers = [1, 2, 3]; const sum = numbers.reduce((total, current) => { return total + current; }, 0); const sumOneLiner = numbers.reduce((total, current) => total + current, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6 console.log(sumOneLiner); // 6

Hakkında Her Şey initialValue

initialValue Sağlanan

initialValueBağımsız değişken isteğe bağlıdır. totalSağlanırsa, geri arama işlevine yapılan ilk çağrıda ilk akümülatör değeri ( ) olarak kullanılacaktır :

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }, 1); console.log(product); // 24

Yana initialValue1 geri arama işlevi sonra sağlanır, reduce()dizinin başlarında başlar ve akım değeri olarak birinci eleman (2) ayarlar ( current). Daha sonra dizinin geri kalanını yineler, yol boyunca akümülatör değerini ve mevcut değeri günceller.

initialValue Atlandı

Eğer initialValuesağlanmaz, yineleme ile, (indeksi 1) dizideki ikinci elemanın başlayacak accumulatordizideki ilk elemana eşit ve currentValueikinci elemana eşit:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }); console.log(product);

Bu örnekte hayır initialValuesağlanmıştır, bu nedenle reduce()dizinin ilk öğesini toplayıcı değeri olarak ayarlar ( total2'ye eşittir) ve dizinin ikinci öğesini geçerli değer olarak ayarlar ( currentValue3'e eşittir). Daha sonra dizinin geri kalanı boyunca yinelenir.

Bir dizi dizgiyi azaltırken:

const strings = ['one', 'two', 'three']; const numberString = strings.reduce((acc, curr) => { return acc + ', ' + curr; }); console.log(numberString); // "one, two, three"

Yönteminiz bir sayı veya basit bir dize döndürürse , initialValuebağımsız değişkeni atlamak kolay reduce()olsa da, bir dizi veya nesne döndürürse bir tane eklemelisiniz.

Bir Nesneyi Döndürmek

Bir dizi diziyi, dizide her dizenin kaç kez göründüğünü gösteren tek bir nesneye dönüştürmek basittir. Sadece boş bir nesneyi ( {}) şu şekilde iletin initialValue:

const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"]; const petCounts = pets.reduce(function(obj, pet) { if (!obj[pet]) { // if the pet doesn't yet exist as a property of the accumulator object, // add it as a property and set its count to 1 obj[pet] = 1; } else { // pet exists, so increment its count obj[pet]++; } return obj; // return the modified object to be used as accumulator in the next iteration }, {}); // initialize the accumulator as an empty object console.log(petCounts); /* { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Dönen ve Dizi

Genel olarak, bir dizi döndürmeyi planlıyorsanız map(), genellikle daha iyi bir seçenektir. Derleyiciye (ve kodunuzu okuyan diğerlerine) orijinal dizideki her öğenin dönüştürüleceğini ve eşit uzunlukta yeni bir dizi olarak döndürüleceğini söyler.

Öte yandan, reduce()orijinal dizinin tüm elemanlarının yeni bir değere dönüştürüleceğini belirtir. Bu yeni değer, uzunluğu orijinalinden farklı olabilecek bir dizi olabilir.

Diyelim ki dizi dizisi olarak bir alışveriş listeniz var, ancak sevmediğiniz tüm yiyecekleri listeden çıkarmak istiyorsunuz. Beğenmediğiniz filter()her şeyi filtrelemek ve map()yeni bir dizi döndürmek için kullanabilirsiniz veya yalnızca şunu kullanabilirsiniz reduce():

const shoppingList = ['apples', 'mangoes', 'onions', 'cereal', 'carrots', 'eggplants']; const foodsIDontLike = ['onions', 'eggplants']; const newShoppingList = shoppingList.reduce((arr, curr) => { if (!foodsIDontLike.includes(curr)) { arr.push(curr); } return arr; }, []); console.log(newShoppingList); // ["apples", "mangoes", "cereal", "carrots"]

reduce()Yöntem hakkında bilmeniz gereken tek şey bu . İsviçre Çakısı gibi, bu iş için her zaman en iyi alet değildir. Ama gerçekten ihtiyacınız olduğunda arka cebinizde olduğu için mutlu olacaksınız.