Array.prototype.reduce()

Redukovat() je některými začátečníky v Javascriptu považováno za jednu z nejvíce matoucích metod pole. V tomto tutoriálu představím metodu způsobem, který je snadno srozumitelný, takže můžete začít experimentovat s reduce() ve svém vlastním kódu. Začneme makroskopickým pohledem na metodu a poté ji rozložíme na stravitelné kousky velikosti sousta, abychom pochopili, jak každá jednotlivá část funguje.

Popis

reduce() je metoda pole, která provádí funkci zpětného volání "reduktor" na každém prvku cílového pole. Funkce zpětného volání "reduktor" musí vrátit jednu hodnotu pro použití v další metodě zpětného volání na každém následujícím prvku pole.

Vrátí

Po reduce() iteruje přes poslední prvek pole, metoda vrátí výsledek konečné funkce zpětného volání "reducer".

Osobně interpretuji, že metoda se nazývá reduce protože bude iterovat každý jednotlivý prvek pole, ale nakonec metoda vrátí pouze jednu hodnotu po procházení celého pole.

Destruktivní?

reduce() metoda sama o sobě přímo nezmutuje pole, na kterém je volána, takže není považována za destruktivní metodu. Je však důležité poznamenat, že funkce zpětného volání může volat destruktivní metody, které by mohly zmutovat původní pole.

Syntaxe

Syntaxe reduce() samotná funkce je velmi jednoduchý:

const numbers = [1, 2, 3];
numbers.reduce(callbackFn, initialValue);

Jak můžete vidět výše, syntaxe pro implementaci reduce() není vůbec matoucí. Zjistil jsem složitost použití reduce() vychází z požadavků "reduktoru" callbackFn která se přenese do metody. Pojďme se tedy nyní ponořit do syntaxe funkce zpětného volání.

Zde je příklad funkce zpětného volání "reduktor", která sečte všechny prvky pole:

const reducer = function(accumulator, currentElement) {
  return accumulator + currentElement;
}

Každý prvek funguje následovně:

• accumulator :Tento parametr "shromažďuje" výsledky každého provedení funkce zpětného volání. Hodnota vrácená předchozí funkcí zpětného volání se při každém provedení funkce zpětného volání stane hodnotou akumulátoru.

• currentElement :Tento parametr představuje hodnotu aktuálního prvku pole, který je iterován.

Jste stále zmateni?

Nebojte se, pojďme společně na jednoduchý příklad a já vám vysvětlím, jak všechny tyto pohyblivé části spolupracují v reduce() metoda.

Příklad rozdělení

Nejzákladnější implementace reduce() je vrátit součet všech prvků v poli. Pro začátek si shrňme následující lichá čísla.

const numbers = [1, 3, 5, 7];

const reducer = function(accumulator, currentElement) {
  return accumulator + currentElement;
}

console.log(numbers.reduce(reducer));

Tento fragment kódu „redukuje“ pole čísel na jediné číslo jejich sečtením. Očekávaný výsledek je 16 protože 1 + 3 + 5 + 7 = 16 .

Pojďme si tento příklad rozebrat, aby to bylo jednodušší.

• Pro začátek zavoláme reduce na numbers pole a předáme funkci zpětného volání reducer jako parametr do reduce .
• Nepředali jsme druhý volitelný parametr initialValue , do reduce() funkce. Takže pro první spuštění reducer accumulator je nastavena na hodnotu prvního prvku v poli a currentElement je nastavena na hodnotu druhého prvku v poli.

Zde je první volání reduce() vypadá jako s reducer parametry zpětného volání nahrazeny prvky pole:

reducer(numbers[0], numbers[1]) {
  return numbers[0] + numbers[1];
}

Nyní zapsáno s hodnotami namísto parametrů:

reducer(1, 3) {
  return 1 + 3;
}

Po úvodním volání reducer funkce zpětného volání, reduce() iteruje na další prvek pole spouštějící reducer funkci zpětného volání znovu a znovu, dokud nedosáhne konce pole.

Zde je rozpis dalšího volání reducer funkce zpětného volání. Tentokrát accumulator je nastavena tak, aby se rovnala vrácenému výsledku předchozí funkce zpětného volání.

reducer(4, numbers[2]) {
  return 4 + numbers[2];
}

Nyní zapsáno s hodnotami namísto parametrů:

reducer(4, 5) {
  return 4 + 5;
}

Už dostáváte vzor? accumulator jednoduše shromáždí výsledek předchozí funkce zpětného volání a použije jej při dalším provedení zpětného volání. Takže pro naše poslední volání příkladu accumulator bude rovno 9 protože to je vrácená hodnota předchozí funkce zpětného volání.

reducer(9, numbers[3]) {
  return 9 + numbers[3];
}

Nyní zapsáno s hodnotami namísto parametrů:

reducer(9, 7) {
  return 9 + 7;
}

Toto bylo poslední volání reducer funkce zpětného volání, protože jsme nyní iterovali každý prvek pole, takže 16 bude hodnota vrácená z původního reduce metoda volaná na numbers pole.

Další použití funkce reduction()

Jak jste viděli z výše uvedeného příkladu, reduce() je velmi efektivní při vracení součtu všech prvků v poli. Možná se ptáte, jaké další praktické využití má reduce() . Zde je několik:

• Součet hodnot v poli objektů
• Vyrovnejte pole polí
• Nahradit .filter().map()
• A další!

Výzva

Chcete více praxe? Zkuste nakódovat následující výzvu:

Using reduce(), write an implementation that will return the sum of all even numbers in an array. 

Hint: You must use a conditional statement in your callback function.