Как посчитать среднее значение в javascript

Функциональный JavaScript: пять способов нахождения среднего арифметического элементов массива и метод .reduce()

Методы итерирования массивов похожи на «стартовые наркотики» (это, конечно, не наркотики; и я не говорю, что наркотики — это хорошо; это — просто фигура речи). Из-за них многие «подсаживаются» на функциональное программирование. Всё дело в том, что они невероятно удобны. Кроме того, большинство этих методов очень просто понять. Методы наподобие .map() и .filter() принимают всего один аргумент-коллбэк и позволяют решать простые задачи. Но возникает такое ощущение, что метод .reduce() у многих вызывает определённые затруднения. Понять его немного сложнее.

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

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

1. Общая сумма значений элементов массива.
2. Длина массива.

Как видите, особых непонятностей тут не наблюдается. Но задача становится тяжелее в том случае, если работать приходится с более сложными структурами данных. Что если у нас имеется массив объектов? Что если некоторые объекты из этого массива нужно отфильтровать? Как быть, если из объектов нужно извлечь некие числовые значения? При таком раскладе вычисление среднего значения для элементов массива — это уже задача немного более сложная.

Для того чтобы с этим разобраться мы решим учебную задачу (она основана на этом задании с FreeCodeCamp). Решим мы её пятью разными способами. У каждого из них есть собственные преимущества и недостатки. Разбор этих пяти подходов к решению данной задачи покажет то, каким гибким может быть JavaScript. И я надеюсь, что анализ решений даст вам пищу для размышлений о том, как использовать .reduce() в реальных проектах.

Обзор задачи

Предположим, что у нас есть массив объектов, описывающих сленговые выражения викторианской эпохи. Нужно отфильтровать те выражения, которые не встречаются в Google Books (свойство found соответствующих объектов равно false ), и найти среднюю оценку популярности выражений. Вот как могут выглядеть подобные данные (они взяты отсюда):

Рассмотрим 5 способов нахождения среднего значения оценки популярности выражений из этого массива.

1. Решение задачи без использования .reduce() (императивный цикл)

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

Если вы знакомы с JavaScript, то вы без особого труда поймёте этот пример. Собственно говоря, здесь происходит следующее:

1. Мы инициализируем переменные popularitySum и itemsFound . Первая переменная, popularitySum , хранит общую оценку популярности выражений. А вторая переменная, itemsFound , (вот уж неожиданность) хранит количество найденных выражений.
2. Затем мы инициализируем константу len и переменную item , которые пригодятся нам при обходе массива.
3. В цикле for счётчик i инкрементируется до тех пор, пока его значение не достигнет значения индекса последнего элемента массива.
4. Внутри цикла мы берём элемент массива, который хотим исследовать. К элементу обращаемся с помощью конструкции victorianSlang[i] .
5. Затем мы выясняем, встречается ли данное выражение в коллекции книг.
6. Если выражение в книгах встречается — мы берём значение его рейтинга популярности и прибавляем к значению переменной popularitySum .
7. При этом мы ещё и увеличиваем счётчик найденных выражений — itemsFound .
8. И, наконец, мы находим среднее значение, деля popularitySum на itemsFound .

2. Простое решение №1: .filter(), .map() и нахождение суммы с помощью .reduce()

Давайте, перед первой попыткой воспользоваться методами массивов для решения задачи, разобьём её на небольшие части. А именно, вот что нам нужно сделать:

1. Отобрать объекты, представляющие выражения, которые имеются в коллекции Google Books. Тут можно воспользоваться методом .filter() .
2. Извлечь из объектов оценки популярности выражений. Для решения этой подзадачи подойдёт метод .map() .
3. Вычислить сумму оценок. Здесь мы можем прибегнуть к помощи нашего старого друга .reduce() .
4. И, наконец, найти среднее значение оценок.

