Как посчитать среднее арифметическое для нескольких элементов массива по индексу?! Магия JS
Йо-йо! Совсем недавно на фирлансе увидел такую задачу:
Есть 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 таких чекбоксов
Простые чекбоксы в блоке. Буду вешать на него слушатель нажатий.
|
1 2 3 4 5 6 7 |
<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 будет служить идентификатором массива.
|
1 2 3 4 5 6 7 8 |
// Объект для хранения массива 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. Слушатель событий
Определяем наш блок по которому будем кликать и проверяем, что кликнули именно по чекбоксу. Далее получаем только выделенные чекбоксы.
|
1 2 3 4 5 6 7 8 9 10 11 |
// // Получаем контейнер 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 были в одном массиве, так же и с другими. Это я далаю следующим образом
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Создаю объект для хранения массивов по индексам 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. Как найти среднее арифметическое
У нас есть массив со значениями и нам нужно найти среднеарифметическое. Среднеарифметическое для массива можно найти так:
|
1 2 3 4 |
// Находим сумму чисел массива let sum = [1,2,3,4,5].reduce((a, b) => a + b, 0); // Делим её на длину массива let result = sum / [1,2,3,4,5].length; |
JS. Находим среднее арифметическое для каждого индекса
В нашем случае это будет так.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Создаём массив ключей объекта. По сути это индекс массива 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