path: root/files/ru/web/javascript/reference/global_objects/array/reduce/index.html

---
title: Array.prototype.reduce()
slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
tags:
  - Array
  - ECMAScript5
  - JavaScript
  - JavaScript 1.8
  - Method
  - Prototype
  - Reference
  - Référence(2)
  - polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
---
<div>{{JSRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>

<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox"><code><var>array</var>.reduce(<var>callback</var>[, <var>initialValue</var>])</code></pre>

<h3 id="Parameters" name="Parameters">Параметры</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>Функция, выполняющаяся для каждого элемента массива, принимает четыре аргумента:
 <dl>
  <dt><code>accumulator</code></dt>
  <dd>Аккумулятор, аккумулирующий значение, которое возвращает функция <strong>callback </strong>после посещения очередного элемента, либо значение <code>initialValue</code>, если оно предоставлено (смотрите пояснения ниже).</dd>
  <dt><code>currentValue</code></dt>
  <dd>Текущий обрабатываемый элемент массива.</dd>
  <dt><code>index</code>{{optional_inline}}</dt>
  <dd>Индекс текущего обрабатываемого элемента массива.</dd>
  <dt><code>array</code>{{optional_inline}}</dt>
  <dd>Массив, для которого была вызвана функция <code>reduce</code>.</dd>
 </dl>
 </dd>
 <dt><code>initialValue</code>{{optional_inline}}</dt>
 <dd>Необязательный параметр. Объект, используемый в качестве первого аргумента при первом вызове функции <code>callback</code>.</dd>
</dl>

<h2 id="Description" name="Description">Описание</h2>

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

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

<p>Если массив пустой и аргумент <code>initialValue</code> не указан, будет брошено исключение {{jsxref("Global_Objects/TypeError", "TypeError")}}. Если массив состоит только из одного элемента (независимо от его положения в массиве) и аргумент <code>initialValue</code> не указан, или если аргумент <code>initialValue</code> указан, но массив пустой, то будет возвращено одно это значение, без вызова функции <code>callback</code>.</p>

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

<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {
  return previousValue + currentValue;
});
</pre>

<p>Функция обратного вызова будет вызвана четыре раза, аргументы и возвращаемое значение при каждом вызове будут следующими:</p>

<table style="width: 100%;">
 <thead>
  <tr>
   <th scope="col"></th>
   <th scope="col"><code>previousValue</code></th>
   <th scope="col"><code>currentValue</code></th>
   <th scope="col"><code>index</code></th>
   <th scope="col"><code>array</code></th>
   <th scope="col">возвращаемое значение</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">первый вызов</th>
   <td><code>0</code></td>
   <td><code>1</code></td>
   <td><code>1</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>1</code></td>
  </tr>
  <tr>
   <th scope="row">второй вызов</th>
   <td><code>1</code></td>
   <td><code>2</code></td>
   <td><code>2</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>3</code></td>
  </tr>
  <tr>
   <th scope="row">третий вызов</th>
   <td><code>3</code></td>
   <td><code>3</code></td>
   <td><code>3</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>6</code></td>
  </tr>
  <tr>
   <th scope="row">четвёртый вызов</th>
   <td><code>6</code></td>
   <td><code>4</code></td>
   <td><code>4</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>10</code></td>
  </tr>
 </tbody>
</table>

<p>Значение, возвращённое методом <code>reduce()</code> будет равным последнему результату выполнения функции обратного вызова (<code>10</code>).</p>

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

<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, index, array) {
  return accumulator + currentValue;
}, 10);
</pre>

<table style="width: 100%;">
 <thead>
  <tr>
   <th scope="col"></th>
   <th scope="col"><code>accumulator</code></th>
   <th scope="col"><code>currentValue</code></th>
   <th scope="col"><code>index</code></th>
   <th scope="col"><code>array</code></th>
   <th scope="col">возвращаемое значение</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">первый вызов</th>
   <td><code>10</code></td>
   <td><code>0</code></td>
   <td><code>0</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>10</code></td>
  </tr>
  <tr>
   <th scope="row">второй вызов</th>
   <td><code>10</code></td>
   <td><code>1</code></td>
   <td><code>1</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>11</code></td>
  </tr>
  <tr>
   <th scope="row">третий вызов</th>
   <td><code>11</code></td>
   <td><code>2</code></td>
   <td><code>2</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>13</code></td>
  </tr>
  <tr>
   <th scope="row">четвёртый вызов</th>
   <td><code>13</code></td>
   <td><code>3</code></td>
   <td><code>3</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>16</code></td>
  </tr>
  <tr>
   <th scope="row">пятый вызов</th>
   <td><code>16</code></td>
   <td><code>4</code></td>
   <td><code>4</code></td>
   <td><code>[0, 1, 2, 3, 4]</code></td>
   <td><code>20</code></td>
  </tr>
 </tbody>
</table>

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

<h2 id="Examples" name="Examples">Примеры</h2>

<h3 id="Example_Sum_up_all_values_within_an_array" name="Example:_Sum_up_all_values_within_an_array">Суммирование всех значений в массиве</h3>

<pre class="brush: js">var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6
</pre>

<h3 id="Суммирование_значений_в_массиве_объектов">Суммирование значений в массиве объектов</h3>

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

<pre class="brush: js">var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
}, initialValue)
// sum == 6
</pre>

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

<pre class="brush: js">var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) =&gt; accumulator + currentValue.x,
    initialValue
);
// sum == 6
</pre>

<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Разворачивание массива массивов</h3>

<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened равен [0, 1, 2, 3, 4, 5]
</pre>

<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Пример: склеивание массивов, содержащихся в объектах массива, с использованием оператора расширения и initialValue</h3>

<pre class="brush: js">// 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 - список, который будет содержать все книги друзей +
// дополнительный список указанный в initialValue
var 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"]
</pre>

<h2 id="Polyfill" name="Polyfill">Полифилл</h2>

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

<pre class="brush: js">// Шаги алгоритма 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.21
if (!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 &gt;&gt;&gt; 0, k = 0, value;
    if (arguments.length &gt;= 2) {
      value = arguments[1];
    } else {
      while (k &lt; len &amp;&amp; ! (k in t)) {
        k++;
      }
      if (k &gt;= len) {
        throw new TypeError('Reduce of empty array with no initial value');
      }
      value = t[k++];
    }
    for (; k &lt; len; k++) {
      if (k in t) {
        value = callback(value, t[k], k, t);
      }
    }
    return value;
  };
}
</pre>

<h2 id="Specifications" name="Specifications">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Изначальное определение. Реализована в JavaScript 1.8.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<div>
<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div>

<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
</div>

<h2 id="See_also" name="See_also">Смотрите также</h2>

<ul>
 <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
</ul>