JavaScript метод reduce()

Определение и применение

JavaScript метод reduce() позволяет вызвать функцию обратного вызова один раз для каждого элемента массива в порядке возрастания индекса (слева-направо). Возвращаемое значение функции предоставляется как аргумент при следующем вызове функции, в результате чего возвращаемое значение последнего вызова становится возвращаемым значением метода (значение вычисляется из элементов массива).

Для вызова функции обратного вызова в порядке убывания индекса (справа-налево) вы можете воспользоваться методом reduceRight().

Обращаю Ваше внимание, что функция обратного вызова, переданная в качестве параметра метода reduce() не будет вызвана для удалённых, или пропущенных элементов массива. Метод reduce() не изменяет массив для которого он был вызван (хотя функция обратного вызова может это делать).

Диапазон элементов, обрабатываемых с помощью метода reduce() устанавливается перед первым вызовом функции обратного вызова. Если элементы были добавлены к массиву после её вызова, то на таких элементах функция вызвана не будет.

Если массив имеет только один элемент (независимо от позиции) и не указано initialValue (значение, используемое в качестве первого аргумента первого вызова функции обратного вызова), или если initialValue предоставляется, но массив пуст, то значение этого элемента будет возвращено без вызова функции обратного вызова.

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
reduce()	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

// только с callback функцией
array.reduce( callback ); 
// с callback функцией и первоначальным значением
array.reduce( callback, initialValue ); 

// параметры метода 
callback - function( total, currentValue, currentIndex, arr ) // обязательный параметр 
initialValue  // необязательный параметр 

// параметры функции обратного вызова 
total         // обязательный параметр функции 
currentValue  // обязательный параметр функции 
currentIndex  // необязательный параметр функции 
arr           // необязательный параметр функции 

Версия JavaScript

Значения параметров

Исключения

Пример использования

В следующем примере мы с Вами детально рассмотрим принцип работы JavaScript метода reduce() и получим сумму всех элементов массива:

let myArray = [11,12,13,14,15]; // инициализируем переменную, содержащую массив чисел
let myCallback = ( total, currentValue, currentIndex, arr ) => { // инициализируем переменную, содержащую стрелочную функцию, принимающую четыре параметра
    console.log( total, currentValue, currentIndex, arr ); // выводим в консоль значение параметров функции
    return total + currentValue; // возвращаем значение, полученное от суммы первого параметра со вторым
}

Для начала мы инициализируем переменную, содержащую массив чисел и переменную, содержащую стрелочную функцию, принимающую четыре параметра. Наша функция будет возвращать значение, полученное от суммы первого параметра со вторым параметром.

Первый параметр впоследствии будет выступать в роли накопителя возвращаемых значений функции, а второй параметр будет соответствовать текущему значению элемента массива по которому мы с помощью метода reduce() будем проходить. Кроме того, для демонстрации работы метода reduce() мы будем выводить в консоль значения всех параметров функции.

Давайте рассмотрим следующий пример:

let result = myArray.reduce( myCallback ); // вызываем метод только с callback функцией

11 12 1 [11, 12, 13, 14, 15]   // первый вызов функции обратного вызова
23 13 2 [11, 12, 13, 14, 15]   // второй вызов функции обратного вызова	
36 14 3 [11, 12, 13, 14, 15]   // третий вызов функции обратного вызова
50 15 4 [11, 12, 13, 14, 15]   // четвертый вызов функции обратного вызова
console.log( result ); // переменная содержит значение 65

В этом примере с помощью метода reduce() мы получили сумму всех элементов массива в порядке возрастания индекса. Обратите внимание, что при первом вызове функции обратного вызова параметр total будет равен первому значению в массиве, а параметр currentValue будет равен второму.

Давайте рассмотрим следующий пример, в котором задействуем второй параметр метода reduce():

let resultWithInitialValue = myArray.reduce( myCallback, 35 ); // вызываем метод с callback функцией и первоначальным значением

35 11 0 [11, 12, 13, 14, 15]   // первый вызов функции обратного вызова
46 12 1 [11, 12, 13, 14, 15]   // второй вызов функции обратного вызова	
58 13 2 [11, 12, 13, 14, 15]   // третий вызов функции обратного вызова
71 14 3 [11, 12, 13, 14, 15]   // четвертый вызов функции обратного вызова
85 15 4 [11, 12, 13, 14, 15]   // пятый вызов функции обратного вызова
console.log( resultWithInitialValue ); // переменная содержит значение 100

В этом примере мы дополнительно передали методу reduce() второй параметр, который будет выступать в роли значения, используемого в качестве первого аргумента первого вызова функции обратного вызова. В предыдущем примере в качестве этого значения выступал первый элемент массива. Обратите внимание, что при использовании дополнительного параметра количество вызовов функции обратного вызова было увеличено на один.