JavaScript метод reduce()

JavaScript Array

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

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

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


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


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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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

ECMAScript 5.1 (Реализовано в JavaScript 1.8)

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

ПараметрОписание
callback Функция обратного вызова, которая будет выполнена один раз для каждого элемента массива в порядке возрастания индекса.

Функция принимает следующие параметры:

  • total - значение, используемое в качестве первого аргумента первого вызова функции обратного вызова (если указан параметр метода initialValue), или будет равно первому значению в массиве, а параметр currentValue будет равен второму. Параметр выступает в роли накопителя возвращаемых значений и соответствует ранее возвращенному значению функции обратного вызова. Обязательный параметр.
  • currentValue - значение текущего элемента. Обязательный параметр.
  • currentIndex - индекс массива текущего элемента. Начинается с индекса 0, если указан параметр initialValue, в противном случае с индекса 1. Необязательный параметр.
  • arr - массив, к которому принадлежит текущий элемент (по которому происходит проход). Необязательный параметр.

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

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

Исключения

Тип исключенияОписание
TypeErrorВозникает в том случае, если метод вызывается на пустом массиве и при этом не указано значение параметра initialValue.

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

В следующем примере мы с Вами детально рассмотрим принцип работы 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() второй параметр, который будет выступать в роли значения, используемого в качестве первого аргумента первого вызова функции обратного вызова. В предыдущем примере в качестве этого значения выступал первый элемент массива. Обратите внимание, что при использовании дополнительного параметра количество вызовов функции обратного вызова было увеличено на один.

JavaScript Array
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.