Végső útmutató a JavaScript tömb módszerekhez - Csökkentés

A reduce()módszer az értékek tömbjét egyetlen értékre redukálja. A visszaadott egyetlen érték bármilyen típusú lehet.

reduce()olyan, mint a svájci hadsereg kései. Míg mások kedvelik map()és filter()biztosítják a specifikus funkciókat, reduce()felhasználhatók egy bemeneti tömb átalakítására bármely kívánt kimenetre, mindez megőrizve az eredeti tömböt.

Szintaxis

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - a visszaküldött új szám, tömb, karakterlánc vagy objektum
  • arr - a tömb működtetése
  • accumulator - az előző iteráció visszaadott értéke
  • currentValue - a tömb aktuális eleme
  • index - az aktuális tétel indexe
  • array- az eredeti tömb, amelyre reduce()hívták
  • initialValue - egy szám, tömb, karakterlánc vagy objektum, amely az esetleges kimenet kiinduló értékeként szolgál

Példák

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

All About initialValue

initialValue Biztosítani

Az initialValueérvelés nem kötelező. Ha rendelkezésre áll, akkor totala visszahívási funkció első hívásakor a kezdeti akkumulátor értékeként ( ) használják:

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

Mivel az initialValue1 értéket a visszahívási funkció után adjuk reduce()meg, a tömb elején kezdődik, és az első elemet (2) aktuális értékként ( current) állítja be . Ezután a tömb többi részében végigvezet, végig frissítve az akkumulátor és az aktuális értéket.

initialValue Kihagyva

Ha initialValuenincs megadva, akkor az iteráció a tömb második eleménél kezdődik (az 1. indexnél), accumulatoregyenlő a tömb első elemével és currentValueegyenlő a második elemmel:

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

Ebben a példában a no meg initialValuevan adva, ezért reduce()a tömb első elemét állítja be akkumulátorértékként ( totalegyenlő 2-vel), és a tömb második elemét állítja aktuális értékként ( currentValueegyenlő 3-mal). Ezután a tömb többi részén keresztül ismétlődik.

A stringek tömbjének csökkentésekor:

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

Bár könnyű elhagyni az initialValueargumentumot, ha a reduce()metódus számot vagy egyszerű karakterláncot ad vissza, be kell adnia egyet, ha tömböt vagy objektumot ad vissza.

Objektum visszaküldése

A karakterláncok tömbjének átalakítása egyetlen objektummá, amely megmutatja, hogy az egyes húrok hányszor jelennek meg a tömbben, egyszerű. Csak adja át egy üres objektumot ( {}), mint 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 } */

Visszatérés és tömb

Általában, ha egy tömb visszaküldését tervezi, map()gyakran jobb megoldás. Azt mondja a fordítónak (és másoknak, akik a kódodat olvassák), hogy az eredeti tömb minden eleme átalakul, és új, azonos hosszúságú tömbként kerül visszaadásra.

Másrészt reduce()azt jelzi, hogy az eredeti tömb minden eleme átalakul egy új értékgé. Ez az új érték lehet egy tömb, amelynek hossza eltérhet az eredetitől.

Tegyük fel, hogy bevásárló listája van stringek tömbjeként, de el szeretné távolítani az összes nem tetsző ételt a listából. Használhatja filter()mindazok kiszűrésére, amelyek nem tetszik, és map()új karakterlánc-tömböt adhat vissza, vagy használhatja 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"]

Ennyit kell tudni a reduce()módszerről. Mint egy svájci kés, ez sem mindig a legjobb eszköz a munkához. De örülni fog, ha a hátsó zsebében van, amikor valóban szüksége van rá.