Как посчитать среднее арифметическое для нескольких элементов массива по индексу?! Магия JS

TL;DR

/ Находим сумму чисел массива
 let sum = [1,2,3,4,5].reduce((a, b) => a + b, 0);
// Делим её на длину массива
let result = sum / [1,2,3,4,5].length;

Йо-йо! Совсем недавно на фрилансе увидел такую задачу:

Есть 5 чекбоксов. 
Каждый чекбокс прописан как массив из 5 цифр. 
Хочу, чтобы при нажатии на чекбоксы возвращался (логом) массив из 5 цифр, являющихся средним арифметическим массивов чекбоксов по индексам. 
Например, если нажаты два чекбокса, 
содержащие [1,2,3,4,5] и [4,5,6,7,8] 
функция должна вернуть массив : [2.5, 3.5,4.5,5.5,6.5]

Плюс в заголовке было задание написать функцию на чистом js. Ну, что же… Вызов принят)

HTML таких чекбоксов

Простые чекбоксы в блоке. Буду вешать на него слушатель нажатий.

<div id="container">
  <input app-id="a1" type="checkbox"/>1<br/>
  <input app-id="a2" type="checkbox"/>2<br/>
  <input app-id="a3" type="checkbox"/>3<br/>
  <input app-id="a4" type="checkbox"/>4<br/>
  <input app-id="a5" type="checkbox"/>5<br/>
</div>

JS. Хранение данных массивов

У каждого чексбокса я определил атрибут app-id. Я предусмотрел, что в объекте будут храниться массивы, а app-id будет служить идентификатором массива.

// Объект для хранения массива
let ObjArrs = {
  a1: [1,2,3,4,5],
  a2: [2,4,5,6,7],
  a3: [3,4,5,6,8],
  a4: [1,5,3,8,1],
  a5: [4,9,4,5,7]
};

Таким образом, первому чекбоксу у которого app-id=»a1″ будет назначен массив [1,2,3,4,5]. Соответственно так же и у других массивов. Далее я тоже буду хранить обрабатываемые данные в подобном объекте. Для удобства я создал переменную let concat = ‘a’; далее она понадобится.

JS. Слушатель событий

Определяем наш блок по которому будем кликать и проверяем, что кликнули именно по чекбоксу. Далее получаем только выделенные чекбоксы.

//
// Получаем контейнер
let container = document.querySelector('#container');
// Вешаем обработчик
container.addEventListener('click', (e)=>{
  // Проверяем что кликнули именно по чекбоксу
  if(e.target.tagName = 'INPUT' && e.target.getAttribute('type') === 'checkbox'){
// Получаем только выбранные элементы
    let items = Array.from(container.querySelectorAll('input[type="checkbox"]:checked'));
  } 
});

JS. Собираем данные для обработки

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

// Создаю объект для хранения массивов по индексам
let tObj = new Object();
// Прохожусь по массиву элементов
    items.map((e, i)=>{
      // Получаю массив для элемента из ObjArrs
      let eA = ObjArrs[e.getAttribute('app-id')];
      // Прохожусь по массиву чисел
      eA.map((e, ii)=>{
        // Если это первый элемент
        if(i === 0){
          let key = concat + ii;
          let value = e;
          /* Создаём массив
          * элемента объекта, где ключ переменная concat + индекс
          */
          tObj[key] = new Array();
          tObj[key].push(value);
        } else {
            let key = concat + ii;
            let value = e;  
            tObj[key].push(value);
        }
      });
      
    });

Нам осталось посчитать среднеарифметическое и распечатать массив со значением в массив.

JS. Как найти среднее арифметическое

У нас есть массив со значениями и нам нужно найти среднеарифметическое. Среднеарифметическое для массива можно найти так:

// Находим сумму чисел массива
 let sum = [1,2,3,4,5].reduce((a, b) => a + b, 0);
// Делим её на длину массива
let result = sum / [1,2,3,4,5].length;

JS. Находим среднее арифметическое для каждого индекса

В нашем случае это будет так.

// Создаём массив ключей объекта. По сути это индекс массива
let k = Object.keys(tObj);
// Создам результирующий массив
    let resultArr = new Array();
// Проходимся по каждому массиву и находим среднеарифметическое
    k.map((r)=>{
      let sum = tObj[r].reduce((a, b) => a + b, 0);
      let result = sum / tObj[r].length;
// Записываем код в результирующий массив
      resultArr.push(result);
    });
    // Выводим результат в консоль
    console.log(resultArr);

Это был конечный этап. Вы можете посмотреть полный код и пример на codepen

See the Pen FL1 by xakplant (@xakplant) on CodePen.

Не забываем комментировать и обращаться за советом, а так же я готов к коммерческим предложениям). Кстати я скоро выкачу релиз новой версии своей библиотеки stickjaw