JavaScript метод reduce() позволяет вызвать функцию обратного вызова один раз для каждого элемента массива в порядке возрастания индекса (слева-направо). Возвращаемое значение функции предоставляется как аргумент при следующем вызове функции, в результате чего возвращаемое значение последнего вызова
Для вызова функции обратного вызова в порядке убывания индекса (справа-налево) вы можете воспользоваться методом reduceRight() .
Обращаю Ваше внимание, что функция обратного вызова, переданная в качестве параметра метода reduce() не будет вызвана для удалённых, или пропущенных элементов массива. Метод reduce() не изменяет массив для которого он был вызван (хотя функция обратного вызова может это делать).
Диапазон элементов, обрабатываемых с помощью метода reduce() устанавливается перед первым вызовом функции обратного вызова. Если элементы были добавлены к массиву после её вызова, то на таких элементах функция вызвана не будет.
Если массив имеет только один элемент (независимо от позиции) и не указано initialValue (значение, используемое в качестве первого аргумента первого вызова функции обратного вызова), или если initialValue предоставляется, но массив пуст, то значение этого элемента будет возвращено без вызова функции обратного вызова.
Поддержка браузерами| reduce() | Да | Да | Да | Да | 9.0 | Да |
| callback | Функция обратного вызова, которая будет выполнена один раз для каждого элемента массива в порядке возрастания
индекса. Функция принимает следующие параметры:
Возвращаемое значение функции предоставляется как аргумент при следующем вызове функции, в результате чего возвращаемое значение последнего вызова становится возвращаемым значением метода (значение вычисляется из элементов массива). |
| initialValue | Значение, используемое в качестве первого аргумента первого вызова функции обратного вызова. Если начальное значение не указано, то будет использован первый элемент массива. Необязательный параметр. |
В следующем примере мы с Вами детально рассмотрим принцип работы JavaScript метода reduce() и получим сумму всех элементов массива:
let myArray = ; // инициализируем переменную, содержащую массив чисел 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 23 13 2 36 14 3 50 15 4 console .log(result ); // переменная содержит значение 65В этом примере с помощью метода reduce() мы получили сумму всех элементов массива в порядке возрастания индекса. Обратите внимание, что при первом вызове функции обратного вызова параметр total будет равен первому значению в массиве, а параметр currentValue будет равен второму .
Давайте рассмотрим следующий пример, в котором задействуем второй параметр метода reduce() :
let resultWithInitialValue = myArray .reduce(myCallback , 35 ); // вызываем метод с callback функцией и первоначальным значением 35 11 0 // первый вызов функции обратного вызова 46 12 1 // второй вызов функции обратного вызова 58 13 2 // третий вызов функции обратного вызова 71 14 3 // четвертый вызов функции обратного вызова 85 15 4 // пятый вызов функции обратного вызова console .log(resultWithInitialValue ); // переменная содержит значение 100В этом примере мы дополнительно передали методу reduce() второй параметр, который будет выступать в роли значения, используемого в качестве первого аргумента первого вызова функции обратного вызова. В предыдущем примере в качестве этого значения выступал первый элемент массива. Обратите внимание, что при использовании дополнительного параметра количество вызовов функции обратного вызова было увеличено на один .
М етод reduce() в javascript применяет функцию одновременно к двум значениям массива (слева направо), чтобы уменьшить его до одного значения.СинтаксисЕго синтаксис выглядит следующим образом:
Array.reduce(callback[, initialValue]);
Детали параметров- callback – функция для каждого значения в массиве.
- initialValue – объект, который будет использоваться в качестве первого аргумента для первого вызова обратного вызова.
Возвращает одиночное значение массива.
СовместимостьЭтот метод является расширением JavaScript стандарта ECMA-262; как таковой, он не может присутствовать в других реализациях стандарта. Чтобы он работал, вам нужно добавить следующий код в верхней части вашего скрипта.
If (!Array.prototype.reduce) { Array.prototype.reduce = function(fun /*, initial*/) { var len = this.length; if (typeof fun != "function" ) throw new TypeError(); // нет возвращаемого значения, если нет начального значения и пустой массив if (len == 0 && arguments.length == 1) throw new TypeError(); var i = 0; if (arguments.length >= 2) { var rv = arguments; } else { do { if (i in this) { rv = this; break; } // если массив не содержит значений, возвращаемое начальное значение не возвращается if (++i > < len; i++) { if (i in this) rv = fun.call(null, rv, this[i], i, this); } return rv; }; }
ПримерПопробуйте следующий пример.
JavaScript - Массивы. Метод reduce if (!Array.prototype.reduce) { Array.prototype.reduce = function(fun /*, initial*/) { var len = this.length; if (typeof fun != "function" ) throw new TypeError(); // нет возвращаемого значения, если нет начального значения и пустой массив if (len == 0 && arguments.length == 1) throw new TypeError(); var i = 0; if (arguments.length >= 2) { var rv = arguments; } else { do { if (i in this) { rv = this; break; } // если массив не содержит значений, возвращаемое начальное значение не возвращается if (++i >= len) throw new TypeError(); } while (true); } for (; i < len; i++) { if (i in this) rv = fun.call(null, rv, this[i], i, this); } return rv; }; } var total = .reduce(function(a, b){ return a + b; }); document.write("всего: " + total);
Получить сумму чисел в массиве:
Var numbers = ;
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
Больше "Try it Yourself" примеры ниже.
Определение и использованиеclass="color_h1">reduce () метод уменьшает массив к единственному значению.
reduce() метод выполняет функцию при условии для каждого значения массива (from left-to-right) .
Возвращаемое значение функции хранится в накопителе (result/total) .
Примечание: уменьшить () не выполняет функции для элементов массива без значений.
Поддержка браузеровЧисла в таблице указать первую версию браузера, который полностью поддерживает метод.
| reduce() | да | 9,0 | 3.0 | 4 | 10,5 |
Значения параметров
Круглое все число является массивом, а также отображать сумму.
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a Pull Request.
The reducer function takes four arguments:
Your reducer function"s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.
Syntax arr .reduce(callback (accumulator , currentValue [, index [, array ]])[, initialValue ]) Parameters callbackA function to execute on each element in the array (except for the first, if no initialValue is supplied).
It takes four arguments:
Accumulator The accumulator accumulates callback "s return values. It is the accumulated value previously returned in the last invocation of the callback-or initialValue , if it was supplied (see below). currentValue The current element being processed in the array. index Optional The index of the current element being processed in the array. Starts from index 0 if an initialValue is provided. Otherwise, it starts from index 1 . array Optional The array reduce() was called upon. initialValue Optional A value to use as the first argument to the first call of the callback . If no initialValue is supplied, the first element in the array will be used and skipped. Calling reduce() on an empty array without an initialValue will throw a TypeError .
Return valueThe single value that results from the reduction.
DescriptionThe reduce() method executes the callback once for each assigned value present in the array, taking four arguments:
The first time the callback is called, accumulator and currentValue can be one of two values. If initialValue is provided in the call to reduce() , then accumulator will be equal to initialValue , and currentValue will be equal to the first value in the array. If no initialValue is provided, then accumulator will be equal to the first value in the array, and currentValue will be equal to the second.
Note: If initialValue is not provided, reduce() will execute the callback function starting at index 1 , skipping the first index. If initialValue is provided, it will start at index 0 .
If the array is empty and no initialValue is provided, TypeError will be thrown.
If the array only has one element (regardless of position) and no initialValue is provided, or if initialValue is provided but the array is empty, the solo value will be returned without calling callback .
It is usually safer to provide an initialValue , because there are three possible outputs without initialValue , as shown in the following example:
Let maxCallback = (acc, cur) => Math.max(acc.x, cur.x) let maxCallback2 = (max, cur) => Math.max(max, cur) // reduce() without initialValue [ { x: 22 }, { x: 42 } ].reduce(maxCallback) // 42 [ { x: 22 } ].reduce(maxCallback) // { x: 22 } .reduce(maxCallback) // TypeError // map/reduce; better solution, also works for empty or larger arrays [ { x: 22 }, { x: 42 } ].map(el => el.x) .reduce(maxCallback2, -Infinity)
How reduce() worksSuppose the following use of reduce() occurred:
Reduce(function(accumulator, currentValue, currentIndex, array) { return accumulator + currentValue })
The callback would be invoked four times, with the arguments and return values in each call being as follows:
| 0 | 1 | 1 | 1 | |
| 1 | 2 | 2 | 3 | |
| 3 | 3 | 3 | 6 | |
| 6 | 4 | 4 | 10 |
The value returned by reduce() would be that of the last callback invocation (10).
Const numbers = [-5, 6, 2, 0,]; const doubledPositiveNumbers = numbers.reduce((accumulator, currentValue) => { if (currentValue > 0) { const doubled = currentValue * 2; accumulator.push(doubled); } return accumulator; }, ); console.log(doubledPositiveNumbers); //
Running Promises in Sequence /** * Runs promises from array of functions that can return promises * in chained manner * * @param {array} arr - promise arr * @return {Object} promise object */ function runPromiseInSequence(arr, input) { return arr.reduce((promiseChain, currentFunction) => promiseChain.then(currentFunction), Promise.resolve(input)) } // promise function 1 function p1(a) { return new Promise((resolve, reject) => { resolve(a * 5) }) } // promise function 2 function p2(a) { return new Promise((resolve, reject) => { resolve(a * 2) }) } // function 3 - will be wrapped in a resolved promise by .then() function f3(a) { return a * 3 } // promise function 4 function p4(a) { return new Promise((resolve, reject) => { resolve(a * 4) }) } const promiseArr = runPromiseInSequence(promiseArr, 10) .then(console.log) // 1200 Function composition enabling piping // Building-blocks to use for composition const double = x => x + x const triple = x => 3 * x const quadruple = x => 4 * x // Function composition enabling pipe functionality const pipe = (...functions) => input => functions.reduce((acc, fn) => fn(acc), input) // Composed functions for multiplication of specific values const multiply6 = pipe(double, triple) const multiply9 = pipe(triple, triple) const multiply16 = pipe(quadruple, quadruple) const multiply24 = pipe(double, triple, quadruple) // Usage multiply6(6) // 36 multiply9(9) // 81 multiply16(16) // 256 multiply24(10) // 240 Write map using reduce if (!Array.prototype.mapUsingReduce) { Array.prototype.mapUsingReduce = function(callback, thisArg) { return this.reduce(function(mappedArray, currentValue, index, array) { mappedArray = callback.call(thisArg, currentValue, index, array) return mappedArray }, ) } } .mapUsingReduce((currentValue, index, array) => currentValue + index + array.length) // Polyfill // Production steps of ECMA-262, Edition 5, 15.4.4.21 // Reference: http://es5.github.io/#x15.4.4.21 // https://tc39.github.io/ecma262/#sec-array.prototype.reduce if (!Array.prototype.reduce) { Object.defineProperty(Array.prototype, "reduce", { value: function(callback /*, initialValue*/) { 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"); } // 1. Let O be ? ToObject(this value). var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // Steps 3, 4, 5, 6, 7 var k = 0; var value; if (arguments.length >= 2) { value = arguments; } else { while (k < len && !(k in o)) { k++; } // 3. If len is 0 and initialValue is not present, // throw a TypeError exception. if (k >= len) { throw new TypeError("Reduce of empty array " + "with no initial value"); } value = o; } // 8. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kPresent be ? HasProperty(O, Pk). // c. If kPresent is true, then // i. Let kValue be ? Get(O, Pk). // ii. Let accumulator be ? Call(// callbackfn, undefined, // « accumulator, kValue, k, O »). if (k in o) { value = callback(value, o[k], k, o); } // d. Increase k by 1. k++; } // 9. Return accumulator. return value; } }); }Caution: If you need to support truly obsolete JavaScript engines that do not support Object.defineProperty() , it is best not to polyfill Array.prototype methods at all, as you cannot make them non-enumerable .
Specifications| ECMAScript 5.1 (ECMA-262) |
Standard | Initial definition. Implemented in JavaScript 1.8. | ||||||||||
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Array.prototype.reduce()" in that specification. |
Standard | |||||||||||
| Safari | Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js||||||||||||
| Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3 | IE Full support 9 | Opera Full support 10.5 | Safari Full support 4.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 4 | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению.
Спецификация: ECMAScript 5.1 (ECMA-262) СинтаксисArray.reduce(function callback(total, currentValue, currentIndex, arr), initialValue)
Параметры callback Функция, выполняющаяся для каждого элемента массива, принимает четыре аргумента:- total – значение из предыдущего вызова функции обратного вызова. Если значение initialValue предоставляется в метод reduce , то total является значением initialValue при первом вызове функции.
- currentValue – текущий обрабатываемый элемент массива.
- currentIndex – индекс текущего обрабатываемого элемента массива.
- arr – массив, к которому принадлежит текущий элемент (по которому происходит проход).
Возвращает накопленный результат с последнего вызова функции обратного вызова.
ОписаниеМетод reduce() используется для вычисления на основе массива какого-либо единого значения, иначе говорят «для свёртки массива».
Он применяет функцию callback по очереди к каждому элементу массива слева направо, сохраняя при этом промежуточный результат.
При первом вызове функции, параметры total и currentValue могут принимать одно из двух значений:
- Если при вызове reduce() передан аргумент initialValue , то значение total будет равным значению initialValue , а значение currentValue будет равным первому значению в массиве.
- Если аргумент initialValue не задан, то значение total будет равным первому значению в массиве, а значение currentValue будет равным второму значению в массиве.
Если массив пустой, а аргумент initialValue не указан, то будет сгенерировано исключение TypeError .
В случае, если массив состоит только из одного элемента и аргумент initialValue не указан, или если аргумент initialValue указан, но массив пустой, то будет возвращено одно это значение. При этом функции callback вызываться не будет.
Разберём работу метода reduce() на примере.
Например, в качестве «свёртки» мы хотим получить сумму всех элементов массива numbers:
При первом запуске total – исходное значение, с которого начинаются вычисления, равно нулю (второй аргумент метода reduce() – initialValue). Значение currentValue будет равным первому значению в массиве, т. е. – единице.
Сначала функция вызывается с этим начальным значением и первым элементом массива, результат запоминается и передаётся в следующий вызов, уже со вторым аргументом массива, затем новое значение участвует в вычислениях с третьим аргументом и так далее.
| 0 | 1 | 0 | 1 | |
| 0+1 | 2 | 1 | 3 | |
| 0+1+2 | 3 | 2 | 6 | |
| 0+1+2+3 | 4 | 3 | 10 | |
| 0+1+2+3+4 | 5 | 4 | 15 |
Как видно из таблицы, результат предыдущего вызова передаётся в первый аргумент следующего и т. д.
