Array.prototype.reduce()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

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

Интерактивный пример

const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4const initialValue = 0;const sumWithInitial = array1.reduce(  (accumulator, currentValue) => accumulator + currentValue,  initialValue,);console.log(sumWithInitial);// Expected output: 10

Синтаксис

array.reduce(callback[, initialValue])

Параметры

callback

Функция, выполняющаяся для каждого элемента массива, принимает четыре аргумента:

accumulator: Аккумулятор, аккумулирующий значение, которое возвращает функцияcallback после посещения очередного элемента, либо значениеinitialValue, если оно предоставлено (смотрите пояснения ниже).
currentValue: Текущий обрабатываемый элемент массива.
indexНеобязательный: Индекс текущего обрабатываемого элемента массива.
arrayНеобязательный: Массив, для которого была вызвана функцияreduce.

initialValueНеобязательный

Необязательный параметр. Объект, используемый в качестве первого аргумента при первом вызове функцииcallback.

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

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

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

Предположим, чтоreduce() используется следующим образом:

[0, 1, 2, 3, 4].reduce(function (previousValue, currentValue, index, array) {  return previousValue + currentValue;});

Колбэк-функция будет вызвана четыре раза, аргументы и возвращаемое значение при каждом вызове будут следующими:

	`previousValue`	`currentValue`	`index`	`array`	возвращаемое значение
первый вызов	`0`	`1`	`1`	`[0, 1, 2, 3, 4]`	`1`
второй вызов	`1`	`2`	`2`	`[0, 1, 2, 3, 4]`	`3`
третий вызов	`3`	`3`	`3`	`[0, 1, 2, 3, 4]`	`6`
четвёртый вызов	`6`	`4`	`4`	`[0, 1, 2, 3, 4]`	`10`

Значение, возвращённое методомreduce() будет равным последнему результату выполнения колбэк-функции —10.

Если же вы зададите начальное значениеinitialValue, результат будет выглядеть так:

[0, 1, 2, 3, 4].reduce(function (accumulator, currentValue, index, array) {  return accumulator + currentValue;}, 10);

	`accumulator`	`currentValue`	`index`	`array`	возвращаемое значение
первый вызов	`10`	`0`	`0`	`[0, 1, 2, 3, 4]`	`10`
второй вызов	`10`	`1`	`1`	`[0, 1, 2, 3, 4]`	`11`
третий вызов	`11`	`2`	`2`	`[0, 1, 2, 3, 4]`	`13`
четвёртый вызов	`13`	`3`	`3`	`[0, 1, 2, 3, 4]`	`16`
пятый вызов	`16`	`4`	`4`	`[0, 1, 2, 3, 4]`	`20`

Значение, возвращённое методомreduce() на этот раз, конечно же, будет равным20.

Примеры

Суммирование всех значений в массиве

var total = [0, 1, 2, 3].reduce(function (a, b) {  return a + b;});// total == 6

Суммирование значений в массиве объектов

Чтобы суммировать значения, содержащиеся в массиве объектов, выдолжны указатьinitialValue, чтобы каждый элемент смог пройти черезcallback.

var initialValue = 0;var sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce(function (  accumulator,  currentValue,) {  return accumulator + currentValue.x;}, initialValue);// sum == 6

Тоже самое, но со стрелочной функцией:

var initialValue = 0;var sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce(  (accumulator, currentValue) => accumulator + currentValue.x,  initialValue,);// sum == 6

Разворачивание массива массивов

var flattened = [  [0, 1],  [2, 3],  [4, 5],].reduce(function (a, b) {  return a.concat(b);});// flattened равен [0, 1, 2, 3, 4, 5]

Пример: склеивание массивов, содержащихся в объектах массива, с использованием оператора расширения и initialValue

// friends - список из объектов(друзей)// где поле "books" - список любимых книг другаvar friends = [  { name: "Anna", books: ["Bible", "Harry Potter"], age: 21 },  { name: "Bob", books: ["War and peace", "Romeo and Juliet"], age: 26 },  { name: "Alice", books: ["The Lord of the Rings", "The Shining"], age: 18 },];// allbooks - список, который будет содержать все книги друзей +// дополнительный список указанный в initialValuevar allbooks = friends.reduce(  function (prev, curr) {    return [...prev, ...curr.books];  },  ["Alphabet"],);// allbooks = ["Alphabet", "Bible", "Harry Potter", "War and peace",// "Romeo and Juliet", "The Lord of the Rings", "The Shining"]

Полифил

МетодArray.prototype.reduce() был добавлен к стандарту ECMA-262 в 5-м издании; поэтому он может отсутствовать в других реализациях стандарта. Вы можете работать с ним, добавив следующий код в начало ваших скриптов, он позволяет использоватьreduce() в реализациях, которые не поддерживают этот метод.

// Шаги алгоритма ECMA-262, 5-е издание, 15.4.4.21// Ссылка (en): http://es5.github.io/#x15.4.4.21// Ссылка (ru): http://es5.javascript.ru/x15.4.html#x15.4.4.21if (!Array.prototype.reduce) {  Array.prototype.reduce = function (callback /*, initialValue*/) {    "use strict";    if (this == null) {      throw new TypeError("Array.prototype.reduce called on null or undefined");    }    if (typeof callback !== "function") {      throw new TypeError(callback + " is not a function");    }    var t = Object(this),      len = t.length >>> 0,      k = 0,      value;    if (arguments.length >= 2) {      value = arguments[1];    } else {      while (k < len && !(k in t)) {        k++;      }      if (k >= len) {        throw new TypeError("Reduce of empty array with no initial value");      }      value = t[k++];    }    for (; k < len; k++) {      if (k in t) {        value = callback(value, t[k], k, t);      }    }    return value;  };}