Приглядитесь к функции addScore , и к той строке, где вызывается .reduce() . Обратите внимание на то, что addScore принимает два параметра. Первый, runningTotal , известен как аккумулятор. Он хранит сумму значений. Его значение изменяется каждый раз, когда мы, перебирая массив, выполняем оператор return . Второй параметр, popularity , представляет собой отдельный элемент массива, который мы обрабатываем. В самом начале перебора массива оператор return в addScore ещё ни разу не выполнялся. Это значит, что значение runningTotal ещё не устанавливалось автоматически. Поэтому, вызывая .reduce() , мы передаём этому методу то значение, которое нужно записать в runningTotal в самом начале. Это — второй параметр, переданный .reduce() .

Итак, мы применили для решения задачи методы итерирования массивов. Новая версия решения получилась гораздо чище, чем предыдущая. Другими словами, решение получилось более декларативным. Мы не сообщаем JavaScript о том, как именно нужно выполнить цикл, не следим за индексами элементов массивов. Вместо этого мы объявляем простые вспомогательные функции маленького размера и комбинируем их. Всю тяжёлую работу делают за нас методы массивов .filter() , .map() и .reduce() . Такой подход к решению подобных задач оказывается более выразительным. Эти методы массивов гораздо полнее, чем это может сделать цикл, сообщают нам о намерении, заложенном в код.

3. Простое решение №2: использование нескольких аккумуляторов

В предыдущей версии решения мы создали целую кучу промежуточных переменных. Например — foundSlangTerms и popularityScores . В нашем случае такое решение вполне приемлемо. Но что если мы поставим перед собой более сложную цель, касающуюся устройства кода? Хорошо было бы, если мы могли бы использовать в программе шаблон проектирования «текучий интерфейс» (fluent interface). При таком подходе мы смогли бы объединять в цепочку вызовы всех функций и смогли бы обойтись без промежуточных переменных. Однако тут нас поджидает одна проблема. Обратите внимание на то, что нам необходимо получить значение popularityScores.length . Если мы собираемся объединить всё в цепочку, тогда нужен какой-то другой способ нахождения количества элементов в массиве. Количество элементов в массиве играет роль делителя при вычислении среднего значения. Посмотрим — сможем ли мы так изменить подход к решению задачи, чтобы всё можно было бы сделать путём объединения вызовов методов в цепочку. Мы сделаем это, отслеживая при переборе элементов массива два значения, то есть — используя «двойной аккумулятор».

Здесь мы, для работы с двумя значениями, воспользовались в функции-редьюсере объектом. При каждом проходе по массиву, выполняемом с помощью addScrores , мы обновляем общее значение рейтинга популярности и количество элементов. Важно обратите внимание на то, что эти два значения представлены в виде одного объекта. При таком подходе мы можем «обмануть» систему и хранить две сущности внутри одного возвращаемого значения.

Функция addScrores получилась немного более сложной, чем функция с таким же именем предыдущего примера. Но теперь оказывается так, что мы можем использовать единственную цепочку вызовов методов для выполнения всех операций с массивом. В результате обработки массива получается объект popularityInfo , который хранит всё, что нужно для нахождения среднего. Это делает цепочку вызовов аккуратной и простой.

Если вы чувствуете в себе желание улучшить этот код, то вы можете с ним поэкспериментировать. Например — можете переделать его так, чтобы избавиться от множества промежуточных переменных. Этот код можно даже попытаться уложить в одну строчку.

4. Композиция функций без использования точечной нотации

Если вы — новичок в функциональном программировании, или если вам кажется, что функциональное программирование — это слишком сложно, вы можете пропустить этот раздел. Его разбор принесёт вам пользу в том случае, если вы уже знакомы с curry() и compose() . Если вы хотите углубиться в данную тему — взгляните на этот материал о функциональном программировании на JavaScript, и, в частности, на третью часть серии, в которую он входит.

Мы — программисты, которые придерживаются функционального подхода. Это значит, что мы стремимся к тому, чтобы строить сложные функции из других функций — маленьких и простых. До сих пор мы, в ходе рассмотрения разных вариантов решения задачи, уменьшали количество промежуточных переменных. В результате код решения становился всё проще и проще. Но что если довести эту идею до крайности? Что если попытаться избавиться от всех промежуточных переменных? И даже попробовать уйти от некоторых параметров?

Можно создать функцию для вычисления среднего значения с использованием одной лишь функции compose() , без использования переменных. Мы называем это «программированием без использования точеной нотации» или «неявным программированием». Для того чтобы писать подобные программы понадобится множество вспомогательных функций.

