Den ultimative guide til JavaScript Array Methods - Reducer

Den reduce()reducerer fremgangsmåden et array af værdier ned til blot én værdi. Den enkeltværdi, der returneres, kan være af enhver type.

reduce()er som den schweiziske hærkniv af matrixmetoder. Mens andre kan lide map()og filter()giver specifik funktionalitet, reduce()kan de bruges til at omdanne et input-array til ethvert output, du ønsker, alt imens det oprindelige array bevares.

Syntaks

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - det nye nummer, array, streng eller objekt, der returneres
  • arr - det array, der opereres
  • accumulator - den returnerede værdi af den tidligere iteration
  • currentValue - det aktuelle element i arrayet
  • index - indekset for den aktuelle vare
  • array- den oprindelige matrix, som reduce()blev kaldt til
  • initialValue - et tal, et array, en streng eller et objekt, der tjener som en indledende værdi for den endelige output

Eksempler

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

Alt om initialValue

initialValue Stillet til rådighed

Den initialValueargument er valgfri. Hvis det findes, vil det blive brugt som den oprindelige akkumuleringsværdi ( total) i det første opkald til tilbagekaldsfunktionen:

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

Da initialValueaf 1 tilvejebringes efter tilbagekaldsfunktionen, reduce()starter starten i arrayet og indstiller det første element (2) som den aktuelle værdi ( current). Derefter gentages det gennem resten af ​​arrayet og opdaterer akkumulatorværdien og den aktuelle værdi undervejs.

initialValue Udeladt

Hvis initialValueikke er angivet, starter iteration ved det andet element i arrayet (ved indeks 1) med accumulatorlig med det første element i arrayet og currentValuelig med det andet element:

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

I dette eksempel gives der ingen initialValue, så reduce()indstiller det første element i arrayet som akkumulatorværdien ( totaler lig med 2) og sætter det andet element i arrayet som den aktuelle værdi ( currentValueer lig med 3). Derefter gentages det gennem resten af ​​arrayet.

Når du reducerer en række strenge:

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

Selvom det er let at udelade initialValueargumentet, hvis din reduce()metode returnerer et tal eller en simpel streng, skal du medtage et, hvis det returnerer et array eller objekt.

Returnering af et objekt

Det er enkelt at omdanne en række strenge til et enkelt objekt, der viser, hvor mange gange hver streng vises i arrayet. Bare send et tomt objekt ( {}) som 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 } */

Vender tilbage og matrix

Generelt, hvis du planlægger at returnere en matrix, map()er det ofte en bedre mulighed. Det fortæller kompilatoren (og andre, der læser din kode), at hvert element i den oprindelige matrix transformeres og returneres som et nyt array med samme længde.

På den anden side reduce()angiver, at alle elementer i den oprindelige matrix transformeres til en ny værdi. Den nye værdi kan være en matrix, hvis længde kan være anderledes end originalen.

Sig, at du har en indkøbsliste som en række strenge, men du vil fjerne alle de fødevarer, du ikke kan lide, fra listen. Du kan bruge filter()til at filtrere alt, hvad du ikke kan lide, og map()returnere en ny række strenge, eller du kan bare bruge 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"]

Det er alt hvad du behøver at vide om reduce()metoden. Som en schweizisk hærkniv er det ikke altid det bedste værktøj til jobbet. Men du vil være glad for at have det i baglommen, når du virkelig har brug for det.