когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Как посчитать среднее арифметическое для нескольких элементов массива по индексу?! Магия 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 таких чекбоксов
Простые чекбоксы в блоке. Буду вешать на него слушатель нажатий.
У каждого чексбокса я определил атрибут 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
Не забываем комментировать и обращаться за советом, а так же я готов к коммерческим предложениям). Кстати я скоро выкачу релиз новой версии своей библиотеки stickjaw
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.