Иногда такой код шокирует людей. Это происходит из-за того, что подобный подход сильно отличается от общепринятого. Но я выяснил, что написание кода в стиле неявного программирования является одним из самых быстрых способов вникнуть в сущность функционального программирования. Поэтому я могу вам посоветовать попробовать эту методику в каком-нибудь личном проекте. Но хочу сказать, что, возможно, не стоит писать в стиле неявного программирования тот код, который придётся читать другим людям.

Итак, вернёмся к нашей задаче по построению системы вычисления средних значений. Ради экономии места мы перейдём здесь на использование стрелочных функций. Обычно, как правило, лучше использовать именованные функции. Вот хорошая статья на эту тему. Это позволяет получить более качественные результаты трассировки стека в случае возникновения ошибок.

Если весь этот код кажется вам полной бессмыслицей — не беспокойтесь об этом. Я включил его сюда в виде интеллектуального упражнения, а не для того, чтобы вас расстраивать.

В данном случае основная работа идёт в функции compose() . Если прочесть её содержимое снизу вверх, то окажется, что вычисления начинаются с фильтрации массива по свойству его элементов found . Затем мы извлекаем свойство элементов popularity с помощью map() . После этого мы используем так называемый «blackbird combinator». Эта сущность представлена в виде функции B1 , которая используется для выполнения двух проходов вычислений над одним набором входных данных. Для того чтобы лучше в этом разобраться, взгляните на эти примеры:

Опять же, если вы снова ничего не поняли — не беспокойтесь. Это — просто демонстрация того, что на JavaScript можно писать очень разными способами. Из таких вот особенностей и складывается красота этого языка.

5. Решение задачи за один проход с вычислением кумулятивного среднего значения

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

Для того чтобы вычислить среднее значение для элементов массива за один проход, нам понадобится новый метод. Нужно найти способ вычисления среднего с использованием ранее вычисленного среднего и нового значения. Поищем этот способ с помощью алгебры.

Среднее значение n чисел можно найти, воспользовавшись такой формулой:

Для того чтобы узнать среднее n + 1 чисел подойдёт та же формула, но в другой записи:

Эта формула представляет собой то же самое, что вот это:

И то же самое, что это:

Если немного это преобразовать, то получится следующее:

Если вы не видите во всём этом смысла — ничего страшного. Итог всех этих преобразований сводится к тому, что с помощью последней формулы мы можем рассчитывать среднее значение в процессе однократного обхода массива. Для этого нужно знать значение текущего элемента, среднее значение, вычисленное на предыдущем шаге, и число элементов. Кроме того, большинство вычислений можно вынести в функцию-редьюсер:

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

Обратите внимание на то, что это необязательно делает вычисления более эффективными. При таком подходе приходится выполнять больше вычислений. Мы, при поступлении каждого нового значения, выполняем операции умножения и деления, делая это для поддержания текущего значения среднего в актуальном состоянии. В других вариантах решения этой задачи мы делим одно число на другое лишь один раз — в конце программы. Но такой подход гораздо эффективнее в плане использования памяти. Промежуточные массивы здесь не используются, в результате нам приходится хранить в памяти лишь объект с двумя значениями.

Однако такая вот эффективность использования памяти имеет определённую цену. Теперь в одной функции мы выполняем три действия. Мы в ней фильтруем массив, извлекаем число и пересчитываем результат. Это усложняет функцию. В результате, взглянув на код, уже не так просто его понять.

Что выбрать?

Какой же из рассмотренных выше пяти подходов к решению задачи можно назвать самым лучшим? На самом деле, это зависит от многих факторов. Возможно, вам нужно обработать по-настоящему длинный массив. Или, возможно, вашему коду нужно выполняться на платформе, на которой доступно не особенно много памяти. В подобных случаях имеет смысл воспользоваться тем решением задачи, где обработка массива выполняется за один проход. Но если системные ограничения роли не играют, тогда можно с успехом пользоваться более выразительными подходами к решению задачи. Программисту нужно проанализировать собственную ситуацию и принять решение о том, что лучше всего подходит его приложению, что наиболее целесообразно использовать в его обстоятельствах.

