JavaScript метод reduce()

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

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

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

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

Если массив содержит единственный существующий элемент и initialValue не передано, возвращается этот элемент без вызова функции. Если initialValue передано, а существующих элементов нет, возвращается именно initialValue.

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

Спецификация: ecma262

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьjavascript.builtins.Array.reduce

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
reduce	✓3	✓12	✓3	✓10.5	✓4	✓18	✓4	✓14	✓3.2	✓1.0	✓4.4	✓3.2

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

array.reduce(callback);
array.reduce(callback, initialValue);

Спецификация

ECMAScript: Array.prototype.reduce.

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

Исключения

Возвращаемое значение

Итоговое значение аккумулятора (накопителя), которое может иметь любой тип. Если вызовов callback не было, возвращается начальное значение или единственный существующий элемент.

Особенности

Без initialValue первый существующий элемент становится аккумулятором и не передаётся как currentValue. Пустой массив или массив только с пустыми позициями без initialValue вызывает TypeError. callback должен быть функцией. Параметра thisValue у reduce() нет.

Проверьте это поведение в примере Как начальное значение помогает обработать пустой массив.

Примеры, попробуйте сами

Как меняется аккумулятор при обходе слева направо

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

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

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

console.log('Итог:', myArray.reduce(myCallback))

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

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

Как работает reduce() без начального значения

Давайте рассмотрим следующий пример: Измените числа или начальное значение и запустите код. Сравните аккумулятор, текущий элемент и итоговую сумму.

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

const values = [1, 2, 3, 4]
const result = values.reduce((total, value) => {
    console.log('Аккумулятор:', total, 'элемент:', value)
    return total + value
})
console.log('Результат:', result)

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

Как начальное значение влияет на reduce()

Давайте рассмотрим следующий пример, в котором задействуем второй параметр метода reduce(): Измените числа или начальное значение и запустите код. Сравните аккумулятор, текущий элемент и итоговую сумму.

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

const values = [1, 2, 3, 4]
const result = values.reduce((total, value) => {
    console.log('Аккумулятор:', total, 'элемент:', value)
    return total + value
}, 35)
console.log('Результат:', result)

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

Как начальное значение помогает обработать пустой массив

Измените начальное значение 10 или добавьте элемент. Сравните результат с начальным значением и вызов без него.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Как начальное значение помогает обработать пустой массив</title>
  </head>
  <body></body>
</html>

main.js

JavaScript

const values = []
console.log(
    'С начальным значением:',
    values.reduce((total, value) => total + value, 10)
)
try {
    console.log(values.reduce((total, value) => total + value))
} catch (error) {
    console.log('Без начального значения:', error.name)
}