Крайното ръководство за методите с масиви на JavaScript - Намаляване

В reduce()метода намалява масив от стойности до само една стойност. Върнатата единична стойност може да бъде от всякакъв тип.

reduce()е като швейцарския армейски нож от масивни методи. Докато други харесват map()и filter()предоставят специфична функционалност, reduce()могат да се използват за трансформиране на входен масив във всеки изход, който желаете, като същевременно запазват оригиналния масив.

Синтаксис

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - новото число, масив, низ или обект, който се връща
  • arr - оперираният масив
  • accumulator - върнатата стойност на предишната итерация
  • currentValue - текущият елемент в масива
  • index - индексът на текущата позиция
  • array- оригиналният масив, на който reduce()е извикан
  • initialValue - число, масив, низ или обект, който служи като начална стойност за евентуалния изход

Примери

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

Всичко за initialValue

initialValue Осигурено

В initialValueаргумент не е задължително. Ако е предоставена, тя ще се използва като начална стойност на акумулатора ( total) при първото извикване на функцията за обратно извикване:

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

Тъй като initialValue1 от 1 се предоставя след функцията за обратно извикване, reduce()стартира в началото на масива и задава първия елемент (2) като текуща стойност ( current). След това преминава през останалата част от масива, като актуализира стойността на акумулатора и текущата стойност по пътя.

initialValue Пропуснато

Ако initialValueне е предоставена, итерацията ще започне от втория елемент в масива (с индекс 1), с accumulatorравен на първия елемент в масива и currentValueравен на втория елемент:

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

В този пример не initialValueсе предоставя no , затова reduce()задава първия елемент на масива като стойност на акумулатора ( totalравен е на 2) и задава втория елемент на масива като текуща стойност ( currentValueравен на 3). След това преминава през останалата част от масива.

Когато намалявате масив от низове:

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

Въпреки че е лесно да пропуснете initialValueаргумента, ако reduce()методът ви ще върне число или обикновен низ, трябва да включите такъв, ако ще върне масив или обект.

Връщане на обект

Трансформирането на масив от низове в един обект, който показва колко пъти всеки низ се появява в масива, е просто. Просто предайте празен обект ( {}) като 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 } */

Връщане и масив

Като цяло, ако планирате да върнете масив, map()често е по-добър вариант. Той съобщава на компилатора (и други, които четат вашия код), че всеки елемент в оригиналния масив ще бъде трансформиран и върнат като нов масив с еднаква дължина.

От друга страна, reduce()показва, че всички елементи на оригиналния масив ще се трансформират в нова стойност. Тази нова стойност може да бъде масив, чиято дължина може да се различава от оригинала.

Да кажем, че имате списък за пазаруване като масив от низове, но искате да премахнете всички храни, които не харесвате, от списъка. Можете да използвате, за filter()да филтрирате всичко, което не ви харесва, и map()да върнете нов масив от низове, или можете просто да използвате 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()метода. Подобно на швейцарския армейски нож, той не винаги е най-добрият инструмент за работата. Но ще се радвате да го имате в задния си джоб, когато наистина имате нужда от него.