Возможно, у кого-то сейчас возникнет вопрос о том, есть ли способ объединения преимуществ разных подходов к решению подобной задачи. Можно ли разбить задачу на мелкие части, но выполнять все вычисления за один проход по массиву? Сделать это можно. Для этого понадобится применить концепцию трансдьюсеров. Это — отдельная большая тема.

JavaScript How to Calculate Average of an Array

However, if this does not ring any bells, I recommend reading further.

In this guide, you learn how to calculate the average of an array of numbers in three different ways:

1. The for loop approach
2. The forEach() function
3. The reduce() function

Before jumping into these, let’s make sure you understand what it means to calculate the average in the first place.

Average in Mathematics

The average value describes the centrality of data. Here the red line is the average height of the columns.

In mathematics, the average is the middle value of a group of numbers. The average is also commonly called the mean or the arithmetic mean.

The average is calculated by dividing the sum of all the values by the number of values.

Example. Find the average age of a group of students in this table:

Solution. Let’s sum up the ages and divide the result by the number of students:

Calculating the average is a useful way to describe data in statistics.

For instance, you can calculate the average of your grades to get an idea of how well your studies are going.

Anyway, let’s jump into the coding part of this tutorial.

Let’s implement a basic JavaScript for loop to find the average first.

Find the Average with For Loop in JavaScript

Perhaps the most beginner-friendly way to find the average of a JavaScript array is by using a for loop for summing up the numbers.

Here is how to use a for loop to find the average of an array of numbers:

1. Create an array of numbers.
2. Initialize the sum variable to accumulate the numbers.
3. Loop through the numbers and add each number to the sum.
4. Divide the sum of numbers by the number of numbers in the array.
5. Show the result.

Although there is nothing wrong with this approach, we can make it way shorter and more concise.

Next up, you are going to learn how to use the forEach() function for calculating the average.

The following examples are more intermediate. Do not worry if you find them a bit tricky as a beginner!

Find the Average Using forEach()

In JavaScript, there is a built-in function called forEach().

This function is used to run a give function for each element in the array.

In other words, the forEach() function behaves a lot like a for loop. It iterates through the array and calls the given function for each element.

To find the average using forEach() function:

1. Create an array of numbers.
2. Initialize the sum to 0.
3. UseforEach() function to loop through the numbers and add each number to the sum.
4. Divide the sum of numbers by the number of numbers in the array.
5. Show the result.

To make the forEach() add each number to the sum, it needs to take a function that accepts a number argument and adds it to the sum.

To make it a bit more concise, you can also use the arrow function notation in the forEach() function call:

Although this approach is a bit shorter than the for loop approach, it is still not the most elegant one.

Next, let’s use the reduce() function to find the average of an array of numbers.

This will make the process significantly more straightforward.

Find the Average Using reduce()

In JavaScript, there is a built-in function called reduce().

This function works the same way as folding in mathematics. Reducing means you fold a group of numbers into a single value.

For example, you can reduce or fold an array of numbers to get the sum of it.

The reduce() function takes a function as its argument. This is called a reducer.

It also takes an initial value for the accumulated result as its second argument.

Here is how the reduce() function and the reducer function operate on an array:

1. Call a reducer on the first two elements of the array to get a partial result.
2. Call the same function on the partial result and the third element of the array to create a new result.
3. Repeat until there are no more values left.
4. Return the result.

Now, let’s use the reduce() to find the average of a function.

Let’s take a moment to understand how this piece of code works:

1. The reducer (a, b) => a + b is called for each number in the array, where
   • a is the “result so far”.
   • b is the next number.
2. The second argument of the reduce() function call is 0. This is the initial value for the sum of the array.
3. The reduce() function is used to find the sum of the numbers in the array.
4. The sum is then divided by the length of the array to get the average.

As you can see, this piece of code is way shorter than the for-loop approach. Once you learn how to read the reduce() function a bit better, you notice how much simpler this piece of code is than the lengthy for loop.

To find a complete guide on how to use the reduce() function in JavaScript, feel free to read this article.

