Krajnji vodič za metode JavaScript niza - Smanjite

Programiranje

reduce()Način smanjuje niz vrijednosti dolje samo jedne vrijednosti. Vraćena pojedinačna vrijednost može biti bilo koje vrste.

reduce()je poput švicarskog noža array metoda. Dok se drugima sviđa map()i filter()pruža određena funkcionalnost, reduce()mogu se koristiti za pretvaranje ulaznog niza u bilo koji izlaz koji želite, a sve uz očuvanje izvornog niza.

Sintaksa

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - novi broj, niz, niz ili objekt koji se vraća
  • arr - niz koji se operira
  • accumulator - vraćena vrijednost prethodne iteracije
  • currentValue - trenutna stavka u polju
  • index - indeks trenutne stavke
  • array- izvorni niz na kojem reduce()je pozvan
  • initialValue - broj, niz, niz ili objekt koji služi kao početna vrijednost za eventualni izlaz

Primjeri

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

Sve o initialValue

initialValue Pod uvjetom

initialValueArgument je neobavezan. Ako je naveden, koristit će se kao početna vrijednost akumulatora ( total) u prvom pozivu funkcije povratnog poziva:

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

Budući da je initialValue1 nakon funkcije povratnog poziva, reduce()započinje na početku niza i postavlja prvi element (2) kao trenutnu vrijednost ( current). Zatim se ponavlja kroz ostatak niza, usput ažurirajući vrijednost akumulatora i trenutnu vrijednost.

initialValue Izostavljeno

Ako initialValuenije naveden, iteracija će započeti s drugim elementom u polju (s indeksom 1), s accumulatorjednakim prvom elementu u polju i currentValuejednakim drugom elementu:

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

U ovom primjeru nije initialValuenaveden no, pa reduce()prvi element niza postavlja kao vrijednost akumulatora ( totaljednak je 2), a drugi element niza postavlja kao trenutnu vrijednost ( currentValuejednak je 3). Zatim se ponavlja kroz ostatak niza.

Prilikom smanjivanja niza nizova:

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

Iako je lako izostaviti initialValueargument ako će vaša reduce()metoda vratiti broj ili jednostavan niz, trebali biste ga uključiti ako će vratiti niz ili objekt.

Vraćanje objekta

Pretvaranje niza nizova u jedan objekt koji pokazuje koliko se puta svaki niz pojavljuje u nizu je jednostavno. Samo dodajte prazan objekt ( {}) kao 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 } */

Povratak i niz

Općenito, ako planirate vratiti niz, map()često je bolja opcija. Kompajleru (i drugima koji čitaju vaš kôd) govori da će svaki element u izvornom nizu biti transformiran i vraćen kao novi niz jednake duljine.

S druge strane, reduce()ukazuje da će se svi elementi izvornog polja transformirati u novu vrijednost. Ta nova vrijednost mogla bi biti niz čija duljina može biti drugačija od izvorne.

Recimo da imate popis za kupnju kao niz žica, ali želite s popisa ukloniti svu hranu koja vam se ne sviđa. Možete koristiti filter()za filtriranje svega što vam se ne sviđa i map()za vraćanje novog niza nizova, ili možete jednostavno upotrijebiti 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"]

To je sve što trebate znati o reduce()metodi. Poput švicarske vojske, to nije uvijek najbolji alat za posao. No, bit će vam drago imati ga u stražnjem džepu kad vam zaista treba.