Объявление forEach глобально и использование его в функциях

Question

У меня есть JSON с именами сотрудников из 10 элементов, как показано ниже

{
   "name" : "Prem",
   "dob"  : "10-10-1992"
},

С тремя кнопками каждая имеет определенную функцию

document.getElementById('btn-25').addEventListener('click',ageCategory25)
document.getElementById('btn-50').addEventListener('click',ageCategory50)
document.getElementById('btn-100').addEventListener('click',ageCategory100)

const output = document.getElementById('result2')


function ageCategory25(){
    output.innerHTML =''
     employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
        if(ageFilter < 25 ){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
    })
}

function ageCategory50(){
    output.innerHTML =''
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
         if(ageFilter >= 25 && ageFilter<=50){
            output.innerHTML += `<h3> ${employee.name} </h3>`
       }
    })
}

function ageCategory100(){
    output.innerHTML =''
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
         if(ageFilter >= 50 && ageFilter<=100){
            output.innerHTML += `<h3> ${employee.name} </h3>`
       }
    })
}


function getAge(date){
    const currentAge = Math.floor((new Date() - new Date(date).getTime())/31556925994)
    return currentAge
}

Приведенный выше код работает правильно, я могу получить результат в соответствии с возрастом, указанным в кнопках. Но я объявляю цикл forEach во всех функциях, есть ли способ объявить forEach один раз глобально и использовать его во всех функциях. Заранее спасибо

Answer 1

Вы можете получить 25,50,100 в функции.

document.getElementById('btn-25').addEventListener('click',()=>ageCategory(25))
document.getElementById('btn-50').addEventListener('click',()=>ageCategory(50))
document.getElementById('btn-100').addEventListener('click',()=>ageCategory(100))


function ageCategory(n){
    output.innerHTML =''
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
        if(n === 25 && ageFilter < 25 ){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
        else if(n === 50 && ageFilter >= 25 && ageFilter<=50){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
        else if(n === 100 && ageFilter >= 50 && ageFilter<=100){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
    })
}

ОБНОВЛЕНИЕ: Я думаю, что это может быть немного лучше:

function ageCategory(n) {
    output.innerHTML = '';
    let filter;
    if      (n === 25)   { filter = (x) => (x < 25);            }
    else if (n === 50)   { filter = (x) => (x >= 25 && x <= 50) }
    else if (n === 100)  { filter = (x) => (x >= 50 && x<=100)  }
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob);
        if(filter(ageFilter)){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
    })
}

Answer 2

Вы можете создать функцию следующим образом:

function ageCategory(age){
  output.innerHTML =''
  employees.forEach(function(employee){
    const ageFilter = getAge(employee.dob)
    if(age == 25 && ageFilter < 25 ){
      output.innerHTML += `<h3> ${employee.name} </h3>`
    }
    else if(age == 50 && ageFilter >= 25 && ageFilter <= 50){
      output.innerHTML += `<h3> ${employee.name} </h3>`
    } 
    else if(age == 100 && ageFilter >= 50 && ageFilter <= 100){
      output.innerHTML += `<h3> ${employee.name} </h3>`
    }
  }    
}

Затем используйте функцию в качестве обратного вызова addEventListener(), передавая возраст следующим образом:

document.getElementById('btn-25').addEventListener('click', ageCategory(25));
document.getElementById('btn-50').addEventListener('click', ageCategory(50));
document.getElementById('btn-100').addEventListener('click', ageCategory(100));