This completes the example.

Now you should have a great understanding of how to calculate the average of an array in JavaScript in a bunch of different-looking ways.

Before you go, let’s do a quick recap.

Conclusion

Today you learned how to calculate the average of an array in JavaScript.

To recap, the average is used in statistics to describe the centrality of a dataset.

To find the average (the mean), sum up the values and divide the sum by the number of values.

In JavaScript, there is a bunch of ways in which you can find the average. In this guide, you saw three common examples:

• For loop
• The forEach() function
• The reduce() function.

The latter approach is a bit tricky to wrap your head around as a beginner. However, it is a really short and concise way to get the job done.

Как посчитать среднее значение в javascript

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 71a8b7034dbd694c • Your IP : 82.102.23.104 • Performance & security by Cloudflare

How to compute the sum and average of elements in an array? [duplicate]

I am having problems adding all the elements of an array as well as averaging them out. How would I do this and implement it with the code I currently have? The elements are supposed to be defined as I have it below.

35 Answers 35

A solution I consider more elegant:

Just iterate through the array, since your values are strings, they have to be converted to an integer first. And average is just the sum of values divided by the number of values.

Calculating average (mean) using reduce and ES6:

Shortest one liner for Average

Shortest one liner for Sum

Let’s imagine we have an array of integers like this:

The average is obtained with the following formula

A= (1/n)Σxi ( with i = 1 to n ) . So: x1/n + x2/n + . + xn/n

We divide the current value by the number of values and add the previous result to the returned value.

The reduce method signature is

The reduce callback function takes the following parameters:

• p : Result of the previous calculation
• c : Current value (from the current index)
• i : Current array element’s index value
• a : The current reduced Array

The second reduce’s parameter is the default value . (Used in case the array is empty ).

So the average reduce method will be:

If you prefer you can create a separate function

And then simply refer to the callback method signature

Or Augment the Array prototype directly..

It’s possible to divide the value each time the reduce method is called..

Or even better , using the previously defined Array.protoype.sum()

method, optimize the process my calling the division only once 🙂

Then on any Array object of the scope:

NB: an empty array with return a NaN wish is more correct than 0 in my point of view and can be useful in specific use cases.

generally average using one-liner reduce is like this

specifically to question asked

an efficient version is like

as gotofritz pointed out seems Array.reduce skips undefined values. so here is a fix:

You can also use lodash, _.sum(array) and _.mean(array) in Math part (also have other convenient stuff).

Not the fastest, but the shortest and in one line is using map() & reduce():

I use these methods in my personal library:

EDIT: To use them, simply ask the array for its sum or average, like:

In ES6-ready browsers this polyfill may be helpful.

You can share same call method between Math.sum , Math.avg and Math.max ,such as

you can use Math.sum as

or if you have an array to sum up,you can use

One sneaky way you could do it although it does require the use of (the much hated) eval().

Just thought I’d post this as one of those ‘outside the box’ options. You never know, the slyness might grant you (or taketh away) a point.

Here is a quick addition to the “Math” object in javascript to add a “average” command to it!!

Then i have this addition to the “Math” object for getting the sum!

So then all you do is

And where i put the placeholder array just pass in your variable (The input if they are numbers can be a string because of it parsing to a number!)

I found Mansilla’s answer to work fine with the extension of making sure that I am doing summation of floats and not concatonation of strings using parseFloat():

set your for loop counter to 0. you’re getting element 9 and then you’re done as you have it now. The other answers are basic math. Use a variable to store your sum (need to cast the strings to ints), and divide by your array length.

Start by defining all of the variables we plan on using. You’ll note that for the numbers array, I’m using the literal notation of [] as opposed to the constructor method array() . Additionally, I’m using a shorter method to set multiple variables to 0.

Next I’m populating my empty numbers array with the values 0 through 11. This is to get me to your original starting point. Note how I’m pushing onto the array count++ . This pushing the current value of count, and then increments it for the next time around.

Lastly, I’m performing a function «for each» of the numbers in the numbers array. This function will handle one number at a time, which I’m identifying as «n» within the function body.

In the end, we can output both the sum value, and the avg value to our console in order to see the result: